本日志标题:Div+Css(+Js)菜单代码及制作工具

导读:
   效果直逼flash的Div+Css+Js菜单
  转载自:http://www.dzhai.com/blog/article.asp?id=153
  < head>< meta http-equiv="Content-Type" content="text/html; charset=gb2312" />< title>css菜单< style> 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:relative;}#fbtn_txt div{ height:30px; padding-top:11px; font-size:12px; color:#800080; text-align:center; cursor:hand;}#fbtn_mask{ background-color:#ffffff; position:relative; width:100%; height:100%;}< body>< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>G1< div>good morning< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>G2< div>good evening< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>M1< div>my name is fireyy< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>M2< div>mm mm i love u< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>G1< div>good morning< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>G2< div>good evening< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>M1< div>my name is fireyy< div id=fbtn>< div id=fbtn_mask>< div id=fbtn_txt>< div>M2< div>mm mm i love u< script> var current=null; var t=null; for(var i=0;i 30) m.style.posTop=-30; else m.style.posTop=0;} else{ m.style.posTop+=3; o.style.posTop-=3; setTimeout('domove('+num+')',15);}}
  [Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
   另转:5款纯div+css制作的弹出菜单(标准且无js)
  来源:http://www.cssplay.co.uk/index.html
  整理:http://macrolong.com/blog/read.php?210
   一、最基本的:二级dropdown弹出菜单
  < html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU< style type="text/css">/* 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;} < body>< div class="menu">< ul>< li> DEMOS < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> shadow boxing < li> image map < li> fun backgrounds < li> fade scrolling < li> em sized images < li> MENUS < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> LAYOUTS < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> BOXES < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> MOZILLA < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> two tone headings < li> shadow text < li> EXPLORER < ul> < li> example one < li> weft fonts < li> vertical align < li> OPACITY < ul> < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II < div class="clear"> 
  [Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
   二、三级dropdown弹出菜单
  < html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>三级dropdown弹出菜单< style type="text/css">/* 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;} < body>< div class="menu">< ul>< li> DEMOS < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> HOVER/CLICK > < ul> < li> styled form < li> active focus < li> hover/click < li> shadow boxing < li> image map < li> fun backgrounds < li> fade scrolling < li> em sized images < li> MENUS < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> LAYOUTS < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> BOXES < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> MOZILLA < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> two tone headings < li> shadow text < li> EXPLORER < ul> < li> example one < li> weft fonts < li> vertical align < li> OPACITY < ul> < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II < li> < HOVER/CLICK < ul class="left"> < li> styled form < li> active focus < li> hover/click
  [Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
   三、flyout-竖向三级弹出菜单
  < html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>flyout-竖向三级弹出菜单< style type="text/css">/* 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;} < body>< div class="menu"> < ul> < li> DEMOS < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> HOVER/CLICK > < ul> < li> styled form < li> active focus < li> hover/click < li> shadow boxing < li> image map < li> fun backgrounds < li> fade scrolling < li> em sized images < li> MENUS < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> LAYOUTS < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> BOXES < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> MOZILLA < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> two tone headings < li> shadow text < li> EXPLORER < ul> < li> example one < li> weft fonts < li> vertical align < li> OPACITY < ul> < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II
  [Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
   四、dropline-水平三级横向弹出菜单
  < html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>dropline-水平三级横向弹出菜单< style type="text/css">/* 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;} < body>< div class="menu">< ul>< li> DEMOS < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> HOVER/CLICK < ul class="right_side"> < li> styled form < li> active focus < li> hover/click < li> shadow boxing < li> image map < li> MENUS < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> LAYOUTS < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> BOXES < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> MOZILLA < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> EXPLORER < ul class="right_side"> < li> example one < li> weft fonts < li> vertical align < li> OPACITY < ul class="right_side"> < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II < li> HOVER/CLICK < ul class="left_side"> < li> styled form < li> active focus < li> hover/click
  [Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
   五、upmenu-水平竖弹向上三级弹出菜单
  < html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />< title>upmenu-水平竖弹向上三级弹出菜单< style type="text/css">/* 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;} < body>< p> 

< p> 

< p> 

< p> 

< p> 

< p> 

< p> 

< p> 

< p> 

< div class="menu">< ul>< li> DEMOS < ul> < li> zero dollars < li> wrapping text < li> styled form < li> active focus < li> HOVER/CLICK > < ul> < li> styled form < li> active focus < li> hover/click < li> shadow boxing < li> image map < li> fun backgrounds < li> fade scrolling < li> em sized images < li> MENUS < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> LAYOUTS < ul> < li> Fixed 1 < li> Fixed 2 < li> Fixed 3 < li> Fixed 4 < li> minimum width < li> BOXES < ul> < li> spies menu < li> vertical menu < li> enlarging list < li> link images < li> non-rectangular < li> jigsaw links < li> circular links < li> MOZILLA < ul> < li> drop down menu < li> cascading menu < li> content: < li> mozzie box < li> rainbow box < li> snooker cue < li> target practise < li> two tone headings < li> shadow text < li> EXPLORER < ul> < li> example one < li> weft fonts < li> vertical align < li> OPACITY < ul class="left"> < li> < HOVER/CLICK < ul class="left"> < li> styled form < li> active focus < li> hover/click < li> opaque colours < li> opaque menu < li> partial opacity < li> partial opacity II
  [Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]
  如果你很厌烦来研究、修改代码,那么这里有款软件制作基于DIV+CSS的各类菜单效果(能整合到DREAMWEAVER中将是件多么让人高兴的事)。
  
  软件下载: http://dl.filekicker.com/send/file/175939-ALVX/css_tab.zip
  该软件介绍: http://www.highdots.com/css-tab-designer/
  下载地址页面: http://www.highdots.com/download.html
  tag: css,div,web标准

本文转自
http://www.cnbruce.com/BLOG/showlog.asp?log_id=1086
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值