html导行菜单js效果图,jquery 实现两级导航菜单附效果图

主要用于运维系统， 对界面要求不高的场合。 深深感到自己页面设计能力弱爆了，只能借鉴一下了， 交互逻辑还可以胜任一点。

直接贴代码:

1. HTML 页面及 JS 交互， 注意引入 Jquery 文件

两级导航菜单的示例

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();

}

);

两级导航菜单

两级导航菜单的示例

[ 你好: admin ]

[ 提建议 ]

首页

IT学习

百科

学术资源

更多

我的博客

并发编程网

CSDN

Infoq

伯乐在线

外刊评论

WIKI百科

知乎

ACM

虾米音乐

网易公开课

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. 效果图