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

　　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. ssh修改端口号并进行远程访问

    ssh的访问如果都利用22端口,则会容易被攻击,修改一个端口号可增强一定的安全性 1. 修改配置文件sshd_config里端口号 [root@test ~]# vi /etc/ssh/sshd_co ...

  2. git clone的

    git clone git@e.coding.net:wudi360/*******.git

  3. MySQL 操作总结

    1. 数据库级别操作 1.1 创建数据库 CREATE DATABASE db1 default charset utf8 collate utf8_general_ci; 1.2 删除数据库 DRO ...

  4. .Net Core 部署到 CentOS7 64 位系统中的步骤

    建议使用 root 管理员账户操作 1.安装工具 1.apache 2..Net Core(dotnet-sdk-2.0) 3.Supervisor(进程管理工具,目的是服务器一开机就启动服务器 上发 ...

  5. jersey中的 404 Not Found 错误。

    把资源定义到com.diandaxia.rest包里 就可以了: 当然也可以使用注册的方式,注册到jersey框架里.当一个类 必须再com.diandaxia.rest 包之外的话,又不想 扩大 自 ...

  6. csu 1114平方根大搜索(JAVA大小数+二分)

    1114: 平方根大搜索 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 182  Solved: 96[Submit][Status][Web Boar ...

  7. [BZOJ3150][Ctsc2013]猴子 期望dp+高斯消元

    3150: [Ctsc2013]猴子 Time Limit: 20 Sec  Memory Limit: 256 MBSec  Special JudgeSubmit: 163  Solved: 10 ...

  8. Lunix含Ubuntu使用总结

    错误 鼠标闪烁解决 系统设置->显示—>未知显示器->关闭->应用->选择当前配置 提示sudo: unable to resolve host ,亦即无法解析主机. 原 ...

  9. oracle创建简单的包

    --规范 create or replace package test_pkg is --test_pkg为包名 procedure showMessage; --声明一个过程 function my ...

  10. viewpager切换耗时控制

    原文地址https://my.oschina.net/javalover/blog/179003 public class FixedSpeedScroller extends Scroller { ...