无js5款纯div+css制作的弹出菜单标准

您现在的位置：首页 > 技术文档 > CSS

来源：中文源码网浏览：302 次日期：2024-04-24 03:54:10

无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 >
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 >
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
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
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 >
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
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：无限级CSS树形菜单 Ver2.0

下一篇：文字应用css滤镜集锦

点击排行

您现在的位置：首页 > 技术文档 > CSS

无js5款纯div+css制作的弹出菜单标准

相关内容