jquery纵向横向,Web前端之家
分类:多线程

Jquery实现纵向横向菜单,jquery纵向横向

第一个菜单实现的是点击菜单项显示相应的子菜单项,三角变为向下的三角。下面的菜单鼠标移动到菜单项显示对应的子菜单项,鼠标移开子菜单消失。

下面介绍它的代码部分:

html代码:

head代码部分添加标题及引用:

<head> 
  <title>JQuery实战-菜单效果</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <link type="text/css" rel="stylesheet" href="css/menu.css" /> 
  <script type="text/javascript" src="js/jquery.js"></script> 
  <script type="text/javascript" src="js/menu.js"></script> 
</head> 

body部分编辑菜单项内容,通过嵌套的ul和li来表示,菜单最外层为ul,一层每个主菜单放在一个li中。如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套就可以构建多层的菜单。

<body> 
    <ul> 
      <li class="main"> 
          <a href="#">菜单项1</a> 
        <ul style="display:none;"> 
          <li> 
            <a href="#">子菜单项11</a> 
          </li> 
          <li> 
            <a href="#">子菜单项12</a> 
          </li> 
        </ul> 
      </li> 
      <li class="main"> 
        <a href="#">菜单项2</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项21</a> 
          </li> 
          <li> 
            <a href="#">子菜单项22</a> 
          </li> 
        </ul> 
      </li> 
      <li class="main"> 
        <a href="#">菜单项3</a> 
        <ul> 
          <li> 
          <a href="#">子菜单项31</a> 
          </li> 
          <li> 
            <a href="#">子菜单项32</a> 
          </li> 
        </ul> 
      </li> 
    </ul> 

    <br/> 
    <ul> 
      <li class="hmain"> 
        <a href="#">菜单项1</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项11</a> 
          </li> 
          <li> 
            <a href="#">子菜单项12</a> 
          </li> 
        </ul> 
      </li> 
      <li class="hmain"> 
        <a href="#">菜单项2</a> 
        <ul> 
          <li> 
            <a href="#">子菜单项21</a> 
          </li> 
          <li> 
            <a href="#">子菜单项22</a> 
          </li> 
        </ul> 
      </li> 
      <li class="hmain"> 
        <a href="#">菜单项3</a> 
        <ul> 
          <li> 
          <a href="#">子菜单项31</a> 
          </li> 
          <li> 
            <a href="#">子菜单项32</a> 
          </li> 
        </ul> 
      </li> 
    </ul> 

  </body> 

css代码部分 1.浏览器中的ul和li元素默认情况下文字前都有圆点标识符,li元素会有缩进
2.list-style属性值为none,可清除ul和li前面的小圆点。
3.清除缩进值,padding和margin都为0,其中IE6 IE7需要把margin为0的时候才可以清除缩进值。

ul,li{ 
  list-style:none;/* //清除ul和li上默认的小圆点 */ 

} 
ul{ 
  /* 清除子菜单的缩进值 */ 
  padding:0; 
  margin:0; 
} 
.main,.hmain{ 
  background-image:url(../images/title.gif);/*指定背景图*/ 
  background-repeat:repeat-x; 
  width:120px; 
} 
li{ 
  background-color:#EEEEEE; 
} 
a { 
  /*取消所有的下划线*/ 
  text-decoration:none; 
  padding-left:20px;  
   display:block; 
  display:inline-block;/* 解决ie6不兼容的问题 */  
  width:100px; 
  padding-top:3px; 
  padding-bottom:3px; 
} 
.main a,.hmain a { 
  color:white;/*主菜单标签颜色为白色*/ 
  background-image:url(../images/collapsed.gif); 
  background-repeat:no-repeat; 
  background-position:3px center; /* 图片位置在中间 */ 
} 
.main li a ,.hmain li a{ 
  /* 子菜单项 */ 
  color:black; 
  background-image:none;/* 不使用图片 */ 
  padding-left:18px;  

} 
.main ul,.hmain ul{ 
  /* 子菜单隐藏 */ 
   display:none;  
} 
.hmain{ 
  float:left;/*浮动显示*/ 
  margin:1px; 
} 

menu.js代码:
1.main a选择使用了.main这个class的元素内部所有的a节点
2.main>a选择.main子节点中的a节点

$(document).ready(function(){ 
  //页面的Dom已经装载完成时,执行的代码 
   $(".main > a,.hmain a").click(function(){ 
     //找到主菜单项对应的子菜单项 
    var ulNode = $(this).next("ul"); 
    // //根据情况收缩菜单 
    // if(ulNode=$.css("display") == "none"){ 
      // ulNode.css("display","block"); 
    // }else{ 
      // ulNode.css("display","none"); 
    // } 

    // ulNode.show("normal");//设置展开的速度,可以是nomal,slow,fast 
    // ulNode.hide(); 
     // ulNode.toggle();//toggle设置展开或者收缩 
    //卷帘效果,向上或者向下 
    // ulNode.slideDown(); 
    // ulNode.slideUp; 
    ulNode.slideToggle(); 
  }); 
  //麻烦的方法 
  // $(".hmain > a").hover(function(){ 
    // $(this).next("ul").slideDown(); 
  // }.Function(){ 
    // var ulNode=$(this).next("ul"); 
    // var timeoutId =setTimeout(function(){ 

// })     
      // ulNode.slideUp(); 
  // },300); 
  // ulNode.hover(function(){ 
    // clearTimeout(timeoutId); 
  // }.function(){ 
    // $(this).slideUp(); 
  // }); 

  /********实现鼠标移动到指定主菜单后子菜单自动显示*****/ 

  $(".hmain").hover(function(){ 
    $(this).children("ul").slideDown(); 
  },function(){ 
    $(this).children("ul").slideUp(); 
  }); 

}); 
  /* 
  *修改主菜单的指示图标随着子菜单的变化而变化 
  * 
  */ 
function changeIcon(mainNode) { 
  if (mainNode) { 
    if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) { 
      mainNode.css("background-image","url('images/expanded.gif')"); 
    } else { 
      mainNode.css("background-image","url('images/collapsed.gif')"); 
    } 
  } 
} 

以上就是本文的全部内容,希望能够帮助大家更好的实现制作菜单效果。

以前经常看见网站有菜单的显示,鼠标移上去就出现下拉的效果,很绚丽,经过看JQuery视频后,发现实现也挺容易的。 Html中,通过

您可能感兴趣的文章:

  • JQuery实现绚丽的横向下拉菜单
  • jquery实现无限分级横向导航菜单的方法
  • jquery+css实现的红色线条横向二级菜单效果
  • jquery+css实现绚丽的横向二级下拉菜单-附源码下载
  • jquery实现可横向和竖向展开的动态下滑菜单效果
  • jquery实现仿Flash的横向滑动菜单效果代码

第一个菜单实现的是点击菜单项显示相应的子菜单项,三角变为向下的三角。下面的菜单鼠标移动到...

  • 标签将所需的元素写出来。 复制代码 代码如下:

    • 菜单项1
      • 子菜单项11
      • 子菜单项12
    • 菜单项2
      • 子菜单项21
      • 子菜单项22
    • 菜单项3
      • 子菜单项31
      • 子菜单项32

    最外围的

    • 即为菜单项1、菜单项2、菜单项3,下拉菜单分别在各主菜单之下,如果菜单最外层为ul,一层每个主菜单放在一个li中,如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套即可构建多层的菜单。 CSS中 复制代码 代码如下: ul,li{ /*清除ul和li上的小圆点*/ list-style:none; } ul{ /*清除子菜单的缩进值*/ padding:0; margin:0; } .hmain{ background-image:url; //前面的小三角 background-repeat:repeat-x; width:120px; } li{ background-color:#EEEEEE; //背景图片覆盖背景色 } a{ //取消所有的下划线 text-decoration:none; padding-left:20px; display:block; /*块集元素可充满区域*/ display:inline-block; width:100px; padding-top:3px; padding-bottom:3px; } .hmain a{ color:white; background-image:url(../images/collapsed.gif); background-repeat:no-repeat; background-position:3px center; } .hmain li a{ color:black; background-image:none; } .hmain ul{ display:none; } .hmain{ float:left; margin-right:1px; } Html中引用js文件jquery.js和menu.js,其中menu.js如下: 复制代码 代码如下: $.ready{ //页面中的DOM已经装载完成时,执行的代码 $.click{ //找到主菜单项对应的子菜单项 var ulNode=$; ulNode.slideToggle); }); $.hover.children ; changeIcon); },function.children; changeIcon); }); }); /* *修改主菜单的指示图标 */ function changeIcon{ if{ if(mainNode.css.indexOf{ mainNode.css("background-image","url('images/expanded.gif')"); }else{ mainNode.css("background-image","url('images/collapsed.gif')"); } } } 这样绚丽的下拉菜单就完成了。实现很简单,不过里面的小知识点很零碎。例如:.main a和.main>a的不同之处,前者选择使用.main的这个class的元素内容所有的a节点,后者只选择.main的子节点中的a节点。 这样的例子应用性很强,在网站中使用让界面显得更加的美观,例子才看3个,抓紧时间继续看...

本文由10bet手机官网发布于多线程,转载请注明出处:jquery纵向横向,Web前端之家

上一篇:linux下jboss的安装配置 下一篇:没有了
猜你喜欢
热门排行
精彩图文