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. Android开发 EditText的开发记录

    设置显示内容与隐藏内容 if (isChecked){ editPassword.setTransformationMethod(HideReturnsTransformationMethod.get ...

  2. WPF 免费控件库

    https://github.com/Infragistics/InfragisticsThemesForMicrosoftControls 几款WPF免费控件库,不过运行源码时需要下载三个DLL , ...

  3. Apache服务器中运行CGI程序的方法,文中以Perl脚本作为示例

    关于apache与CGI在这里就不解释了． 1.apache下面以2.0.63为例介绍运行CGI程序的配置.(http://www.nklsyy.com) 2.下载Windows下的Perl解释器Ac ...

  4. ios与android设备即时语音互通的录音格式预研说明

    本文虽属原创,但是内容都是来自于网络,参考了大家的微博,以及论坛的总结. 在做语音对讲的时候,将会碰到录制语音格式的问题,因为要考虑自己开发设备的支持的格式,还要考虑其他设备操作系统的支持的格式,以及 ...

  5. MyEclipse使用总结——Maven项目如何启动运行发布到tomcat中[转]

    前面两篇文章: 新建maven框架的web项目 以及 将原有项目改成maven框架 之后,我们已经有了maven的项目 那么 maven项目到底怎么启动呢 如果我们直接在myeclipse中按以前的启 ...

  6. Windows安全证书生成方法（开发者证书）

    首先,查看本机安装的证书可在“运行”中输入:certmgr.msc 一.win8.8.1.win10系统,使用管理员powershell创建证书: (1)利用如下命令来创建证书并获取到其指纹 New- ...

  7. Android基础控件TextClock和Chronometer的使用

    1.简介 DigitalClock, TextClock,AnalogClock,Chronometer其中DigitalClock和AnalogClock废弃了! TextClock是在Androi ...

  8. Hadoop 初体验

    Hadoop 是一个基于谷歌发表的几篇论文而开发的一个分布式系统基础架构,用户可在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop现在已经成了大数据的代 ...

  9. Jeecg-Boot 2.0 版本发布，基于Springboot+Vue 前后端分离快速开发平台

    目录 Jeecg-Boot项目简介 源码下载 升级日志 Issues解决 v1.1升级到v2.0不兼容地方 系统截图 Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发 ...

  10. yum 安装配置

    光盘挂载:mount /dev/cdrom /mnt/cdrom 配置文件路径:vim /etc/yum.repos.d/dvd.repo 配置文件内容:[dvd]name=dvdbaseurl=fi ...