jquery 实现两级导航菜单
主要用于运维系统， 对界面要求不高的场合。 深深感到自己页面设计能力弱爆了，只能借鉴一下了， 交互逻辑还可以胜任一点。
直接贴代码:
1. HTML 页面及 JS 交互， 注意引入 Jquery 文件
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <title>两级导航菜单的示例</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 8 <!-- moonmm css --> 9 <link rel="stylesheet" type="text/css" href="two-nav.css" /> 10 <script type="text/javascript"> 11 12 var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] 13 function showtime() { 14 var date = new Date(); 15 var yy = date.getYear(); 16 if (yy < 1900) { 17 yy = yy + 1900; 18 } 19 var MM = date.getMonth()+1; 20 if(MM<10) MM = '0' + MM; 21 var dd = date.getDate(); 22 if(dd<10) dd = '0' + dd; 23 var hh = date.getHours(); 24 if(hh<10) hh = '0' + hh; 25 var mm = date.getMinutes(); 26 if(mm<10) mm = '0' + mm; 27 var ss = date.getSeconds(); 28 if(ss<10) ss = '0' + ss; 29 var ww = weeks[date.getDay()]; 30 $('#currTime span').html('[ ' + yy + '-' + MM + '-' + dd + ' ' + hh + ':' + mm + ':' + ss + ' ' + ww + ' ]'); 31 window.setTimeout("showtime()", 1000); 32 } 33 34 var setContentSize = function(height, width) { 35 $('header').css('width', width); 36 $('#topnav').css('width', width); 37 $('#nav').css('width', width); 38 $('#content').css('height', height + 'px'); 39 $('#content').css('width', width); 40 $('#maincontent').css('height', height + 'px' ); 41 $('#maincontent').css('width', width); 42 } 43 44 $(document).ready( 45 function() { 46 47 var docHeight = $(document).outerHeight(); 48 var docWidth = $(document).width(); 49 var headerHeight = $('#header').height(); 50 var contentHeight = docHeight-headerHeight; 51 52 $('#topnav a').click( 53 function() { 54 $('.select').removeClass('select'); 55 $(this).addClass('select'); 56 console.log($(this).css('background-color')); 57 $('#nav').css('background-color', $(this).css('background-color')); 58 $('#nav').css('width', $('#topnav').width()); 59 switch(this.id) { 60 case 'topmenu_home': 61 $('.nav_list').hide(); 62 $('#homebo').show(); 63 $('#homebo a').first().click(); 64 break; 65 case 'topmenu_itlearn': 66 $('.nav_list').hide(); 67 $('#itlearnbo').show(); 68 $('#itlearnbo a').first().click(); 69 break; 70 case 'topmenu_baike': 71 $('.nav_list').hide(); 72 $('#baikebo').show(); 73 $('#baikebo a').first().click(); 74 break; 75 case 'topmenu_scisrc': 76 $('.nav_list').hide(); 77 $('#scisrcbo').show(); 78 $('#scisrcbo a').first().click(); 79 break; 80 case 'topmenu_more': 81 $('.nav_list').hide(); 82 $('#morebo').show(); 83 $('#morebo a').first().click(); 84 break; 85 default : break; 86 } 87 88 } 89 ); 90 91 $('#nav a').click( 92 function() { 93 setContentSize(contentHeight, docWidth-15); 94 $('#nav .select').removeClass('select'); 95 $(this).addClass('select'); 96 switch(this.id) { 97 case 'myblogModule': 98 $('#maincontent').attr('src', 'http://blog.csdn.net/lovesqcc'); 99 break; 100 case 'ifeveModule': 101 setContentSize(contentHeight+80, docWidth-15); 102 $('#maincontent').attr('src', 'http://ifeve.com/'); 103 break; 104 case 'csdnModule': 105 $('#maincontent').attr('src', 'http://csdn.net'); 106 break; 107 case 'infoqModule': 108 $('#maincontent').attr('src', 'http://www.infoq.com/cn/'); 109 break; 110 case 'boleModule': 111 $('#maincontent').attr('src', 'http://blog.jobbole.com/'); 112 break; 113 case 'itcommentModule': 114 $('#maincontent').attr('src', 'http://www.vaikan.com/'); 115 break; 116 case 'wikiModule': 117 $('#maincontent').attr('src', 'http://zh.wikipedia.org/zh-tw/Wikipedia'); 118 break; 119 case 'zhihuModule': 120 $('#maincontent').attr('src', 'http://www.zhihu.com/'); 121 break; 122 case 'acmModule': 123 $('#maincontent').attr('src', 'http://www.acm.org/'); 124 break; 125 case 'xiamiModule': 126 $('#maincontent').attr('src', 'http://www.xiami.com'); 127 break; 128 case 'opencourseModule': 129 $('#maincontent').attr('src', 'http://v.163.com/special/ted10collection/'); 130 break; 131 default: 132 break; 133 } 134 135 } 136 ); 137 $('.nav_list').hide(); 138 $('#topmenu_home').click(); 139 showtime(); 140 } 141 ); 142 </script> 143 </head> 144 <body> 145 <div id="header"> 146 <div id="firstHeader"> 147 <div id="logo"> 两级导航菜单 </div> 148 <div id="target">两级导航菜单的示例</div> 149 <div id="toolbar"> 150 <a href="#" id="userinfo">[ 你好: <span style="color:#f47920">admin</span> ]</a> 151 <a href="#" id="currTime"><span></span></a> 152 <a href="http://aone.alibaba-inc.com/aone2/req/addFromProductline/9139" target="_blank"><span style="color:#f47920">[ 提建议 ]</span></a> 153 </div> 154 </div> 155 <div class="clear"></div> 156 <div id="topnav"> 157 <div class="topnav_list"> 158 <a href="#" class="select" id="topmenu_home"><span>首页</span></a> 159 <a href="#" id="topmenu_itlearn"><span>IT学习</span></a> 160 <a href="#" id="topmenu_baike"><span>百科</span></a> 161 <a href="#" id="topmenu_scisrc"><span>学术资源</span></a> 162 <a href="#" id="topmenu_more"><span>更多</span></a> 163 </div> 164 </div> 165 <div class="clear"></div> 166 167 <div id="nav"> 168 169 <div class="nav_list" id="homebo"> 170 <a href="#" class="select" id="myblogModule"><span>我的博客</span></a> 171 </div> 172 173 <div class="nav_list" id="itlearnbo"> 174 <a href="#" class="select" id="ifeveModule"><span>并发编程网</span></a> 175 <a href="#" id="csdnModule"><span>CSDN</span></a> 176 <a href="#" id="infoqModule"><span>Infoq</span></a> 177 <a href="#" id="boleModule"><span>伯乐在线</span></a> 178 <a href="#" id="itcommentModule"><span>外刊评论</span></a> 179 </div> 180 181 <div class="nav_list" id="baikebo"> 182 <a href="#" class="select" id="wikiModule"><span>WIKI百科</span></a> 183 <a href="#" id="zhihuModule"><span>知乎</span></a> 184 </div> 185 186 <div class="nav_list" id="scisrcbo"> 187 <a href="#" class="select" id="acmModule"><span>ACM</span></a> 188 </div> 189 190 <div class="nav_list" id="morebo"> 191 <a href="#" class="select" id="xiamiModule"><span>虾米音乐</span></a> 192 <a href="#" id="opencourseModule"><span>网易公开课</span></a> 193 </div> 194 195 </div> 196 </div> 197 <div id="content"> 198 <iframe id="maincontent" frameborder="0" width="100%"></iframe> 199 </div> 200 201 </body> 202 </html>
2. CSS 文件
1 div:not(#topnav, #logo){font-size:10pt!important} 2 *{font-family: 微软雅黑, 宋体, san-serif!important} 3 4 /* 5 * Header CSS 6 */ 7 8 a{color:#2F649A;} 9 a:link{text-decoration:none;} 10 a:visited{text-decoration:none;} 11 a:hover{text-decoration:underline;} 12 a:active{text-decoration:none;} 13 14 body { 15 background-color: #dae7f6; 16 margin: -0px -0px; 17 } 18 19 #firstHeader { 20 height: 56px; 21 } 22 23 #logo { 24 float: left; 25 font-size: 28pt; 26 margin: 10px 0px 10px 20px; 27 font-family: 隶书, 微软雅黑, 宋体, san-serif!important; 28 } 29 30 #target { 31 float: left; 32 font-size: 10.5pt; 33 font-style: italic; 34 font-weight: 1.5em; 35 margin: 25px 30px 0px 5px; 36 } 37 38 #toolbar { 39 float: right; 40 margin: 0px 3px; 41 } 42 43 #toolbar a { 44 font-size: 10pt; 45 } 46 47 #content { 48 background-color: #45b97c; 49 } 50 51 /* the top menu */ 52 #topnav { 53 float: left; 54 background-color: #426ab3; 55 width: 100%; 56 } 57 58 #topnav .topnav_list { 59 float:left; width: 100%; height:29px; color:#333; margin: 0px 0px -1px 0px; 60 font-size: 11pt!important; font-weight:bold; 61 border-radius: 5px; 62 } 63 64 #topnav .topnav_list a { 65 display:inline-block; height:24px; padding: 2px 0 2px 18px; 66 color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer; 67 border-radius: 5px; border-right: 2px outset #00BFFF; 68 } 69 70 #topnav .topnav_list a span { 71 display:inline-block; height:22px; padding:0 20px 0 0; 72 border-top-left-radius: 8px; 73 border-top-right-radius: 8px; 74 border-bottom-left-radius: 0px; 75 border-bottom-right-radius: 0px; 76 } 77 78 #topnav .topnav_list a:hover, #topnav .topnav_list a.select { 79 position:relative; z-index:9; 80 background-color: #45b97c; 81 color:#fff; text-decoration:none; 82 border-top-left-radius: 8px; 83 border-top-right-radius: 8px; 84 border-bottom-left-radius: 0px; 85 border-bottom-right-radius: 0px; 86 } 87 88 #topnav .topnav_list a:hover span, #topnav .topnav_list a.select span { 89 background-color: #45b97c; 90 color:#fff; 91 border-radius: 5px; 92 } 93 94 .clear { 95 clear: both; 96 } 97 98 /* the first menu */ 99 #nav { 100 font-size: 10pt; 101 } 102 103 #nav .nav_list { 104 float:left; padding: 3px 0 3px 0; font-weight:bold;height:25px; 105 } 106 107 #nav .nav_list a { 108 display:inline-block; 109 padding: 2px 15px 2px 15px; 110 color:#fff; vertical-align:middle; line-height:22px; *line-height:24px; cursor:pointer; 111 border-radius: 8px; 112 border-radius: 8px; 113 } 114 115 #nav .nav_list a span { 116 display:inline-block; 117 border-radius: 8px; 118 border-radius: 8px; 119 } 120 121 #nav .nav_list a:hover, #nav .nav_list a.select { 122 position:relative; z-index:9; 123 text-decoration:none; 124 border-radius: 8px; 125 border-radius: 8px; 126 } 127 128 #nav .nav_list a:hover, #nav .nav_list a:hover span { 129 background-color: #007d65; 130 color: #fff; 131 } 132 133 #nav .nav_list a.select, #nav .nav_list a.select span { 134 background-color: #fff; 135 color: #ca0000; 136 }
3. 效果图
