兩級導航菜單在網頁中非常實用，實現的方法也有很多，本文為大家介紹下使用jquery是如何實現的
主要用於運維系統， 對界面要求不高的場合。 深深感到自己頁面設計能力弱爆了，只能借鑒一下了， 交互邏輯還可以勝任一點。 直接貼代碼: 1. HTML 頁面及 JS 交互， 注意引入 Jquery 文件 代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>兩級導航菜單的示例</title> <script src="jquery-1.10.1.min.js"></script> <!-- moonmm css --> <link rel="stylesheet" type="text/css" href="two-nav.css" /> <script type="text/javascript"> var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] function showtime() { var date = new Date(); var yy = date.getYear(); if (yy < 1900) { yy = yy + 1900; } var MM = date.getMonth()+1; if(MM<10) MM = '0' + MM; var dd = date.getDate(); if(dd<10) dd = '0' + dd; var hh = date.getHours(); if(hh<10) hh = '0' + hh; var mm = date.getMinutes(); if(mm<10) mm = '0' + mm; var ss = date.getSeconds(); if(ss<10) ss = '0' + ss; var ww = weeks[date.getDay()]; $('#currTime span').html('[ ' + yy + '-' + MM + '-' + dd + ' ' + hh + ':' + mm + ':' + ss + ' ' + ww + ' ]'); window.setTimeout("showtime()", 1000); } var setContentSize = function(height, width) { $('header').css('width', width); $('#topnav').css('width', width); $('#nav').css('width', width); $('#content').css('height', height + 'px'); $('#content').css('width', width); $('#maincontent').css('height', height + 'px' ); $('#maincontent').css('width', width); } $(document).ready( function() { var docHeight = $(document).outerHeight(); var docWidth = $(document).width(); var headerHeight = $('#header').height(); var contentHeight = docHeight-headerHeight; $('#topnav a').click( function() { $('.select').removeClass('select'); $(this).addClass('select'); console.log($(this).css('background-color')); $('#nav').css('background-color', $(this).css('background-color')); $('#nav').css('width', $('#topnav').width()); switch(this.id) { case 'topmenu_home': $('.nav_list').hide(); $('#homebo').show(); $('#homebo a').first().click(); break; case 'topmenu_itlearn': $('.nav_list').hide(); $('#itlearnbo').show(); $('#itlearnbo a').first().click(); break; case 'topmenu_baike': $('.nav_list').hide(); $('#baikebo').show(); $('#baikebo a').first().click(); break; case 'topmenu_scisrc': $('.nav_list').hide(); $('#scisrcbo').show(); $('#scisrcbo a').first().click(); break; case 'topmenu_more': $('.nav_list').hide(); $('#morebo').show(); $('#morebo a').first().click(); break; default : break; } } ); $('#nav a').click( function() { setContentSize(contentHeight, docWidth-15); $('#nav .select').removeClass('select'); $(this).addClass('select'); switch(this.id) { case 'myblogModule': $('#maincontent').attr('src', 'http://blog.csdn.net/lovesqcc'); break; case 'ifeveModule': setContentSize(contentHeight+80, docWidth-15); $('#maincontent').attr('src', 'http://ifeve.com/'); break; case 'csdnModule': $('#maincontent').attr('src', 'http://csdn.net'); break; case 'infoqModule': $('#maincontent').attr('src', 'http://www.infoq.com/cn/'); break; case 'boleModule': $('#maincontent').attr('src', 'http://blog.jobbole.com/'); break; case 'itcommentModule': $('#maincontent').attr('src', 'http://www.vaikan.com/'); break; case 'wikiModule': $('#maincontent').attr('src', 'http://zh.wikipedia.org/zh-tw/Wikipedia'); break; case 'zhihuModule': $('#maincontent').attr('src', 'http://www.zhihu.com/'); break; case 'acmModule': $('#maincontent').attr('src', 'http://www.acm.org/'); break; case 'xiamiModule': $('#maincontent').attr('src', 'http://www.xiami.com'); break; case 'opencourseModule': $('#maincontent').attr('src', 'http://v.163.com/special/ted10collection/'); break; default: break; } } ); $('.nav_list').hide(); $('#topmenu_home').click(); showtime(); } ); </script> </head> <body> <div id="header"> <div id="firstHeader"> <div id="logo"> 兩級導航菜單 </div> <div id="target">兩級導航菜單的示例</div> <div id="toolbar"> <a href="#" id="userinfo">[ 你好: <span style="color:#f47920">admin</span> ]</a> <a href="#" id="currTime"><span></span></a> <a href="http://aone.alibaba-inc.com/aone2/req/addFromProductline/9139" target="_blank"><span style="color:#f47920">[ 提建議 ]</span></a> </div> </div> <div class="clear"></div> <div id="topnav"> <div class="topnav_list"> <a href="#" class="select" id="topmenu_home"><span>首頁</span></a> <a href="#" id="topmenu_itlearn"><span>IT學習</span></a> <a href="#" id="topmenu_baike"><span>百科</span></a> <a href="#" id="topmenu_scisrc"><span>學術資源</span></a> <a href="#" id="topmenu_more"><span>更多</span></a> </div> </div> <div class="clear"></div> <div id="nav"> <div class="nav_list" id="homebo"> <a href="#" class="select" id="myblogModule"><span>我的博客</span></a> </div> <div class="nav_list" id="itlearnbo"> <a href="#" class="select" id="ifeveModule"><span>並發編程網</span></a> <a href="#" id="csdnModule"><span>CSDN</span></a> <a href="#" id="infoqModule"><span>Infoq</span></a> <a href="#" id="boleModule"><span>伯樂在線</span></a> <a href="#" id="itcommentModule"><span>外刊評論</span></a> </div> <div class="nav_list" id="baikebo"> <a href="#" class="select" id="wikiModule"><span>WIKI百科</span></a> <a href="#" id="zhihuModule"><span>知乎</span></a> </div> <div class="nav_list" id="scisrcbo"> <a href="#" class="select" id="acmModule"><span>ACM</span></a> </div> <div class="nav_list" id="morebo"> <a href="#" class="select" id="xiamiModule"><span>蝦米音樂</span></a> <a href="#" id="opencourseModule"><span>網易公開課</span></a> </div> </div> </div> <div id="content"> <iframe id="maincontent" frameborder="0" width="100%"></iframe> </div> </body> </html> 2. CSS 文件 [css] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片 div:not(#topnav, #logo){font-size:10pt!important} *{font-family: 微軟雅黑, 宋體, san-serif!important} /* * Header CSS */ a{color:#2F649A;} a:link{text-decoration:none;} a:visited{text-decoration:none;} a:hover{text-decoration:underline;} a:active{text-decoration:none;} body { background-color: #dae7f6; margin: -0px -0px; } #firstHeader { height: 56px; } #logo { float: left; font-size: 28pt; margin: 10px 0px 10px 20px; font-family: 隸書, 微軟雅黑, 宋體, san-serif!important; } #target { float: left; font-size: 10.5pt; font-style: italic; font-weight: 1.5em; margin: 25px 30px 0px 5px; } #toolbar { float: right; margin: 0px 3px; } #toolbar a { font-size: 10pt; } #content { background-color: #45b97c; } /* the top menu */ #topnav { float: left; background-color: #426ab3; width: 100%; } #topnav .topnav_list { float:left; width: 100%; height:29px; color:#333; margin: 0px 0px -1px 0px; font-size: 11pt!important; font-weight:bold; border-radius: 5px; } #topnav .topnav_list a { display:inline-block; height:24px; padding: 2px 0 2px 18px; color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer; border-radius: 5px; border-right: 2px outset #00BFFF; } #topnav .topnav_list a span { display:inline-block; height:22px; padding:0 20px 0 0; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #topnav .topnav_list a:hover, #topnav .topnav_list a.select { position:relative; z-index:9; background-color: #45b97c; color:#fff; text-decoration:none; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #topnav .topnav_list a:hover span, #topnav .topnav_list a.select span { background-color: #45b97c; color:#fff; border-radius: 5px; } .clear { clear: both; } /* the first menu */ #nav { font-size: 10pt; } #nav .nav_list { float:left; padding: 3px 0 3px 0; font-weight:bold;height:25px; } #nav .nav_list a { display:inline-block; padding: 2px 15px 2px 15px; color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer; border-radius: 8px; border-radius: 8px; } #nav .nav_list a span { display:inline-block; border-radius: 8px; border-radius: 8px; } #nav .nav_list a:hover, #nav .nav_list a.select { position:relative; z-index:9; text-decoration:none; border-radius: 8px; border-radius: 8px; } #nav .nav_list a:hover, #nav .nav_list a:hover span { background-color: #007d65; color: #fff; } #nav .nav_list a.select, #nav .nav_list a.select span { background-color: #fff; color: #ca0000; }