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 相关文章推荐
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
js实现弹幕墙效果
Dec 10 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
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
You might like
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python中random模块用法实例分析
2015/05/19 Python
发布你的Python模块详解
2016/09/15 Python
20招让你的Python飞起来!
2016/09/27 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python多线程和多进程关系详解
2020/12/14 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
数据库什么时候应该被重组
2012/11/02 面试题
小区文明倡议书
2014/05/16 职场文书
星级党支部申报材料
2014/05/31 职场文书
质量月活动总结
2014/08/26 职场文书
中班上学期个人总结
2015/02/12 职场文书
民事二审代理词
2015/05/25 职场文书