首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 实现两级导航菜单附效果图

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

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

Javascript 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
JS获取本周周一，周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
利用Angular+Angular-Ui实现分页（代码加简单）
Mar 10 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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
有序排列(1) 遍历文件夹(1) pycryto(1) key(1) 数据加密(1) Anaconda(2) shell脚本(1) 历史记录(1) python-pcl(1) 公共键(1)
You might like
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
深入理解JavaScript系列（16） 闭包（Closures）
2012/04/12 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python挖矿算力测试程序详解
2019/07/03 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
python实现ping命令小程序
2020/12/28 Python
Brookstone美国官网：独特新奇产品
2017/03/04 全球购物
奥地利网上现代灯具和灯饰店：Lampenwelt.at
2018/01/29 全球购物
捷克鲜花配送：Florea.cz
2018/10/29 全球购物
Python 制作自动化翻译工具
2021/04/25 Python
Python中字符串对象语法分享
2022/02/24 Python
MYSQL如何查看操作日志详解
2022/05/30 MySQL