首页
所有分类
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 相关文章推荐
js传值 判断
Oct 26 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 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
zip(1) 数据类型(8) IOC(3) Geospatial(1) metaclass(1) 触发器(3) 自动化(1) Bean(3) XML(1) enumerate(1)
You might like
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
Python如何获取系统iops示例代码
2016/09/06 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
网易有道2017内推编程题 洗牌（python）
2019/06/19 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
香港莎莎官网Sasa.com：亚洲著名国际化妆品商城
2019/11/10 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
重点工程汇报材料
2014/08/27 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
实习单位证明范例
2014/11/17 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
pycharm debug 断点调试心得分享
2021/04/16 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python