首页
所有分类
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 相关文章推荐
onpropertypchange
Jul 01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
微信小程序自动客服功能
Nov 02 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
ES6中Set和Map数据结构，Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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
注解(1) scrapy(1) 横向滚动(1) 加载异常(1) DeOldify(1) Postman(1) localStorage(1) BottomSheetDialog(1) virtualenv(1) 反射(1)
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
js tab 选项卡
2009/04/26 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
德国最大的拼图在线商店：Puzzle.de
2016/12/17 全球购物
数以千计的折扣工业产品：ESE Direct
2018/05/20 全球购物
美国领先的家庭智能音响系统品牌：Sonos
2018/07/20 全球购物
Pretty Green美国：英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
高中毕业自我鉴定
2013/12/19 职场文书
英语简历自我评价
2014/01/26 职场文书
医院保洁服务方案
2014/06/11 职场文书
事业单位年度考核评语
2014/12/31 职场文书
演讲开场白和结束语
2015/05/29 职场文书
公司员工奖惩制度
2015/08/04 职场文书
辅导员学期工作总结
2015/08/14 职场文书
学生检讨书范文
2019/06/24 职场文书