来自 系统操作 2019-09-04 19:49 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

jQuery实现可高亮显示的二级CSS菜单效果,jquery实

本文实例陈说了jquery达成鼠标滑过显示二级下拉菜单效果。共享给我们供大家参谋。具体如下:

本文实例陈说了jQuery完结可高亮展现的二级CSS菜单效果。分享给大家供大家参谋。具体如下:

那是一款jquery达成的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,选择UL LI结构,便于修改完善,笔者觉着是很实用的菜系,希望我们经常能用得上。

此间达成鼠标放在二级菜单上,超级菜单可高亮显示,以提醒当前美食指南所在的岗位,引进了jQuery插件使其在做对简洁度方面优化的不得了好,用相当少的代码完成想要的效果与利益,分享给大家。

运转作效果果截图如下:

先来拜谒运转效果截图:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

具体代码如下:

实际代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery下拉菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }
.wrap { width: 800px; margin: 0 auto; }
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }
#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }
#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }
#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
* html #nav ul { margin: 0 0 0 -2px; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
</style>
</head>
<body>
<div class="wrap">
 <ul id="nav">
  <li><a href="#">网站主页</a></li>
  <li><a href="#">关于我</a>
   <ul>
    <li><a href="#">Company</a></li>
    <li><a href="#">Authors</a></li>
    <li><a href="#">Advertising</a></li>
   </ul>
  </li>
  <li><a href="#">RSS订阅</a>
   <ul>
    <li><a href="#">PSD</a></li>
    <li><a href="#">Patterns</a></li>
    <li><a href="#">Icons</a></li>
   </ul>   
  </li>
  <li><a href="#">精美博文</a>
   <ul>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">MySQL</a></li>
   </ul>
  </li>
  <li><a href="#">Web工具</a>
   <ul>
    <li><a href="#">Performance</a></li>
    <li><a href="#">CMS Plugins</a></li>
    <li><a href="#">Cheat Sheets</a></li>
   </ul>
  </li>
  <li><a href="#">Originals</a>
   <ul>
    <li><a href="#">Website Design</a></li>
    <li><a href="#">Mobile</a></li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript">
$(document).ready(function() { 
 $('#nav li').hover(function() {
  $('ul', this).slideDown(200);
  $(this).children('a:first').addClass("hov");
 }, function() {
  $('ul', this).slideUp(100);
  $(this).children('a:first').removeClass("hov");  
 });
});
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>可高亮的二级CSS菜单</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.menu1 a').each(function(i){
  if($(this).attr('class')=='this'||$(this).attr('class')=='this hover'){
   $('.menu2').eq(i).show();
  }
  $(this).mousemove(function(){
   $('.menu1 a').removeClass('this');
   $(this).addClass('this');
   $('.menu2').hide();
   $('.menu2').eq(i).show();
   });
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
a{color:#000;text-decoration:none;}
.menu1{height:30px;background:#1B75C4;}
.menu1 a{display:inline;float:left;height:30px;line-height:30px;color:#fff;margin:0 5px;padding:0 5px;}
.menu1 a:hover,.menu1 a.this,.menu1 a.hover{background:#fff;color:#1B75C4;}
.menu2{height:30px;display:none;}
.menu2 a{display:inline;float:left;height:30px;line-height:30px;margin:0 5px;padding:0 5px;}
.menu2 a:hover{color:#1B75C4;}
</style>
</head>
<body>
<div class="menu">
 <div class="menu1">
  <a class="this" href="javascript:;">网站脚本</a>
  <a href="javascript:;">网页特效</a>
  <a href="javascript:;">大家喜欢的</a>
  <a href="javascript:;">不告诉你</a>
 </div>
 <div class="menu2">
  <a href="javascript:;">ASP</a>
  <a href="javascript:;">PHP</a>
  <a href="javascript:;">CGI</a>
 </div>
 <div class="menu2">
  <a href="javascript:;">菜单特效</a>
  <a href="javascript:;">CSS布局</a>
  <a href="javascript:;">表单特效</a>
  <a href="javascript:;">列表特效</a>
  <a href="javascript:;">浮动层</a>
 </div>
 <div class="menu2">
  <a href="javascript:;">美女</a>
  <a href="javascript:;">小姐</a>
  <a href="javascript:;">金钱</a>
  <a href="javascript:;">游戏</a>
 </div>
 <div class="menu2">
  <a href="javascript:;">秘密</a>
  <a href="javascript:;">年龄</a>
  <a href="javascript:;">其它</a>
 </div>
</div>
</body>
</html>

希望本文所述对我们的jquery程序设计有所支持。

期望本文所述对大家的jquery程序设计有所支持。

您大概感兴趣的篇章:

  • 依照jquery完成导航菜单高亮彰显(二种办法)
  • jquery完结在网页钦赐区域突显自定义右键菜单效能
  • 基于jquery落成后台侧面菜单点击上下滑动呈现
  • jquery达成下拉菜单的二级联动选用json对象从DB取值彰显联合浮动
  • 鼠标悬浮呈现二级菜单成效的jquery落成
  • jquery达成鼠标经过突显下划线的渐变下拉菜单效果代码
  • jQuery完成可高亮呈现的二级CSS菜单效果
  • php+jQuery完毕的三级导航栏下拉菜单彰显效果
  • jQuery实现点击后高亮背景固定展现的菜系功用【附demo源码下载】
  • jquery达成遮蔽在右侧的弹性弹出美食指南作用
  • jQuery达成菜单的显得和隐敝效用示例

您或者感兴趣的稿子:

  • jquery达成鼠标滑过展现二级下拉菜单效果
  • 依据jquery完毕导航菜单高亮突显(二种办法)
  • jquery落成在网页钦赐区域显示自定义右键菜单功效
  • 基于jquery实现后台侧面菜单点击上下滑动显示
  • jquery实现下拉菜单的二级联合浮动采纳json对象从DB取值展现联动
  • 鼠标悬浮展现二级菜单功能的jquery完结
  • jquery达成鼠标经过展现下划线的渐变下拉菜单效果代码
  • php+jQuery完成的三级导航栏下拉菜单显示效果
  • jQuery完结点击后高亮背景固定展现的美食指南作用【附demo源码下载】
  • jquery达成遮盖在左侧的弹性弹出美食指南作用
  • jQuery达成菜单的呈现和隐形功效示例

本文由六合联盟网发布于系统操作,转载请注明出处:jQuery实现可高亮显示的二级CSS菜单效果,jquery实

关键词: