听他们讲jQuery达成火焰灯效酚酞航菜单,共享本

作者: 关于计算机  发布:2019-09-03

摘要:

效能描述为:当鼠标经过某一导航选项的时候,后边的背景图片(上海体育场地“圣诞节”后圆角背景)会弹性缓动到该导航选项,若无生出单击动作,鼠标移开后,背景图又重临原位。

  jquery库给我们带来了众多造福的地方,使用jquery达成四个大约的下拉菜单已经是很简短了,但也可以有例外的完成格局。今天自个儿行使jquery写了多少个下拉菜单,参照他事他说加以考察了Xiaofeng Wang的SexyDropDownMenu二〇〇九,个中照旧有部分事物感觉值得记录一下。

你可以狠狠地点击这里:demo效果页面

实现:

利用验证:

  首先上他的代码(把全体的代码贴上来太长了,就捡部分吗),

1、需求链接的文件

  一、html中ul列表

亟待调用的文件有:jQuery库(1.2上述版本),jQuery缓动插件(jquery.easing.min.js),火焰灯效果插件(jquery.lavalamp.min.js)以及多少个ul li列表的体裁文件。举个例子,本demo实例页面链接如下截图:

 <ul class="topmenu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul class="submenu1">
          <li><a href="#">Ch1</a></li>
          <li><a href="#">Ch2</a>
            <ul class="submenu11">
              <li><a href="#">Ch21</a>
                <ul class="submenu11">
                  <li><a href="#">Ch211</a>
                    <ul class="submenu11">
                      <li><a href="#">Ch2111</a>
                        <ul class="submenu11">
                          <li><a href="#">Ch21111</a></li>
                          <li><a href="#">Ch21112</a></li>
                          <li><a href="#">Ch21113</a></li>
                          <li><a href="#">Ch21114</a></li>
                          <li><a href="#">Ch21115</a></li>
                          <li><a href="#">Ch21116</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Ch2112</a></li>
                      <li><a href="#">Ch2113</a></li>
                      <li><a href="#">Ch2114</a></li>
                      <li><a href="#">Ch2115</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Ch212</a></li>
                  <li><a href="#">Ch213</a></li>
                  <li><a href="#">Ch214</a></li>
                </ul>
              </li>
              <li><a href="#">Ch22</a>
                <ul class="submenu11">
                  <li><a href="#">Ch221</a></li>
                  <li><a href="#">Ch222</a></li>
                  <li><a href="#">Ch223</a></li>
                </ul>
              </li>
              <li><a href="#">Ch23</a></li>
            </ul>
          </li>
          <li><a href="#">Ch3</a>
            <ul class="submenu11">
              <li><a href="#">Ch31</a></li>
              <li><a href="#">Ch32</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Resources</a>
        <ul class="submenu1">
          <li><a href="#">Sub Nav Link</a></li>
          <li><a href="#">Sub Nav Link</a></li>
        </ul>
      </li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Advertise</a></li>
      <li><a href="#">Submit</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>

图片 1

  在那之中为六层深度的菜系结构,如下图

2、HTML代码的写法

图片 2

从jQuery代码来看,HTML只扶助li列表,冬天或有类别表(ol 或 ul)。举例下边包车型客车身体力行:

  二、js部分(css就不贴出来了)

<ul class="lava_lamp">
    <li class="current"><a href="#zhangxinxu">圣诞节</a></li>
    <li><a href="#zhangxinxu">地震</a></li>
    <li><a href="#zhangxinxu">股市</a></li>
    <li><a href="#zhangxinxu">《十月围城》</a></li>
    <li><a href="#zhangxinxu">无线音乐咪咕汇</a></li>
</ul>
$(document).ready(function() {
  //第一部分
  // Top Menu
  //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)
  $("ul.submenu1").parent().append(""); 
  //第二部分
  $("ul.topmenu li span").click(function() { //When trigger is clicked...
    //Following events are applied to the submenu1 itself (moving submenu1 up and down)    
    //Drop down the submenu1 on click
    $(this).parent().find("ul.submenu1").slideDown('fast').show();   
    //在click后给绑定hover处理函数,感觉是比较巧妙的地方
    $(this).parent().hover(function() {
    }, function() {
      //When the mouse hovers out of the submenu1, move it back up
      $(this).parent().find("ul.submenu1").slideUp('slow'); 
    });
    //Following events are applied to the trigger (Hover events for the trigger)
  }).hover(function() {
    //On hover over, add class "hover"
    $(this).addClass("hover"); 
  }, function() {  //On Hover Out
    //On hover out, remove class "hover"
    $(this).removeClass("hover"); 
  });
  //第三部分
  $("ul.topmenu li ul.submenu1 li").hover(function() {
    $(this).find("ul.submenu11:first").show("slow");
  }, function() {
    $(this).find("ul.submenu11:first").hide("fast");
  });
});

3、相应的CSS写法

  第一某个:

CSS的写法与平时利用冬季列表写导航条是未有太大差别的,分裂在于最里面包车型地铁a标签要求安装position为relative并给定一个相对较高的层级(z-index),那是显得原理(稍后钻探)决定的。还只怕有正是索要增多三个class为back的li标签的体裁,这些样式就是背后挪动的背景图片(或背景象或边框等)的体制。举例,上边的HTML的CSS能够如下(差不离暗指):

  增添了下了菜单的八个接触按键

/*下边框*/
. lava_lamp{position:relative; width:421px; height:29px; padding:15px; border:1px solid silver;}
. lava_lamp li{float:left;}
. lava_lamp li a{float:left; font-weight:bold; color:#333333; font-size:14px; top:8px; margin:auto 10px; text-decoration:none; position:relative; z-index:3;}
. lava_lamp li a:hover{text-decoration:none; color:#333333;}
. lava_lamp li.back{height:30px; border-bottom:3px solid #34538b; position:absolute; z-index:2;}

  第二有些:

4、js部分的代码

  绑定了二个click事件的管理函数

js用法非常粗略。在$(function(){});之内写上$(“选用器”).lavaLamp();其实就能够了。不过一般来说,会设置有些参数。还是地点的例证:

  触发开关被click后给下拉菜单最外层的li绑定hover管理函数,认为是相比美妙的地点。

$(". lava_lamp").lavaLamp({
 fx: "backout", //缓动类型
 speed: 700, //缓动时间
 click: function(event, menuItem) {
 return false; //单击触发事件
 }
});

  给最外层的li绑定hover函数,这里管理函数写的是当鼠标悬停在li上时不做其余管理(第一函数为空),当鼠标离开时li收起。

此间有三个参数:fx,speed,click分别表示缓动类型,缓动实践的时光,以及单击菜单后的触发的平地风波。根据你的须要能够做相应的退换,举例:fx: “bounceout”,speed: 一千 。

  这样一来,前边张开ul的菜单都是最外层的li里面,那样菜单就不会活动收起了,也等于等于是鼠标离开了方方面面菜单,li会自动接收。

5、达成预览

  第1局地:

诚如来说,预览就可以知见效果了。即便您在IE6下开采背景图片移动比不上愿,试试在js中步入:document.execCommand(“BackgroundImageCache”, false, true);

  给菜单下中嵌套的ul的hover事件绑定函数,用于举行和接到下一流菜单

原理简述:

  $(this).find("ul.submenu11:first")也是比比较美妙的经过find获得当前相配成分会集中各种成分的遗族,并由此“ul.submenu11:first”筛选活动下一代成分给以张开。

讲一下jQuery代码都做了怎么样工作:
jQuery首先做的业务正是在ul列表中又加多了四个class为back的li标签,在CSS中,li.back被安装为为相对定位(position:absolute;z-index:2;),层级小于导航中a标签(position:relative;z-index:3;)的层级,全数,这里包蕴背景图片(或背景象或边框)的li.back标签会在文字的花花世界(a标签下方)展现。

  同时也给下顶尖菜单绑定了收起的管理函数,与触龙须菜单中click给最外层li绑定的收起函数一齐功用,是想菜单的自行接到作用。

jQuery做的别的一件业务便是调节li.back那么些标签层的大幅以及left的岗位了,也正是卡通片效果了。那亟需结合easing缓动插件了,假若仅是只有的运动,easing插件是不要求的,animate函数就能够兑现。

总结:

图片 3

  当中表现了jquery筛选器的有力和灵活,也反映jquery非凡的链式语法。

你能够狠狠地方击这里:源文件打包下载(.zip 24.3k).rar)

上面给大家共享一段纯jQuery水平下拉菜单实现

参考:

<!DOCTYPE html>
<html>
  <head>
   <title>jQuery水平下拉菜单实现</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
   <!--[if lt IE 9]>
     <script src="bootstrap/js/html5shiv.js"></script>
     <script src="bootstrap/js/respond.min.js"></script>
   <![endif]-->
   <style type="text/css">
 .menus{border:1px solid red; float:left; margin-left:4px; background:red;}
 .menus a{display:block; width:100px; text-align:center;}
 .menu{display:none;}
 a{cursor:pointer;text-decoration:none;}
 a:hover{background:white; text-decoration:none;}
 a:visited{text-decoration:none; color:black;}
  </style>
   <script>
    $(function(){
 $(".menu-title").click(function(){
 $(this).next().toggleClass();
 });
    });
   </script>
  </head>
  <body> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div>
  </body>
</html>

如上正是本文的全体内容,希望对大家的就学抱有扶助,也希望大家多多协理脚本之家。

您可能感兴趣的文章:

  • jQuery+CSS 达成的超Sexy下拉菜单
  • jquery 多级下拉菜单核心代码
  • 用jquery达成下拉菜单效果的代码
  • 发源国外的二十七个基于jquery的Web下拉菜单
  • jquery仿京东导航/仿天猫商城百货店左边分类导航下拉菜单效果
  • Jquery带找出框的下拉菜单
  • jQuery点击弹出下拉菜单的小例子
  • JQuery达成靓丽的横向下拉菜单
  • 巧用jquery消除下拉菜单被Div遮挡的有关难点
  • jquery落成下拉菜单的二级联合浮动采纳json对象从DB取值呈现联合浮动
  • 用jquery实现的三个超级轻松的下拉菜单
  • JQuery设置获取下拉菜单某些选项的值(比较全)
  • jQuery完毕向下滑出的平缓下拉菜单效果
  • jquery完成很酷的网页顶端Logo下拉菜单效果
  • jquery实现鼠标滑过呈现二级下拉菜单效果
  • jquery落成鼠标经过显示下划线的渐变下拉菜单效果代码
  • jquery达成的淡入淡出下拉菜单效果

您大概感兴趣的篇章:

  • jQuery纵向导航菜单作用达成形式
  • jquery仿京东导航/仿Tmall商店侧面分类导航下拉菜单效果
  • JQuery 写的本性导航菜单
  • jQuery 实现左侧浮动导航菜单功用
  • Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
  • jQuery弹性滑动导航菜单达成思路及代码
  • jquery完成点击向下进展菜单项(伸缩导航)效果
  • 听别人讲jquery完毕导航菜单高亮显示(两种方法)
  • 7款风格新颖的jQuery/CSS3菜单导航共享
  • jQuery和CSS仿京东仿Tmall列表导航菜单

本文由王中王开奖结果发布于关于计算机,转载请注明出处:听他们讲jQuery达成火焰灯效酚酞航菜单,共享本

关键词: