使用jQuery创建二级导航菜单

需积分: 0 167 浏览量更新于2024-08-30 收藏 130KB PDF 举报

"这篇资源是关于使用jQuery实现一个简单的两级导航菜单的教程，适用于运维系统且界面需求不高的场景。作者在文中分享了HTML结构、CSS样式和JavaScript交互的实现方法，通过引入jQuery库来完成菜单的动态效果。" 在这个教程中，作者首先强调了这个二级导航菜单适用于那些对界面设计要求不高的运维系统。由于作者自认为在页面设计方面较为薄弱，因此选择了借鉴现有的解决方案，但自信可以处理好交互逻辑。接下来，作者提供了HTML代码示例，这部分包括了基本的HTML结构，如`<html>`、`<head>`和`<body>`标签。在`<head>`部分，引入了jQuery库（`jquery-1.10.1.min.js`）以支持JavaScript的交互，并引用了一个名为`two-nav.css`的外部CSS文件，用于定义菜单的样式。此外，还创建了一个`<title>`标签，显示为"两级导航菜单的示例"。在JavaScript部分，虽然代码中有一段`showtime()`函数，但它实际上与导航菜单的实现无关，而是用于显示当前时间的功能。这部分可以忽略，因为它不是实现导航菜单的重点。真正的导航菜单实现主要依赖于jQuery。虽然具体的实现代码未在提供的摘要中给出，但通常实现二级导航菜单的jQuery方法会包括以下步骤： 1. **HTML结构**：创建一级菜单项和二级菜单项，二级菜单通常默认隐藏。 2. **CSS样式**：设置菜单的背景、边框圆角等样式，以及二级菜单的定位，通常二级菜单会在鼠标悬停在一级菜单项上时出现。 3. **jQuery事件监听**：使用`$(document).ready()`确保DOM加载完毕后执行脚本。添加`mouseover`和`mouseout`事件监听器到一级菜单项，当鼠标进入一级菜单项时显示对应的二级菜单，离开时隐藏。在实际的`two-nav.css`样式文件中，可能会定义如下样式： - `nav`元素的样式，包括背景色、字体、边距等。 - `li`元素的样式，一级菜单和二级菜单可能有不同的样式，如`border-radius`用于设置边框圆角。 - `ul`元素的样式，主要是调整列表的排列方式和间距。 - 使用`:hover`选择器定义鼠标悬停在一级菜单项上的效果，通常会改变背景色或添加下划线等。在jQuery代码中，可能会有类似以下的片段用于控制二级菜单的显示和隐藏： ```javascript $(".parentItem").hover(function() { $(this).find(".childMenu").stop().slideToggle("fast"); }); ``` 这段代码会选择所有具有`parentItem`类的一级菜单项，当鼠标悬停时，找到其内的`.childMenu`子菜单并使用`slideToggle`动画来切换显示状态。这个资源提供了一个基础的jQuery二级导航菜单实现思路，适用于对界面设计要求不高的场景。开发者可以根据自己的需求进行调整和优化，例如添加过渡效果、响应式设计等。

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

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

点。

直接贴代码:

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

代码如下:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<title>两级导航菜单的示例</title>

<!– moonmm css –>

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

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38741531

粉丝: 6
资源: 946

使用jQuery创建二级导航菜单

jquery实现二级菜单

jQuery产品筛选导航菜单，高级搜索

利用jQuery Mobile实现页面间的过渡效果

JQuery中的动画效果及其实现原理

使用JQuery实现横向导航菜单效果中用到的知识点

使用jQuery实现伸缩式导航菜单，自定义样式效果

jquery实现左侧导航菜单

jquery导航栏菜单

利用jquery实现图片的浮动 高级

web前端 利用jquery实现图片的高级浮动

最新资源

利用jquery实现图片的浮动高级

web前端利用jquery实现图片的高级浮动