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

　　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. 8.Python3标准库--数据持久存储与交换

    ''' 持久存储数据以便长期使用包括两个方面:在对象的内存中表示和存储格式之间来回转换数据,以及处理转换后数据的存储区. 标准库包含很多模块可以处理不同情况下的这两个方面 有两个模块可以将对象转换为一 ...

  2. 提高spring boot jpa性能（译）

    Spring Data JPA为Spring应用程序提供了数据访问层的实现.这是一个非常方便的组件,因为它不会重新发明每个新应用程序的数据访问方式,因此您可以花更多时间来实现业务逻辑.使用Spring ...

  3. HDU 2053 Switch Game(开灯问题，完全平方数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2053 题目大意:灯开始是关着的,有n盏灯,i从1数到n每当灯的序号是i的倍数的时候就对灯进行一次操作( ...

  4. Python股票信息抓取~

    本来想把股票的涨跌抓取出来,用汇通网的股票为例,就找了国际外汇为例. 页面里有xhr请求,并且每个xhr的url请求的 http://api.q.fx678.com/history.php?symbo ...

  5. hdu 5468(dfs序+容斥原理)

    Puzzled Elena Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  6. 【LOJ】 #2132. 「NOI2015」荷马史诗

    题解 k叉哈夫曼树,但是没有了二叉那样的最后一定能合并成一个树根的优秀性质,我们就不断模拟操作看看到了哪一步能用的节点数< k,然后先拿这些节点数合并起来 然后就可以k个k个合并了,大小一样先拿 ...

  7. 【BZOJ】4311: 向量（线段树分治板子题）

    题解 我们可以根据点积的定义,垂直于原点到给定点构成的直线作一条直线,从正无穷往下平移,第一个碰到的点就是答案 像什么,上凸壳哇 可是--动态维护上凸壳? 我们可以离线,计算每个点能造成贡献的一个询问 ...

  8. Python全栈开发之10、网络编程

    网络编程就是如何在程序中实现两台计算机的通信,而两台计算机间的通信其实就是两个进程间的通信,进程间的通信主要通过socket(套接字)来描述ip地址(主机)和端口(进程)来实现的,因此我们学习网络编程 ...

  9. VS code配置docker的shell环境

    今天尝试了下使用docker来做虚拟机,几番折腾后终于搞定可以用了,但是想着每次都要在命令行敲半天也太恶心了,所以就找了一下可视化的管理工具 首先说下,我的docker主机环境是windows10,用 ...

  10. Mysql Federated Server 示例

    Federated存储引擎访问在远程数据库的表中的数据,而不是本地的表.创建一个Federated表的时候,服务器在数据库目录创建一个表定义文件.无其它表被创建,因为实际的数据在一个远程数据库上.这不 ...