一个很不错的菜单导航栏

<!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>Tool Bag</title>

<style type=”text/css”>
/* common styling */
body { background-color:#fff}/**#36648B**/
.container {margin: 0 auto; width:1024px;}
.menu {font-family: arial, sans-serif; width:1130px;
position:relative; margin:0; font-size:12px; font-weight:bold;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;
width:110px; height:24px; text-align:center; color:#fff;
border:1px solid #36648B; background:#333333;
line-height:24px; font-size:12px; 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:25px; left:0; width:91px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#B3EE3A; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#9E9E9E; color:#000;}
.menu ul li:hover ul li a:hover {background:#B3EE3A; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:111px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-111px;}
</style>

<script type=”text/javascript”>
function changeUrl(vPageName){
var vIfr=document.getElementById(“ifrObj”);
vIfr.src=vPageName;
}
</script>

</head>
<body>
<div class=”container”>
<!–h1 style=”text-align:center; font-weight:bold; color:brown”>Tool Bag</h1–>
<div class=”menu” style=”text-align:center”>
<ul class=”toolbar”>
<li><a class=”hide” href=”#”>服务器与账号</a>
<ul>
<li><a href=”javascript:changeUrl(‘account/account.html’)”>服务器账号</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>其他账号</a></li>
</ul>
</li>
<li><a href=”javascript:changeUrl(‘source/w3school/h.asp.htm’)”>HTML + CSS</a></li>
<li><a href=”javascript:changeUrl(‘source/w3school/b.asp.htm’)”>JQUERY</a>
<ul>
<li><a href=”javascript:changeUrl(‘jquery/index.html’)”>基础入门</a></li>
<li><a href=”javascript:changeUrl(‘source/w3school/jquery_reference.asp.htm’)”>参考手册</a>
</li>
</ul>
</li>
<li><a class=”hide” href=”javascript:changeUrl(‘source/w3school/s.asp.htm’)”>PHP + MYSQL</a>
<ul>
<li><a href=”javascript:changeUrl(‘source/w3school/php_mysql_intro.asp.htm’)”>MYSQL</a></li>
<li><a href=”javascript:changeUrl(‘source/w3school/php_ref_array.asp.htm’)”>PHP手册</a></li>
</ul>
</li>

<li><a class=”hide” href=”javascript:changeUrl(‘linux/index.html’)”>LINUX</a>
<ul>
<li><a href=”javascript:changeUrl(‘linux/system-user.html’)”>系统和用户</a></li>
<li><a href=”javascript:changeUrl(‘linux/net-server.html’)”>网络和服务器</a></li>
<li><a href=”javascript:changeUrl(‘linux/file-folder.html’)”>文件和文件夹</a></li>
<li><a href=”javascript:changeUrl(‘linux/common1.html’)”>常用命令一</a></li>
<li><a href=”javascript:changeUrl(‘linux/common2.html’)”>常用命令二</a></li>
<li><a href=”javascript:changeUrl(‘linux/common3.html’)”>常用命令三</a></li>
</ul>
</li>

<li><a class=”hide” href=”#”>工作笔记</a>
<ul>
<li><a class=”hide” href=”#”>PHP+MYSQL</a>
<ul>
<li><a href=”javascript:changeUrl(‘note/phpmysql/2013-11-04.html’)”>2013-11-04</a></li>
<li><a href=”javascript:changeUrl(‘note/phpmysql/2014-02-28.html’)”>2014-02-28</a></li>
</ul>
</li>
<li><a class=”hide” href=”#”>HTML+CSS</a>
<ul>
<li><a href=”javascript:changeUrl(‘note/htmlcss/2013-11-17/2013-11-17.html’)”>2013-11-17</a></li>
<li><a href=”javascript:changeUrl(‘note/htmlcss/2013-11-20.html’)”>2013-11-20</a></li>
<li><a href=”javascript:changeUrl(‘note/htmlcss/2013-12-13.html’)”>2013-12-13</a></li>
<li><a href=”javascript:changeUrl(‘note/htmlcss/2013-12-19.html’)”>2013-12-19</a></li>
</ul>
</li>
<li><a href=”#” class=”hide”>JQUERY</a>
<ul>
<li><a href=”javascript:changeUrl(‘note/jquery/2013-11-14.html’)”>2013-11-14</a></li>
<li><a href=”javascript:changeUrl(‘note/jquery/2013-11-22.html’)”>2013-11-22</a></li>
<li><a href=”javascript:changeUrl(‘note/jquery/2013-12-10.html’)”>2013-12-10</a></li>
<li><a href=”javascript:changeUrl(‘note/jquery/2013-12-16.html’)”>2013-12-16</a></li>
</ul>
</li>
<li><a class=”hide” href=”#”>LINUX</a>
<ul>
<li><a href=”javascript:changeUrl(‘note/linux/2013-11-04.html’)”>2013-11-04</a></li>
<li><a href=”javascript:changeUrl(‘note/linux/2013-11-05.html’)”>2013-11-05</a></li>
<li><a href=”javascript:changeUrl(‘note/linux/2013-2-26.html’)”>2013-02-26</a></li>

</ul>
</li>
<li><a class=”hide” href=”#”>ZEND+SMARTY</a>
<ul>
<li><a href=”javascript:changeUrl(‘note/zendsmarty/2013-12-16.html’)”>2013-12-16</a></li>
</ul>
</li>
<li><a class=”hide” href=”#”>PROJECT</a>
<ul>
<li><a href=”javascript:changeUrl(‘note/project/2013-11-28.html’)”>2013-11-28</a></li>
</ul>
</li>
<li><a class=”hide” href=”#”>OTHERS</a>
<ul>
<li><a href=”javascript:changeUrl(‘note/others/2013-11-22.html’)”>2013-11-22</a></li>
</ul>
</li>
</ul>
</li>

<li><a class=”hide” href=”javascript:changeUrl(‘account/other.html’)”>SOURCE</a>
<ul>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>PHP</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>HTML</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>CSS</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>JQUERY</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>LINUX</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>ZEND</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>MYSQL</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>HTML5</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>JOOMLA</a></li>
<li><a href=”javascript:changeUrl(‘account/other.html’)”>OTHERS</a></li>
<li><a href=”http://www.weiyun.com/” target=”_blank”>微云网盘</a></li>
</ul>
</li>

<li><a class=”hide” href=”#”>JOOMLA</a>
<ul>
<li><a href=”http://www.joomla.org” target=”_blank”>官方网站</a></li>
<li><a href=”http://docs.joomla.org/Portal:Developers” target=”_blank”>开发手册</a></li>
<li><a href=”http://extensions.joomla.org/extensions/” target=”_blank”>扩展下载</a></li>
<li><a class=”hide” href=”#”>模板下载</a>
<ul class=”left”>
<li><a href=”http://www.joomla24.com/remository.html” target=”_blank”>JOOMLA24</a></li>
<li><a href=”http://demo.gavick.com/” target=”_blank”>GAVICK</a></li>
</ul>
</li>
</ul>
</li>

<li><a class=”hide” href=”#”>ZEND + SMARTY</a>
<ul>
<li><a href=”http://framework.zend.com/” target=”_blank”>ZEND官网</a></li>
</ul>
</li>

<li><a class=”hide” href=”javascript:changeUrl(‘project/index.html’)”>PROJECT</a>
<ul>
<li><a href=”http://www.1pharma.com/” target=”_blank”>安徽医药贝克</a></li>
<li><a href=”http://en.daqo.com/” target=”_blank”>大全集团</a></li>
<li><a href=”http://www.storego.com/” target=”_blank”>STOREGO</a></li>
<li><a href=”http://www.emufoundation.org/” target=”_blank”>EMUF</a></li>
<li><a href=”http://campuslife.emich.edu/” target=”_blank”>EMUCL</a></li>
<li><a href=”http://www.vanguardworld.com/” target=”_blank”>VANGUARD</a></li>
<li><a href=”http://www.logicsolutions.com/” target=”_blank”>LOGIC SOLUTIONS</a></li>
<li><a href=”http://www.showcasecloud.com/” target=”_blank”>SHOWCASE APP</a></li>
<li><a href=”javascript:changeUrl(‘project/index.html’)”>SEOER</a></li>
<li><a href=”javascript:changeUrl(‘project/ebook/steps.html’)”>EBOOK</a></li>
</ul>
</li>

</ul>
<iframe id=”ifrObj” frameborder=”0″ scrolling=”auto” height=”16000px” width=”100%”></iframe>
</div>
</div>
</body>
</html>

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论