jquery 实现两级导航菜单附效果图
主要用于运维， 对界面要求不高的场合。 深深感到自己页面设计能力弱爆了，只能借鉴一下了， 交互逻辑还可以胜任一点。
直接贴代码:
1. html 页面及 js 交互， 注意引入 jquery 文件
. 代码如下:
<!doctype html public "-//w3c//dtd html 4.01//en" "https://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', 'https://blog.csdn.net/lovesqcc');
break;
case 'ifevemodule':
setcontentsize(contentheight+80, docwidth-15);
$('#maincontent').attr('src', 'https://ifeve.com/');
break;
case 'csdnmodule':
$('#maincontent').attr('src', 'https://csdn.net');
break;
case 'infoqmodule':
$('#maincontent').attr('src', 'https://www.infoq.com/cn/');
break;
case 'bolemodule':
$('#maincontent').attr('src', 'https://blog.jobbole.com/');
break;
case 'itcommentmodule':
$('#maincontent').attr('src', 'https://www.vaikan.com/');
break;
case 'wikimodule':
$('#maincontent').attr('src', 'https://zh.wikipedia.org/zh-tw/wikipedia');
break;
case 'zhihumodule':
$('#maincontent').attr('src', 'https://www.zhihu.com/');
break;
case 'acmmodule':
$('#maincontent').attr('src', 'https://www.acm.org/');
break;
case 'xiamimodule':
$('#maincontent').attr('src', 'https://www.xiami.com');
break;
case 'opencoursemodule':
$('#maincontent').attr('src', 'https://v.163.com/special/ted10collection/');
break;
default:
break;
}
}
);
$('.nav_list').hide();
$('#topmenu_home').click();
showtime();
}
);
</script>
</head>
<body>
<p id="header">
<p id="firstheader">
<p id="logo"> 两级导航菜单 </p>
<p id="target">两级导航菜单的示例</p>
<p id="toolbar">
<a href="#" id="userinfo">[ 你好: <span style="color:#f47920">admin</span> ]</a>
<a href="#" id="currtime"><span></span></a>
<a href="https://aone.alibaba-inc.com/aone2/req/addfromproductline/9139" target="_blank"><span style="color:#f47920">[ 提建议 ]</span></a>
</p>
</p>
<p class="clear"></p>
<p id="topnav">
<p 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>
</p>
</p>
<p class="clear"></p>
<p id="nav">
<p class="nav_list" id="homebo">
<a href="#" class="select" id="myblogmodule"><span>我的博客</span></a>
</p>
<p class="nav_list" id="itlearnbo">
<a href="#" class="select" id="ifevemodule"><span>并发网</span><lt;/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>
</p>
<p class="nav_list" id="baikebo">
<a href="#" class="select" id="wikimodule"><span>wiki百科</span></a>
<a href="#" id="zhihumodule"><span>知乎</span></a>
</p>
<p class="nav_list" id="scisrcbo">
<a href="#" class="select" id="acmmodule"><span>acm</span></a>
</p>
<p class="nav_list" id="morebo">
<a href="#" class="select" id="xiamimodule"><span>虾米音乐</span></a>
<a href="#" id="opencoursemodule"><span>网易公开课</span></a>
</p>
</p>
</p>
<p id="content">
<iframe id="maincontent" frameborder="0" width="100%"></iframe>
</p>
</body>
</html>
2. css 文件
[css] view plaincopyprint?在code上查看代码片派生到我的代码片
p: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. 效果图