横纵向的菜单效果，点击纵向菜单显示其子菜单。鼠标指向横菜单的时候。显示其子菜单，鼠标离开，子菜单隐藏。

　　HTML代码：

<span style="font-size:18px;"><!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>横纵向的菜单</title>

    <link href="css/menu.css" rel="stylesheet" />

    <script src="js/JQuery.js"></script>

    <script src="js/menu.js"></script>

</head>

<body>

    <ul>

        <li class="main"><a href="#">菜单项1</a>

            <ul>

                <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 />

    <br />

    <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>

</html>

</span>

　　CSS代码：

<span style="font-size:18px;">body {

}

ul,li{

    /*清除菜单前面的点和圈*/

    list-style:none;

}

ul {

    padding:0;

    margin:0;

}

.main ,.hmain {

    background-image:url(../images/title.gif);

    background-repeat:repeat-x;

    width:100px;

}

li{

    background-color:#999;

}

a{

    /*取消全部的下划线*/

       text-decoration:none;

       padding-left:15px;

       display:block ;   /*让a标签充满这个区域*/

       /*针对IE6*/

       display:inline-block;

       width:85px;

       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;

}

.main ul , .hmain ul{

    display:none;

}

.hmain{

    float:left;

    margin-left:1px;

}</span>

　　JQuery代码：

<span style="font-size:18px;">$(function () {

    $(".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");//slow, fast, 500

        //ulNode.hide();

        //ulNode.toggle();//显示和隐藏。自己主动推断

        //ulNode.slideDown("slow");//显示

        //ulNode.slideUp();//隐藏

        ulNode.slideToggle();

        changeIcon($(this));

    });

    $(".hmain").hover(function () {

        $(this).children("ul").show("fast");

        changeIcon($(this).children("a"));

    }, function () {

        $(this).children("ul").hide("fast");

        changeIcon($(this).children("a"));

    });

});

//改动主菜单的指示图标

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)");

        }

    }

}</span>

1.HTML总结：

1.页面中的菜单项能够通过嵌套ul和li来表示

2.CSS总结：

1.list-style属性为none时能够清除ul和li前面的小圆点

2.能够使用background-repeat来控制背景图的反复填充方式

3. text-decoration属性值为none时，能够取消文字上的下划线

4,.display的值为none能够用于隐藏元素

3.JQuery总结：

1.  .main a 和 .main >a不同之处是。前者选择使用了.main的这个class的元素内部的全部的a节点，后者仅仅选择了.main的子节点中的a节点

2.  show，hide方法能够用于显示或隐藏元素，。没有參数时的效果和改动CSS的display属性效果一样。

參数能够是单位为毫秒的数字。或者是‘slow’。‘normal’，‘fast’这三个文字都能够来控制完毕显示或隐藏须要的时间。

3.toggle方法更为强大，能够省去推断元素是显示还是隐藏的状态。能够让显示的元素隐藏起来，能够让隐藏的元素显示出来，參数用法和show，hide同样。

Jquery实战——横纵向的菜单的更多相关文章

  1. 利用jQuery设计横/纵向菜单

    在网页中,菜单扮演着"指路者"的角色.怎样设计一个人性化的菜单呢.以下小编带着大家一起做. 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  2. JQuery实战总结二 横向纵向菜单下拉效果图

    记得以前在浏览了大多数网站的上面发现很多下拉的导航栏,觉得特别好玩,毕竟咱们是学习编程的嘛,对这下拉的效果还是挺感兴趣的,这种淡入淡出,随着鼠标移动的位置不同.有无等而出现不同的效果,给用户以神美感. ...

  3. JQuery实战---窗口效果

    在前面的相关博文中,小编对jquery的相关知识进行了简单的总结,关于jquery的很多小的知识点,都需要我们自己去动手和实践,一行行代码都需要我们自己亲自动手去敲,今天我们继续来学习jquery的相 ...

  4. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  5. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  6. jquery 只有二级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

  8. JQUERY 插件开发——MENU（导航菜单）

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  9. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

随机推荐

  1. Effective C++学习进阶版

    记得前段时间又一次拿起<Effective C++>的时候,有种豁然开朗的感觉,所以翻出了我第一遍读时做的笔记.只做参考以及查阅之用.如有需要请参阅<Effective C++> ...

  2. MySql学习笔记——触发器

    今天又学习了一下mysql触发器的相关知识,对此做了一些笔记和总结. 定义及作用 触发器是一个被指定关联到一个表的数据对象,触发器不需要调用,当对一个表的特别事件出现时,它就会被激活.触发器的代码也是 ...

  3. linux sed命令查询结果前后批量追加内容(html文件批量修改css,js等文件路径)

    1.需求:linux使用shell命令查询结果前后批量追加内容 例如:我需要在当前目录下所有的css文件路径前追加域名 我想的是用sed替换去实现,鲍哥的思路是用for循环 1.1方法1:鲍哥的for ...

  4. go接口及嵌入类型例子

    书上看的.慢慢领会.. package main import ( "fmt" ) type notifier interface { notify() } type user s ...

  5. vs2013设置语言

    设置语言格式 [工具]-[选项]-[国际化]

  6. shell多线程,wait

    文章来源,wait的使用效果还是不错的 最近在使用shell做一些部署工作,在使用过程中,效率一直不高.想提高效率,经过分析发现,并不是所有操作都是需要串行的,一些操作是可以进行并行操作的.经过学习, ...

  7. Linux文件系统的详解

    这里以 EXT2 文件系统为例 在Linux下,一个磁盘的最前面是MBR,大小为512Byte 在每一个分区下,第一部分是boot sector,接下来是super block,再接下来是inode, ...

  8. 【51nod】1244 莫比乌斯函数之和

    题解 求积性函数的前缀和?杜教筛! 这不给一发杜教筛入门必备之博客= = https://blog.csdn.net/skywalkert/article/details/50500009 好了,然后 ...

  9. HashMap碰撞问题

    HashMap是最常用的集合类框架之一,它实现了Map接口,所以存储的元素也是键值对映射的结构,并允许使用null值和null键,其内元素是无序的,如果要保证有序,可以使用LinkedHashMap. ...

  10. 长沙理工大学第十二届ACM大赛-重现赛 G - 跑路ing

    题目描述 vigoss18 辞职成功终于逃出了公司,但是没过太久,公司就发现vigoss18 的所作所为,于是派人来把他抓 回去. vigoss18 必须一直跑路,躲避公司的围捕.可以抽象的看成一个有 ...