无js5款纯div+css制作的弹出菜单标准
一、最基本的：二级dropdown弹出菜单
二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
- DEMOS
DEMOS
- zero dollars
- wrapping text
- styled form
- active focus
- shadow boxing
- image map
- fun backgrounds
- fade scrolling
- em sized images
- MENUS
MENUS
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- LAYOUTS
LAYOUTS
- Fixed 1
- Fixed 2
- Fixed 3
- Fixed 4
- minimum width
- BOXES
BOXES
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- MOZILLA
MOZILLA
- drop down menu
- cascading menu
- content:
- mozzie box
- rainbow box
- snooker cue
- target practise
- two tone headings
- shadow text
- EXPLORER
EXPLORER
- example one
- weft fonts
- vertical align
- OPACITY
OPACITY
- opaque colours
- opaque menu
- partial opacity
- partial opacity II
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
二、三级dropdown弹出菜单
三级dropdown弹出菜单
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
- DEMOS
DEMOS
- zero dollars
- wrapping text
- styled form
- active focus
- HOVER/CLICK >
- styled form
- active focus
- hover/click
- shadow boxing
- image map
- fun backgrounds
- fade scrolling
- em sized images
- MENUS
MENUS
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- LAYOUTS
LAYOUTS
- Fixed 1
- Fixed 2
- Fixed 3
- Fixed 4
- minimum width
- BOXES
BOXES
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- MOZILLA
MOZILLA
- drop down menu
- cascading menu
- content:
- mozzie box
- rainbow box
- snooker cue
- target practise
- two tone headings
- shadow text
- EXPLORER
EXPLORER
- example one
- weft fonts
- vertical align
- OPACITY
OPACITY
- opaque colours
- opaque menu
- partial opacity
- partial opacity II
- < HOVER/CLICK
- styled form
- active focus
- hover/click
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
三、flyout-竖向三级弹出菜单
flyout-竖向三级弹出菜单
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#eee; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
- DEMOS
DEMOS
- zero dollars
- wrapping text
- styled form
- active focus
- HOVER/CLICK >
- styled form
- active focus
- hover/click
- shadow boxing
- image map
- fun backgrounds
- fade scrolling
- em sized images
- MENUS
MENUS
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- LAYOUTS
LAYOUTS
- Fixed 1
- Fixed 2
- Fixed 3
- Fixed 4
- minimum width
- BOXES
BOXES
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- MOZILLA
MOZILLA
- drop down menu
- cascading menu
- content:
- mozzie box
- rainbow box
- snooker cue
- target practise
- two tone headings
- shadow text
- EXPLORER
EXPLORER
- example one
- weft fonts
- vertical align
- OPACITY
OPACITY
- opaque colours
- opaque menu
- partial opacity
- partial opacity II
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
四、dropline-水平三级横向弹出菜单
dropline-水平三级横向弹出菜单
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
- DEMOS
DEMOS
- zero dollars
- wrapping text
- styled form
- active focus
- HOVER/CLICK
- styled form
- active focus
- hover/click
- shadow boxing
- image map
- MENUS
MENUS
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- LAYOUTS
LAYOUTS
- Fixed 1
- Fixed 2
- Fixed 3
- Fixed 4
- minimum width
- BOXES
BOXES
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- MOZILLA
MOZILLA
- drop down menu
- cascading menu
- content:
- mozzie box
- rainbow box
- snooker cue
- target practise
- EXPLORER
EXPLORER
- example one
- weft fonts
- vertical align
- OPACITY
OPACITY
- opaque colours
- opaque menu
- partial opacity
- partial opacity II
- HOVER/CLICK
- styled form
- active focus
- hover/click
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
五、upmenu-水平竖弹向上三级弹出菜单
upmenu-水平竖弹向上三级弹出菜单
/* common styling */
.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#e9e9c7;}
.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;}
.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;}
.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}
.menu ul li:hover ul.left {left:-105px;}
.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;}
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#000; background:#e9e9c7;}
.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;}
.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;}
.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}
.menu ul li a:hover ul.left {left:-105px;}
.menu ul li a:hover ul li a:hover ul.left {left:-210px;}
- DEMOS
DEMOS
- zero dollars
- wrapping text
- styled form
- active focus
- HOVER/CLICK >
- styled form
- active focus
- hover/click
- shadow boxing
- image map
- fun backgrounds
- fade scrolling
- em sized images
- MENUS
MENUS
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- LAYOUTS
LAYOUTS
- Fixed 1
- Fixed 2
- Fixed 3
- Fixed 4
- minimum width
- BOXES
BOXES
- spies menu
- vertical menu
- enlarging list
- link images
- non-rectangular
- jigsaw links
- circular links
- MOZILLA
MOZILLA
- drop down menu
- cascading menu
- content:
- mozzie box
- rainbow box
- snooker cue
- target practise
- two tone headings
- shadow text
- EXPLORER
EXPLORER
- example one
- weft fonts
- vertical align
- OPACITY
OPACITY
- < HOVER/CLICK
- styled form
- active focus
- hover/click
- opaque colours
- opaque menu
- partial opacity
- partial opacity II
- < HOVER/CLICK
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
通用的二级菜单代码(css+javascript)
]但在<CSS二级菜单>中,如果一级菜单中的超链接是#,那么只要单击该一级菜单,那么与这个一级菜单对应的二级菜单就会一直显示在网页中,不能隐藏,是一个小小的bug.后来仔细的想了一想,其实,无论是什么样的二级菜单,原理都是一样的: 1.每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单. 2.默认情况下,二级菜单这个层是隐藏的,在CSS中将层的display属性值设为none,可以达到这一目的. 3.当鼠标放在一级菜单上时,将对应的二级菜单层显示出来,在CSS中将层的d
-
css+js下拉菜单
css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla
-
js+css实现tab菜单切换效果的方法
本文实例讲述了js+css实现tab菜单切换效果的方法.分享给大家供大家参考.具体实现方法如下: index.css如下: 复制代码 代码如下: * { margin: 0px; padding: 0px; } body { width: 600px; margin: 0 auto; background-color: silver; } #contanier { background-color: yellow;
-
Div+Css(+Js)菜单代码及制作工具
效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:
-
js css实现垂直方向自适应的三角提示菜单
这是一个比较简单实用的菜单,最重要的是他不需要引用jQuery库.菜单在垂直方向上能做到自适应,当主菜单靠近顶部,子菜单将会在下面,当主菜单靠近底部,子菜单在上面.运用Modernizr的触摸检测功能,我们可以让子菜单的响应在pc上是hover,而在触摸设备上是点击.例子中还示范了如何在宽度比较窄的情况下如何调整布局. html代码 <ul id="cbp-tm-menu" class="cbp-tm-menu"> <li> <a hr
-
JS+CSS 制作的超级简单的下拉菜单附图
先看效果: 代码: 复制代码 代码如下: <html> <head> <title>Good Test</title> <script> function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = "inline"; } function HideSubMenu(SubMenu) { document.getElementB
-
Div+CSS+JS树型菜单，可刷新
搞了一个DIV+CSS菜单,兼容Firefox,分享给大家,大家一齐学习 Div+CSS+JS树型菜单,可刷新 #PARENT{ width:300px; padding-left:20px; } 我的网站 [url]www.netany.net[/url] [url]www.netany.net[/url] [url]www.netany.net[/url] 我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务 网站管理 登录 管理 管理 管理 网站管理 登录 管理 管理 管理 工作需要搞了
-
JavaScript CSS创建右击菜单效果代码
效果图: css和javascript创建页面右键菜单 body { font-family: "宋体"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋体"; line-height: 20px; cursor: default
-
JavaScript CSS 菜单功能代码
Menu #menubar { font-family:verdana; font-size:12px; margin:1px; } #menubar li { float:left; position:relative; text-align:left; } /* each menu item style */ #menubar li a { border-style:none; color:black; display:block; width:150px; height:20px; lin
-
CSS JavaScript 实现菜单功能 改进版
改进版本优化了这个问题,通过简单的Javascript代码就可以增加菜单.同时使得HTML页面非常简洁,只需要写2行代码即可!O(∩_∩)O 1.使用前提,在HTML页面中引入一个CSS文件,和一个JavaScript文件.如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Menu</T