1、垂直菜单布局

2、垂直菜单实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        $(document).ready(function(){

           $(".main>a").click(function(){

               var ulNode = $(this).next("ul");

               // if(ulNode.css("display")=="none"){

               //     ulNode.css("display", "block");

               // }else{

               //     ulNode.css("display","none");

               // }/*这种方法有些繁琐。*/

               // ulNode.hide();/*隐藏*/

               // ulNode.show();/*显示*/

               //ulNode.toggle(500);/*显示/隐藏 这种是相对上面方便的方法*/

                                /*

                                * 数字、slow、normal、fast

                                * */

               // ulNode.slideDown();

               // ulNode.slideUp();//这两种方法也需要自己进行判断。

               ulNode.slideToggle();//这种方法就不需要自己进行判断了。

           });/*用尖角号防止点击子菜单也会执行上面函数*/

        });

    </script>

    <style>

        ul,li{

            list-style: none;

        }

        ul{

            padding:0px;/*覆盖子菜单的缩进*/

            margin:0px;/*防止ie浏览器的问题。*/

        }

        .main{

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

            background-repeat: repeat-x;

            width:100px;

        }

        li{

            background-color:#eeeeee;

        }

        a{

            text-decoration: none;

            padding-left:20px;

            display:block;

            width:80px;

            padding-top:3px;

            padding-bottom:3px;

        }

        .main>a{

            color:white;

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

            background-repeat:no-repeat;

            background-position:3px center;/*距离左面3px，垂直方向居中*/

        }

        .main li a{

            color:black;

            background-image:none;

        }

        .main ul{

            display:none;

        }

    </style>

</head>

<body>

<ul>

    <li class="main">

        <a href="#">菜单1</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="main">

        <a href="#">菜单2</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="main">

        <a href="#">菜单3</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

</ul>

</body>

</html>

3、水平菜单的实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        $(document).ready(function () {

            isClick = 1;

            /*为了防止多次点击而设置的变量*/

            $(".main>a").click(function () {

                // 这里有个非常nice的写法：$(".main>a,.hmain>a").click(function(){

                // if (isClick) {

                //     isClick = 0;

                    var ulNode = $(this).next("ul");

                    ulNode.stop(true,false).slideToggle();/*详情查询stop函数的用法啊，取消回调函数，两个参数第一个参数决定是否取消当前正在执行的动画，

                                                            第二个参数决定是否立即完成当前正在执行的动画。

                                                            我们在这里使用的动画效果不足以用到第一个参数，所以这里true和false都是可以的。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　这里实现了如何避免动画重复的功能
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　*/

                    /*插两个标签：hover、stop标签*/

                    changeIcon($(this));

                    // setTimeout(function () {

                    //     isClick = 1;

                    // }, 1000);

                    // /*如何处理多次点击造成的之后一直执行动作的方法。

                    //     这里用的是toggle()函数所以没法分开两个动作的处理

                    //     比如在还没展开完毕的时候再次点击没有实现直接收回动作。*/

                // }

            });

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

            //     $(this).children("ul").slideToggle();

            // });//这是一种比较简单的方法，下面还有一种很奇妙的方法，给hover两个函数对象作为参数。

            isHover = 1;

            /*为了防止多次点击而设置的变量*/

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

                    $(this).children("ul").stop(false,false).slideDown(500);

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

                    /*点击的是main的子元素a标签之后执行的动作。*/

                }

                , function () {

                    $(this).children("ul").stop(false,false).slideUp(500);

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

                }

            );

            /*jQuery官方文档中有介绍，这是有两个参数时的方法。

        一个参数是鼠标放上去的时候有的动作，第二个参数时鼠标离开时将要执行的动作。*/

        });

        function changeIcon(mainNode) {

            if (mainNode) {

                if (mainNode.css("background-image").indexOf("collapse.gif") >= 0) {/*indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。*/

                    mainNode.css("background-image", "url('images/expanded.gif')");

                } else {

                    mainNode.css("background-image", "url('images/collapse.gif')");

                }

            }

        }

    </script>

    <style>

        ul, li {

            list-style: none;

        }

        ul {

            padding: 0px; /*覆盖子菜单的缩进*/

            margin: 0px; /*防止ie浏览器的问题。*/

        }

        .main, .hmain {

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

            background-repeat: repeat-x;

            width: 100px;

        }

        li {

            background-color: #eeeeee;

        }

        a {

            text-decoration: none;

            padding-left: 20px;

            display: block;

            width: 80px;

            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; /*距离左面3px，垂直方向居中*/

        }

        .main li a, .hmain li a {

            color: black;

            background-image: none;

        }

        .main ul, .hmain ul {

            display: none;

        }

        .hmain {

            float: left;

            margin-right: 3px;

        }

    </style>

</head>

<body>

<ul>

    <li class="main">

        <a href="#">菜单1</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="main">

        <a href="#">菜单2</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="main">

        <a href="#">菜单3</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <br/>

    <li class="hmain">

        <a href="#">菜单1</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="hmain">

        <a href="#">菜单2</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

    <li class="hmain">

        <a href="#">菜单3</a>

        <ul>

            <li><a href="">子菜单1</a></li>

            <li><a href="">子菜单2</a></li>

        </ul>

    </li>

</ul>

</body>

</html>

前端（jQuery）（9）-- jQuery菜单的更多相关文章

  1. 知问前端——概述及jQuery UI

    知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...

  2. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  3. 前端学习之jquery/下

    前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...

  4. 前端学习之jquery

    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...

  5. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  6. Python学习（二十三）—— 前端基础之jQuery

    转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...

  7. 前端基础之jQuery入门 01

    jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...

  8. 第一百七十七节，jQuery，知问前端--概述及 jQuery UI

    jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...

  9. 前端基础 之 jQuery

    浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...

  10. 前端(5)之jQuery

    前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...

随机推荐

  1. Entity Framework Code First 模式-建立一对一联系

    使用的例子为教室(ClassRoom),教室里的多媒体设备(Device),一个教室里有一套多媒体设备,一套多媒体设备只放在一个教室里. 1.Data Annotations方式 需要在任意一方的主键 ...

  2. FileCloud 的原理简述&自己搭建文件云

    FileCloud 的原理简述&自己搭建文件云 copyright(c) by zcy 关于如何使用IIS创建asp服务,请读者自行研究 注:不要忘记添加入站规则 代码的存储: 根目录 fil ...

  3. 使用JavaScript分别实现4种样式的九九乘法表（1X1分别在左上、左下、右上、右下）

    第1种样式(左上角):如下图所示 具体实现代码如下所示: 第2种样式(左下角):如下图所示 具体实现代码如下所示: 第3种样式(右上角):如下图所示 具体实现代码如下所示: 第4种样式(右下角):如下 ...

  4. AndroidStudio 添加翻译插件

    添加方式 第一步 在AndroidStudio的菜单栏里找到 File > Settings > 点击 . 第二步 点击Plugins > 在点击Marketplace 等待插件列表 ...

  5. 动态设置背景图片，class，style

    1.动态设置背景图片<div v-if='img ' :style="{background: 'url('+ img +')',backgroundSize:cover }" ...

  6. [洛谷P1966] 火柴排队

    题目链接: 火柴排队 题目分析: 感觉比较顺理成章地就能推出来?似乎是个一眼题 交换的话多半会往逆序对上面想,然后题目给那个式子就是拿来吓人的根本没有卵用 唯一的用处大概是告诉你考虑贪心一波,很显然有 ...

  7. Template-Thymeleaf：Thymeleaf

    ylbtech-Template-Thymeleaf:Thymeleaf 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://www.thyme ...

  8. 基于SpringBoot+AntDesign的快速开发平台，JeecgBoot 2.0.2 版本发布

    Jeecg-Boot 是一款基于SpringBoot+代码生成器的快速开发平台! 采用前后端分离架构:SpringBoot,Ant-Design-Vue,Mybatis,Shiro,JWT. 强大的代 ...

  9. Thrift（PHP）入门无错篇章（一）

    一.安装篇 博主注:截至2017-10-10,官网上thrift最新版0.10.0一直无法成功编译.所以,请选择0.9.3版本,避免走各种弯路: wget http://apache.fayea.co ...

  10. 密码学笔记(4)——RSA的其他攻击

    上一篇详细分析了几种分解因子的算法,这是攻击RSA密码最为明显的算法,这一篇中我们考虑是否有不用分解模数n就可以解密RSA的密文的方法,这是因为前面也提到,当n比较大的时候进行分解成素数的乘积是非常困 ...