jquery 實現兩級導航選單附效果圖_jquery

主要用於運維繫統， 對界面要求不高的場合。 深深感到自己頁面設計能力弱爆了，只能藉用一下了， 互動邏輯還可以勝任一點。

直接貼代碼:

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

複製代碼 程式碼如下: 两级导航菜单的示例

var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] function showtime() { var date = new Date(); var yy = date.getYear(); if (yy yy = yy + 1900; } var MM = date.getMonth()+1; if(MM var dd = date.getDate(); if(dd var hh = date.getHours(); if(hh var mm = date.getMinutes(); if(mm var ss = date.getSeconds(); if(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

虾米音乐 网易公开课

jquery 實現兩級導航選單附效果圖_jquery

相關文章