返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jquery 实现两级导航菜单附效果图

2020-05-22 16:24:29易采站长站整理

主要用于运维系统， 对界面要求不高的场合。 深深感到自己页面设计能力弱爆了，只能借鉴一下了， 交互逻辑还可以胜任一点。
直接贴代码:
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());

相关文章 大家在看