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

　　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. C/C++——二维数组与指针、指针数组、数组指针（行指针）、二级指针的用法

    本文转载自:https://blog.csdn.net/qq_33573235/article/details/79530792 1. 二维数组和指针 要用指针处理二维数组,首先要解决从存储的角度对二 ...

  2. 用OpenSSL命令行生成证书文件

    用OpenSSL命令行生成证书文件 1.首先要生成服务器端的私钥(key文件): openssl genrsa -des3 -out server.key 1024 运行时会提示输入密码,此密码用于加 ...

  3. Robust Online Visual Tracking with a Single Convolutional Neural Network

    Abstract:这篇论文有三个贡献,第一提出了新颖的简化的结构损失函数,能保持尽量多的训练样本,通过适应模型输出的不确定性来减少跟踪误差累积风险. 第二是增强了普通的SGD,采用了暂时的选择策略来进 ...

  4. poj 1041(字典序输出欧拉回路)

    John's trip Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8641   Accepted: 2893   Spe ...

  5. 关闭windows 7的自动休眠功能

    powercfg -h off powercfg -h on https://www.tulaoshi.com/n/20160401/2075397.html powercfg -h on 该文章&l ...

  6. 洛谷 P1184高手之在一起 题解

    题目传送门 那位高手是谁啊?@jxpxcsh  QWQ. 这道题数据特别水,所以直接使用O(n*m),每读进一个m内的字符串,就扫一遍n的字符串.但注意地点字符串中有可能会有空格,所以这时候就要请出g ...

  7. 用于解析通过JS的escape函数加密过的数据

    function js_unescape($str) { $ret = ''; $len = strlen($str); for ($i = 0; $i < $len; $i++) { if ( ...

  8. FastReport.Net使用：[14]文本控件使用

    文本控件(Text)是FastReport中最常用的控件了,它可以是一行\多行文本.数据源的列.报表参数.汇总值.表达式,它还可以是以上任何元素的组合. 如何使用文本编辑器 1.双击文本框进入文本编辑 ...

  9. luogu P1965 转圈游戏

    题目描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置,……,依此 ...

  10. [BZOJ1040][ZJOI2008]骑士(环套树dp)

    1040: [ZJOI2008]骑士 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 5816  Solved: 2263[Submit][Status ...