導讀跟大家講解下有關二個簡單的菜單導航條示例代碼，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說二個簡單的菜單導航條示例代
跟大家講解下有關二個簡單的菜單導航條示例代碼，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說二個簡單的菜單導航條示例代碼，小編也收集到了有關二個簡單的菜單導航條示例代碼的相關資料，希望大家看到了會喜歡。
這篇文章主要介紹了二個簡單的菜單導航條示例,需要的朋友可以參考下菜單欄示例一：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.php.cn/;/a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.php.cn/;/a>"><head> <script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script">http://www.php.cn/"></script><script</a> type="text/javascript"> $(function() { $("#container .menu1 ul li").click(function() { var index = $("#container .menu1 ul li").index(this); $(this).addClass("bg").siblings().removeClass(); $("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide(); }) }) </script><style type="text/css">body{margin: 0;padding: 0;font-family: "宋體";font-size: 9pt;color: #FFFFFF;font-weight: bold;}#container{width: 100%; height: auto;margin: 0 auto;padding: 0px;font-family: "宋體";font-size: 9pt;color: #FFFFFF;font-weight: bold;}#container .menu1{width: 684px;height: 34px;border: none;background: url(/images/cnblogs_com/xugang/sadasd_09.png) no-repeat;}#container .menu1 ul{margin: 0;padding-left: 0px;padding-right: 0px;padding-bottom: 0px;padding-top: 4px;position: relative;margin-left: 4px; }#container .menu1 ul li{ float: left;height: 25px;width: 110px;line-height: 25px;list-style: none;text-align: center;cursor: pointer;padding-left: 2px; }#container .menu2{width: 100%; height: 25px;border: none;color: #000000;font-weight: normal;background-color: #C9DEFA; padding-left: 0px; padding-top: 0px; margin-left: 0px; }#container .menu2 ul{margin: 0; padding: 0;}#container .menu2 ul li{height: 30px;line-height: 30px;list-style: none;float: left;cursor: pointer;}#container .menu2 ul li ul li{ float: left;padding-top: 0px;padding-bottom: 0px;padding-left: 40px;padding-right: 30px; height: 25px;line-height: 25px;list-style: none;}.bg{font-size: 12pt;background-color: #1B5582; }.hide{display: none;}.menu_a1{ display: block; color:#ffffff; text-decoration:none !important; }.menu_a2{ display: block; color:#000000; text-decoration:none !important; }</style></head><body><p id="container"><p class="menu1"><ul><li class="bg"><a href="#" class="menu_a1">第一欄</a></li><li><a href="#" class="menu_a1">第二欄</a></li><li><a href="#" class="menu_a1">第三欄</a></li><li><a href="#" class="menu_a1">第四欄</a></li><li><a href="#" class="menu_a1">第五欄</a></li><li><a href="#" class="menu_a1">第六欄</a></li></ul></p><p class="menu2"><ul><li><ul><li><a href="#" class="menu_a2">第一欄</a></li><li><a href="#" class="menu_a2">第一欄</a></li><li><a href="#" class="menu_a2">第一欄</a></li></ul></li><li><ul class="hide"><li>第二欄</li><li>第二欄</li><li>第二欄</li></ul></li><li><ul class="hide"><li>第三欄</li><li>第三欄</li><li>第三欄</li></ul></li><li><ul class="hide"><li>第四欄</li><li>第四欄</li><li>第四欄</li></ul></li><li><ul class="hide"><li>第五欄</li><li>第五欄</li><li>第五欄</li></ul></li><li><ul class="hide"><li>第六欄</li><li>第六欄</li><li>第六欄</li></ul></li></ul></p></p><p style="width:400px; height:300px; background-color:red;"></p></body></html>菜單欄示例二：
代碼如下:
<html><head><title>黃頁地區列表</title><style type="text/css">body {background:#ccc;color:#000;font: normal normal normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, "宋體";text-align:center;}.nav {position: relative;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -36px;width:960px;height:36px;}.navinner {background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 100% -72px;}.navlist {height: 36px;line-height: 36px;overflow: hidden;margin: 0 10px;background: url(/images/cnblogs_com/xugang/nav_bg.png) repeat-x 0 0;}.nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -108px;}.nav a {display: block;width: 102px;text-align: center;font-size: 120%; text-decoration:none;}.nav a:link, .nav a:visited {color: #fff;text-decoration:none;}.nav a:hover, .nav a:active {color: #fff;font-weight: bold;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;}</style></head><body><p class="nav"><p class="navinner"><ul class="navlist"><li><a href="<a href="http://www.jb51.net/">http://www.php.cn/;/a>" title="首頁">首頁</a></li><li><a href="<a href="http://www.jb51.net/cat.html">http://www.php.cn/;/a>" title="分類列表" rel="nofollow">分類列表</a></li><li><a href="<a href="http://www.jb51.net/loc.html">http://www.php.cn/;/a>" title="地區列表" rel="nofollow">地區列表</a></li><li><a href="<a href="http://www.jb51.net/trade.html">http://www.php.cn/;/a>" title="供求商機" rel="nofollow">供求商機</a></li><li><a href="<a href="http://www.jb51.net/news.html">http://www.php.cn/;/a>" title="行業新聞" rel="nofollow">行業新聞</a></li><li><a href="<a href="http://www.jb51.net/submit.html">http://www.php.cn/;/a>" title="提交企業" rel="nofollow">提交企業</a></li><li><a href="<a href="http://www.jb51.net/join.html">http://www.php.cn/;/a>" title="發布商機" rel="nofollow">發布商機</a></li><li><a href="<a href="http://www.jb51.net/find.html">http://www.php.cn/;/a>" title="高級搜索" rel="nofollow">高級搜索</a></li></ul></p></p></body></html>更多二個簡單的菜單導航條示例代碼相關文章請關注PHP中文網！
來源：php中文網
免責聲明：本文由用戶上傳，如有侵權請聯系刪除！