jquery 实现两级导航菜单
主要用于运维系统， 对界面要求不高的场合。 深深感到自己页面设计能力弱爆了，只能借鉴一下了， 交互逻辑还可以胜任一点。
直接贴代码:
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 文件
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:;
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:;
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 插件开发——MENU（导航菜单）
JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...
- 如何用CSS和jQuery实现一个侧滑导航菜单
为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...
- jquery火焰等效果导航菜单
jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...
- css3和jquery实现的可折叠导航菜单(适合手机网页)
之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览 源码下载 这个 ...
- jquery倾斜的动画导航菜单
1. [代码]完整源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- Jquery列表中的导航菜单的应用
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 利用jquery实现百度新闻导航菜单滑动动画
前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
- 【Web】利用jquery实现百度新闻导航菜单滑动动画
前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
- Jquery实现两级联动
最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...
随机推荐
- 【CF809D】Hitchhiking in the Baltic States Splay
[CF809D]Hitchhiking in the Baltic States 题意:给你n个区间[li,ri],让你选出从中一个子序列,然后在子序列的每个区间里都选择一个tj,满足$t_1< ...
- 在eclipse pydev中使用PEP8来规范python代码
最近在写接口自动话时,代码要上研发的PEP8检查,所以没办法,在pydev中配置如下: 1.打开PEP检查 在pydev 2.3.0之后的版本都自带了pep8检查,但默认是没有开启的 Windows ...
- border-image使用过程中遇到的几个问题
这次年货,为了增添气氛,很多地方都用了边框,由于边框高度的不固定,给构建着实带了不小的麻烦. 通常我们处理边框的方法,无非以下两种方案: 1.切整张图片,做背景. 2.切上中下,进行拼接处理. 但是遇 ...
- RabbitMQ安装详解(centos6.8)(转自：http://www.cnblogs.com/zhen-rh/p/6862350.html)
1.下载rabbitmq安装包 2.安装erlang a.安装Erlang Solutions仓库到你的系统(目的在于让你可以使用yum安装到最新版本的erlang, 如果不设置, yum安装的erl ...
- thinkCMF----列表页跳转
thinkCMF列表循环有个:用来循环文章列表. <php> $where=[ 'post.create_time'=>['egt',0] ]; $page=[ 'list_rows ...
- 百度地图InfoWindow弹窗圆角
效果如下 使用CSS样式 /*地图标题*/ .BMap_pop div:nth-child(1) div { border-radius: 8px 0 0 0; } .BMap_pop div:nth ...
- 2.2RNN
RNN RNN无法回忆起长久的记忆 LSTM (long short Term memory长短期记忆)解决梯度消失或弥散vanishing 和梯度爆炸explosion 0.9*n-->0 ...
- Linux：发行版安装包的下载地址
1.Linux发行版网址 发行版 http://distrowatch.com Linux发行版信息大全 Ubuntu http://www.ubuntu.com 官网 http://cdimage. ...
- CCCC L2-020. 功夫传人 搜索 bfs && 精度+ 特判
https://www.patest.cn/contests/gplt/L2-020 题解:给你一颗树,让你遍历一遍,顺便更新一下数据,每次到根节点时将其对应的数据加到ans上面.这里用的bfs. 坑 ...
- Oracle核心技术之 SQL TRACE
1.SQL TRACE说明: 参数类型 布尔型 缺省值 false 参数类别 动态 取值范围 True|false 2.类型 1)sql trace参数:alter system改变对全局进程影响,如 ...