jquery的ul、li标签做菜单

最新推荐文章于 2021-09-22 19:23:23 发布

水中鸟lgl

最新推荐文章于 2021-09-22 19:23:23 发布

阅读量2.2k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/luguling200802544/article/details/46438213

版权

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、ulli标签做菜单

知识点：

1．页面中的菜单项可以通过嵌套的ul和li来表示

2．浏览器中ul和li元素默认情况文字都有圆点标识符,li元素会有缩进。

List-style属性值为none时,可以清除ul和li前面的小圆点。

3．可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小,那么背景图会自动在横向和纵向上重复显示,直到填满整个区域。

4．可以使用background-repeat来控制背景图的重复填充方式。background-repeat值为no-repeat时,背景图不会再所在的区域中重复显示。

5． a标签的text-decoration属性值为none时,可以取消文字上的下划线。

6． Ie6以外的浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于ie,则需要设定display为inline-block,同时设定a的宽度。

7． .Main a 和 .main >a的不同之处，前者选择使用了.main的这个class的元素内部所有的a的节点，后者只选择.main的子节点中的a节点。

8．Show,hide方法可以用于显示或者隐藏元素,参数可以是单位为毫秒的数字,或者是‘show’，‘nomal’，‘fast’这三个字，都可以来控制完成显示或隐藏需要的时间。

9．toggle方法更强大.可以省去判断元素是显示还是隐藏的状态,直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show,hide相同。

10． SlideDown,slideUp可以实现向下或向上卷动的效果，

11． SlideToggle和toggle达到的效果类似

12．DOCTYPE对于Jquery中的动画是有影响的。没有定义DOCTYPE在IE中，Jquery的动画会出现闪烁的效果。

13． Float的值是left,可以使原本各自位于一行的元素全部在一行中向左浮动。

14. Html的class属性对应CSS

二、实例

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery菜单实战</title>
<script language="javascript" type="text/javascript"src="jquery-1.3.2.min.js">
</script>
<script language="javascript" type="text/javascript"src="menu.js">
</script>
<link type="text/css" rel="stylesheet"href="menu.css" />
</head>
<body>

<ul>
<li class="main"> <ahref="#">菜单项1</a>
    <ul>
      <li><ahref="#">子菜单11</a></li>
      <li><ahref="#">子菜单12</a></li>
    </ul>
</li>
<li class="main"><ahref="#">菜单项2</a>
    <ul>
      <li><ahref="#">子菜单21</a></li>
      <li><ahref="#">子菜单22</a></li>
    </ul>
</li>
<li class="main"><ahref="#">菜单项3</a>
    <ul>
      <li><ahref="#">子菜单31</a></li>
      <li><ahref="#">子菜单32</a></li>
    </ul>
</li>
</ul>
<br/>//可以向菜单中加横线
<br/>

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

下面是css部分的代码

@charset "utf-8";

ul, li {

list-style:none;
}
ul {

padding:0px;
margin:0px;
}
li {
background-color:#eee;
}
a {

text-decoration:none;

padding-left:20px;

display:block;

display:inline-block;
width:100px;
padding-top:3px;
padding-bottom:3px;
}

.main {

background:url(bgcolor.gif)repeat-x;
width:120px;
}
.main a {

color:#fff;
background:url(abgcolor.gif)no-repeat;

background-position:3pxcenter;
}
.main li a {

color:#000;

background:none;
}
.main ul {

display:none;
}

.hmain {
float:left;
background:url(bgcolor.gif)repeat-x;
width:120px;
margin-left:1px;
}
.hmain a {

color:#fff;
background:url(abgcolor.gif)no-repeat;

background-position:3pxcenter;
}
.hmain li a {

color:#000;

background:none;
}
.hmain ul {

display:none;
}

下面是关键的js部分的代码。对于初学jquery的我来说。第一次这样的代码还真有点感觉费劲。特别是所谓的匿名方法或者说函数。代码如下
//menujavascript事件
$(document).ready(
     function()
     {
        //页面加DOM载完成之后，执行的代码
        $(".main > a").click(
       function ()
       {
        //找到主菜单项对应的子菜单项
        var ulnode = $(this).next("ul");
        //当用户点击主菜单项，显示子菜单项
        //在此之前先判断子菜单项是否已经被用户点击过一次，即目前是否已经处于显示状态
        //下面是一种效果显示，不过不是非常美观，所以先注释了

        //下面是另外一种显示效果，具有动画的效果。主要是利用了jquery功能
        //当然在使用前也需要进行判断菜单条是处于隐藏还是显示状态



        //ulnode.toggle(500);





        ulnode.slideToggle(500);
        changeIcon($(this));
       }
      );
     //单独定义横向菜单的效果
     $(".hmain").hover(
         function()
         {
          $(this).children("ul").slideDown(500);
          changeIcon($(this).children("a"));

         },function(){$(this).children("ul").slideUp(500);
         changeIcon($(this).children("a"));
         });
     }
     );

//修改主菜单的指示图标
function changeIcon(mainNode)
{
if(mainNode)
{
  if(mainNode.css("background-image").indexOf("abgcolor.gif")>=0)
   {
   mainNode.css("background-image","url('aclickbgcolor.gif')");
   }
   else
   {
   mainNode.css("background-image","url('abgcolor.gif')");
   }
}
}

水中鸟lgl

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery的ul、li标签做菜单

一、ulli标签做菜单知识点：1．页面中的菜单项可以通过嵌套的ul和li来表示2．浏览器中ul和li元素默认情况文字都有圆点标识符,li元素会有缩进。 List-style属性值为none时,可以清除ul和li前面的小圆点。3．可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小,那么背景图会自动在横向和纵向
复制链接

扫一扫