5个css+div导航菜单

　　发布时间：2011-04-29 12:38:00　

标签：导航,菜单

简单的导航菜单-02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯css导航</title><style type="text/css">.menu {font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left; position:relative;}.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;}.menu ul li ul {display: none;}.menu ul li:hover a {color:#fff; background:#b3ab79;}.menu ul li:hover ul {display:block; position:absolute; top:31px; left:0; width:105px;}.menu ul li:hover ul li a {display:block; background:#faeec7; color:#000;}.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}</style></head><body><div class="menu"><ul><li><a class="hide" href="../menu/index.html">DEMOS</a> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul></li><li><a class="hide" href="index.html">MENUS</a> <ul> <li><a href="http://www.aspxhome.com" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="http://www.aspxhome.com" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="http://www.aspxhome.com" title="circular links">circular links</a></li> </ul></li><li><a class="hide" href="../layouts/index.html">LAYOUTS</a> <ul> <li><a hrefhttp://www.aspxhome.com" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.aspxhome.com" title="A simple minimum width layout">minimum width</a></li> </ul></li><li><a class="hide" href="../boxes/index.html">BOXES</a> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="http://www.aspxhome.com" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul></li><li><a class="hide" href="../mozilla/index.html">MOZILLA</a> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul></li><li><a class="hide" href="../ie/index.html">EXPLORER</a> <ul> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul></li><li><a class="hide" href="../opacity/index.html">OPACITY</a> <ul> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul></li></ul><div class="clear"> </div></div></body></html>

简单的导航菜单-03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>这是一个导航</title><style type="text/css">#nav{list-style:none;margin:0;padding:5px 0 0 0;background:#F0F0F0;}#nav li{float:left;display:inline;margin-right:2px;}#nav a{float:left;width:81px;height:28px;text-align:center;background:url(111.gif) no-repeat 0 -4px #F3da2A;font:12px/24px '宋体';color:#FFF;text-decoration:none;}#nav a:hover{line-height:28px;background-position:0;}</style></head><body><ul id="nav"><li><a href="http://www.cidianwang.com">蓝色理想</a></li><li><a href="http://www.cidianwang.com">蓝色理想</a></li><li><a href="http://www.cidianwang.com">蓝色理想</a></li><li><a href="http://www.cidianwang.com">蓝色理想</a></li><li><a href="http://www.cidianwang.com">蓝色理想</a></li><li><a href="http://www.cidianwang.com">蓝色理想</a></li><li><a href="http://www.cidianwang.com">蓝色理想</a></li><li><a href="http://www.cidianwang.com">蓝色理想</a></li></ul></body></html>

简单的导航菜单-04

<html><title>经典的蓝色CSS下拉菜单</title><style>*{margin:0;padding:0;border:0;}#div_center { width:790px; height:23px; background:#003399; margin:10px} #nav { line-height: 20px; list-style-type: none; margin-top:5px;} #nav a { display: block; width: 77px; text-align:center; font-size:12px;} #nav a:link { color:#FFF; text-decoration:none;margin:0;} #nav a:visited {color:#FFF;text-decoration:none;margin:0;}#nav a:hover {color:#C00;text-decoration:none;}#nav li {float: left;}#nav li a:hover{background:#FFFFFF;} #nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;} #nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;} #nav li ul a:link {color:#0d5097; text-decoration:none;} #nav li ul a:visited {color:#0d5097;text-decoration:none;} #nav li ul a:hover {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#content {clear: left;}</style><body><script type=text/javascript>function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } }}window.onload=menuFix;</script><div id=div_center><UL id=nav><LI style="MARGIN-LEFT: 10px"><A href="#">主站索引</A></LI><LI><A href="http://www.cidianwang.com">新闻中心</A> <UL><LI><A href="#">·新闻中心1</A></LI><LI><A href="#">·新闻中心3</A></LI></UL></LI><LI><A href="#">企业简介</A> <UL><LI><A href="http://www.cidianwang.com">·企业简介</A></LI><LI><A href="#">·产品中心</A></LI><LI><A href="#">·服务专区</A></LI></UL></LI><LI><A href="#">文章中心</A> <UL><LI><A href="#">·文章中心</A></LI><LI><A href="#">·文章中心</A></LI></UL></LI><LI><A href="http://www.cidianwang.com">国际新闻</A> <UL><LI><A href="#">国际新闻</A></LI><LI><A href="#">国内新闻</A></LI><LI><A href="#">科技新闻</A></LI></UL></LI><LI><A href="http://www.cidianwang.com">图片新闻</A> <UL><LI><A href="#">·图片中心</A></LI><LI><A href="#">·图片中心</A></LI></UL></LI><LI><A href="http://www.cidianwang.com">下载中心</A> <UL><LI><A href="#">·常用软件</A></LI><LI><A href="#">·文档下载</A></LI><LI><A href="http://www.cidianwang.com">社区论坛</A></LI></UL></div></body></html>

jquery两个导航05

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>两个导航菜单</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">$(function(){$("#test1 a").mouseover(function(){var index = $("#test1 a").index(this);var width = $("#test1 a").width();$("#test1 .showhover").stop().animate({left:width*index},1000);})$("#test2 a").mouseover(function(){var index = $("#test2 a").index(this);var width = $("#test2 a").width();$("#test2 .showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);})})</script> <style type="text/css">.body {margin:10px;}img {border:0;}a {text-decoration:none;}ul{list-style:none; margin:0; padding:0;}.menu {background:#003399; height:25px; width:600px; position:relative; overflow:hidden;}.menu .showmenu, .menu .showhover{ position:absolute;}.menu .showmenu a {float:left; display:block;}.menu .showmenu a {font:700 12px/25px Microsoft YaHei; color:#fff; width:100px; height:25px; text-align:center;}.menu .showhover {background:#990033; width:100px; height:25px;}</style></head><body><div class="menu" id="test1"><div class="showhover"></div><div class="showmenu"><a href="http://www.cidianwang.com">网站首页</a><a href="#">关于我们</a><a href="#">新闻中心</a><a href="http://www.cidianwang.com">产品中心</a><a href="#">解决方案</a><a href="#">联系我们</a></div></div><div style="clear:both;height:50px;"></div><div class="menu" id="test2"><div class="showhover"></div><div class="showmenu"><a href="http://www.cidianwang.com">网站首页</a><a href="http://www.cidianwang.com">关于我们</a><a href="#">新闻中心</a><a href="#">产品中心</a><a href="#">解决方案</a><a href="http://www.cidianwang.com">联系我们</a></div></div></body></html>

投稿

5个css+div导航菜单

猜你喜欢