简单的下拉菜单左侧菜单效果css+js效果，可同时使用资源-CSDN文库

共4个文件

css：3个

html：1个

需积分: 32 132 浏览量 2011-09-06 15:55:23 上传评论收藏 6KB ZIP 举报

在网页设计中，下拉菜单是一种常见的交互元素，它能够有效地组织和呈现多级导航结构。本示例中，我们探讨的是一个简单的下拉菜单左侧菜单效果，它结合了CSS和JavaScript技术，提供了易于实现和使用的解决方案。让我们关注CSS部分。在提供的压缩包中，有三个CSS文件：styles.css、nav-h.css和nav-v.css。`styles.css`通常包含全局样式，而`nav-h.css`和`nav-v.css`可能专门用于水平和垂直导航菜单的样式定义。 1. `styles.css`: 这个文件可能包含了基本的页面布局和通用组件的样式，如字体、颜色、边距等。下拉菜单的基础样式，如背景色、字体大小、边框和过渡效果，通常会在这个文件中定义。 2. `nav-h.css`: 用于水平导航菜单的样式。下拉菜单在默认状态下是隐藏的，当鼠标悬停在父菜单项上时，通过CSS的`:hover`选择器来显示子菜单。可能涉及到的CSS属性包括`display`（切换隐藏和显示），`position`（设置为相对或绝对以调整定位），以及`z-index`（处理层级关系，确保下拉菜单出现在父元素之上）。 3. `nav-v.css`: 与`nav-h.css`类似，但专用于垂直菜单。布局和定位可能会有所不同，例如，可能需要通过调整`width`和`height`来适应垂直方向的空间。接下来是JavaScript部分，虽然没有提供具体的JavaScript文件，但在这种类型的下拉菜单中，JavaScript通常用于增加交互性和动态效果。例如： 1. 动态显示/隐藏下拉菜单：通过添加或移除CSS类（如`.active`）来控制下拉菜单的可见性，而不是仅仅依赖CSS的`:hover`状态。这可以避免移动设备上常见的问题，因为它们不支持长时间鼠标悬停。 2. 防止快速切换：为了提高用户体验，JavaScript可以添加一个延迟函数，比如`setTimeout`，以限制下拉菜单的频繁开关，避免用户在快速移动鼠标时导致菜单闪烁。 3. 事件监听：使用`addEventListener`监听点击或触摸事件，确保在触摸设备上也能正确工作。 `index.html`文件包含了HTML结构，构建了菜单的基本骨架。它会引用上述的CSS和JS文件，并使用`<ul>`、`<li>`等元素创建菜单结构，可能还会包含数据属性来帮助JavaScript操作这些元素。总结来说，这个示例中的下拉菜单效果结合了CSS和JavaScript，实现了简单的交互和视觉效果。CSS负责静态样式和初步的动态效果，而JavaScript则增强了用户体验，处理了更复杂的交互逻辑。通过学习这个案例，你可以更好地理解如何构建一个响应式的、用户友好的下拉菜单系统。

资源推荐

资源详情

资源评论

收起资源包目录

0906c.zip （4个子文件）

nav-v.css 2KB

nav-h.css 2KB

index.html 13KB

styles.css 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Menus (with some help from jQuery) &rsaquo; qrayg.com</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=1;" /> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="nav-h.css" type="text/css" media="screen" /> <link rel="stylesheet" href="nav-v.css" type="text/css" media="screen" /> <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>  <script language="JavaScript" type="text/javascript"> $(document).ready(function() { $('.links li code').hide(); $('.links li p').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div style="width:100%; margin:0px auto; line-height:30px"> <div style="height:30px; line-height:30px;width:960px;"> <div style="float:left"><a href="http://www.whkge.com/forum.php?mod=forumdisplay&fid=67" target="_blank" style="color:#069">返回javascript+jquery特效列表</a> <a href="http://www.icoioo.com">技术支持：南京爱搜</a></div> <div style="float:right">社区联盟：<a href="http://www.toodii.com">昆明社区</a> <a href="http://www.whkge.com">武汉k歌网</a>　<a style=" color:#900; text-decoration:none; font-weight:600" href="http://www.whkge.com/portal.php?mod=topic&topicid=1">我要加入联盟</a></div> </div> <div style="width:960px; height:90px; text-align:left"> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> <div style="clear:both"></div> <div id="page"> <div id="head"> <h1>CSS Menus v2 <span>(with some help from jQuery)</span></h1> </div> <div id="body"> <div id="content"> <p>The following dynamic menu examples are driven completely by <acronym title="Cascading Style Sheets">CSS</acronym> and work in all modern browsers<strong>*</strong>.</p> <h5>CSS Menus v2 Features</h5> <ul> <li>Up to 3 sub menus</li> <li>Hover Persistence</li> <li>Uses jQuery for <acronym title="Internet Explorer">IE</acronym> fixes</li> </ul> <h2>Horizontal Example</h2> <ul id="navmenu-h"> <li><a href="#">Home</a></li> <li><a href="#">Work +</a> <ul> <li><a href="#">Websites +</a> <ul> <li><a href="#">qrayg.com</a></li> <li><a href="#">craigerskine.com</a></li> <li><a href="#">dt.qrayg.com</a></li> <li><a href="#">legendofmana.info</a></li> </ul> </li> <li><a href="#">Sketchbook</a></li> <li><a href="#">Free Interfaces</a></li> </ul> </li> <li><a href="#">Learn +</a> <ul> <li><a href="#">Fireworks +</a> <ul> <li><a href="#">Aqua Button</a></li> <li><a href="#">Aqua Button 2</a></li> <li><a href="#">Water Drop</a></li> <li><a href="#">Light FX</a></li> <li><a href="#">Light FX2</a></li> </ul> </li> <li><a href="#">CSS +</a> <ul> <li><a href="#">CSS Menus</a></li> <li><a href="#">Sprite Nav</a></li> <li><a href="#">@import</a></li> </ul> </li> </ul> </li> <li><a href="#">Contact</a></li> </ul> <ul class="links"> <li> <p>View the Horizontal CSS</p> <code>/* Author: Craig Erskine Description: Dynamic Menu System - Horizontal/Vertical */ ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; } ul#navmenu-h ul { width: 160px; /* Sub Menu Width */ margin: 0; list-style: none; display: none; position: absolute; top: 100%; left: 0; } ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; } ul#navmenu-h li { float: left; display: inline; position: relative; } ul#navmenu-h ul li { width: 100%; display: block; } /* Root Menu */ ul#navmenu-h a { border-top: 1px solid #FFF; border-right: 1px solid #FFF; padding: 6px; float: left; display: block; background: #DDD; color: #666; font: bold 11px Arial, sans-serif; text-decoration: none; height: 1%; } /* Root Menu Hover Persistence */ ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a { background: #BBB; color: #FFF; } /* 2nd Menu */ ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a { float: none; background: #BBB; } /* 2nd Menu Hover Persistence */ ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a { background: #999; } /* 3rd Menu */ ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a { background: #999; } /* 3rd Menu Hover Persistence */ ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a { background: #666; } /* 4th Menu */ ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a { background: #666; } /* 4th Menu Hover */ ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { background: #333; } /* Hover Function - Do Not Move */ ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; } ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }</code> </li> <li> <p>View the JavaScript (for IE)</p> <code>$(document).ready(function(){ $("#navmenu-h li,#navmenu-v li").hover( function() { $(this).addClass("iehover"); }, function() { $(this).removeClass("iehover"); } ); });</code> </li> </ul> <h2>Vertical Example</h2> <ul id="navmenu-v"> <li><a href="#">Home</a></li> <li><a href="#">Work +</a> <ul> <li><a href="#">Websites +</a> <ul> <li><a href="#">qrayg.com</a></li> <li><a href="#">craigerskine.com</a></li> <li><a href="#">dt.qrayg.com</a></li> <li><a href="#">legendofmana.info</a></li> </ul> </li> <li><a href="#">Sketchbook</a></li> <li><a href="#">Free Interfaces</a></li> </ul> </li> <li><a href="#">Learn +</a> <ul> <li><a href="#">Fireworks +</a> <ul> <li><a href="#">Aqua Button</a></li> <li><a href="#">Aqua Button 2</a></li> <li><a href="#">Water Drop</a></li> <li><a href="#">Light FX</a></li> <li><a href="#">Light FX2</a></li> </ul> </li> <li><a href="#">CSS +</a> <ul>

评论收藏

内容反馈