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. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  2. [转]WPF的BitmapImage的文件无法释放及内存泄露的问题

    相信用过WPF的BitmapImage的,都在用类似这样的代码来解决文件无法删除的问题! 如果看看msdn上简单的描述,可以看到这样的说明: 如果 StreamSource 和 UriSource 均 ...

  3. JSP四个域对象的应用场景

    request 如果客户向服务器发请求,产生的数据,用户看完就没用了,像这样的数据就存在request域 比如新闻数据,属于用户看完就没用的 session 如果客户向服务器发请求,产生的数据,用户用 ...

  4. pytorch基础（1）

    基本数据类型和tensor import torch import numpy as np #array 和 tensor的转换 array = np.array([,]) tensorArray = ...

  5. 【转】浅析BFC及其作用

    1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...

  6. CF402D 【Upgrading Array】

    题目链接: CF402D 题目分析: 首先考虑一下怎么求每个数的分数.把每个数分解到最后会发现它的坏质因子对它分数的贡献是\(-1\),好质因子对它分数的贡献是\(1\),那么最后的分数就是好质因数- ...

  7. 使用 data-* 属性来嵌入自定义数据：

    <!DOCTYPE html> <html> <head> <script> function showDetails(animal) { var an ...

  8. 安装elasticsearch-head插件

    安装node ###下载 wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz ### 解压 tar xvf nod ...

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

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

  10. vue swiper点击后返回不能自动播放

    解决方法: 在返回时重新开启轮播 组件中: <swiper :options="swiperOption" ref="mySwiper" :class=& ...