编程 Javascript

jquery 实现两级导航菜单附效果图

Posted in Javascript onMarch 07, 2014

主要用于运维系统，对界面要求不高的场合。深深感到自己页面设计能力弱爆了，只能借鉴一下了，交互逻辑还可以胜任一点。

直接贴代码:

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; 
}

3. 效果图

jquery 实现两级导航菜单附效果图

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

总结AJAX相关JS代码片段和浏览器模型

Aug 15 Javascript

js实现iframe动态调整高度的代码

Jan 06 Javascript

Javascript中Eval函数的使用说明

Oct 11 Javascript

javaScript 删除字符串空格多种方法小结

Oct 24 Javascript

js网页实时倒计时精确到秒级

Feb 10 Javascript

ext combobox动态加载数据库数据(附前后台)

Jun 17 Javascript

JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

Oct 11 Javascript

zTree树形插件异步加载方法详解

Jun 14 Javascript

微信小程序后台解密用户数据实例详解

Jun 28 Javascript

解决angular2在双向数据绑定时[(ngModel)]无法使用的问题

Sep 13 Javascript

如何自定义微信小程序tabbar上边框的颜色

Jul 09 Javascript

jquery检测上传文件大小示例

Apr 26 jQuery

document.addEventListener使用介绍

Mar 07 #Javascript

开发中可能会用到的jQuery小技巧

Mar 07 #Javascript

javascript匿名函数应用示例介绍

Mar 07 #Javascript

js登录弹出层特效

Mar 07 #Javascript

JavaScript通过正则表达式实现表单验证电话号码

Mar 07 #Javascript

js定时器(执行一次、重复执行)

Mar 07 #Javascript

JS中判断JSON数据是否存在某字段的方法

Mar 07 #Javascript