Jquery to achieve a two level navigation menu with renderings
- 2020-03-30 02:18:57
- OfStack
Mainly used in the operation and maintenance system, interface requirements are not high occasions. Deeply feel their own page design ability is too weak, can only learn, interaction logic can also be competent.
Direct paste code:
1. HTML page and JS interaction, pay attention to introduce Jquery file
3. The renderings
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403071551481.gif? 201427155212 ">
Direct paste code:
1. HTML page and JS interaction, pay attention to introduce Jquery file
<!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> An example of a two-level navigation menu </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 = [" Sunday ", " Monday ", " Tuesday ", " Wednesday ", " Thursday ", " Friday ", " Saturday "]
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"> Two navigation menus </div>
<div id="target"> An example of a two-level navigation menu </div>
<div id="toolbar">
<a href="#" id="userinfo">[ hello : <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">[ advice ]</span></a>
</div>
</div>
<div class="clear"></div>
<div id="topnav">
<div class="topnav_list">
<a href="#" class="select" id="topmenu_home"><span> Home page </span></a>
<a href="#" id="topmenu_itlearn"><span>IT learning </span></a>
<a href="#" id="topmenu_baike"><span> wikipedia </span></a>
<a href="#" id="topmenu_scisrc"><span> Academic resources </span></a>
<a href="#" id="topmenu_more"><span> More and more </span></a>
</div>
</div>
<div class="clear"></div>
<div id="nav">
<div class="nav_list" id="homebo">
<a href="#" class="select" id="myblogModule"><span> My blog </span></a>
</div>
<div class="nav_list" id="itlearnbo">
<a href="#" class="select" id="ifeveModule"><span> Concurrent programming network </span></a>
<a href="#" id="csdnModule"><span>CSDN</span></a>
<a href="#" id="infoqModule"><span>Infoq</span></a>
<a href="#" id="boleModule"><span> Bole online </span></a>
<a href="#" id="itcommentModule"><span> Periodicals comments </span></a>
</div>
<div class="nav_list" id="baikebo">
<a href="#" class="select" id="wikiModule"><span>WIKI wikipedia </span></a>
<a href="#" id="zhihuModule"><span> zhihu </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> Dried shrimp music </span></a>
<a href="#" id="opencourseModule"><span> Netease public class </span></a>
</div>
</div>
</div>
<div id="content">
<iframe id="maincontent" frameborder="0" width="100%"></iframe>
</div>
</body>
</html>
2. CSS file
[css] view plaincopyprint? in CODE View the code slice on derive to my code slice
div:not(#topnav, #logo){font-size:10pt!important}
*{font-family: Microsoft jas black , Song typeface , san-serif!important}
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: Official script , Microsoft jas black , Song typeface , 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;
}
#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;
}
#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. The renderings
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403071551481.gif? 201427155212 ">