1、垂直菜单布局

2、垂直菜单实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-3.3.1.min.js"></script>
  7.     <script>
  8.         $(document).ready(function(){
  9.            $(".main>a").click(function(){
  10.                var ulNode = $(this).next("ul");
  11.                // if(ulNode.css("display")=="none"){
  12.                //     ulNode.css("display", "block");
  13.                // }else{
  14.                //     ulNode.css("display","none");
  15.                // }/*这种方法有些繁琐。*/
  16.                // ulNode.hide();/*隐藏*/
  17.                // ulNode.show();/*显示*/
  18.                //ulNode.toggle(500);/*显示/隐藏 这种是相对上面方便的方法*/
  19.                                 /*
  20.                                 * 数字、slow、normal、fast
  21.                                 * */
  22.                // ulNode.slideDown();
  23.                // ulNode.slideUp();//这两种方法也需要自己进行判断。
  24.                ulNode.slideToggle();//这种方法就不需要自己进行判断了。
  25.            });/*用尖角号防止点击子菜单也会执行上面函数*/
  26.         });
  27.     </script>
  28.     <style>
  29.         ul,li{
  30.             list-style: none;
  31.         }
  32.         ul{
  33.             padding:0px;/*覆盖子菜单的缩进*/
  34.             margin:0px;/*防止ie浏览器的问题。*/
  35.         }
  36.         .main{
  37.             background-image: url("images/title.gif");
  38.             background-repeat: repeat-x;
  39.             width:100px;
  40.         }
  41.         li{
  42.             background-color:#eeeeee;
  43.         }
  44.         a{
  45.             text-decoration: none;
  46.             padding-left:20px;
  47.             display:block;
  48.             width:80px;
  49.             padding-top:3px;
  50.             padding-bottom:3px;
  51.         }
  52.         .main>a{
  53.             color:white;
  54.             background-image: url("images/collapsed.gif");
  55.             background-repeat:no-repeat;
  56.             background-position:3px center;/*距离左面3px，垂直方向居中*/
  57.         }
  58.         .main li a{
  59.             color:black;
  60.             background-image:none;
  61.         }
  62.         .main ul{
  63.             display:none;
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68. <ul>
  69.     <li class="main">
  70.         <a href="#">菜单1</a>
  71.         <ul>
  72.             <li><a href="">子菜单1</a></li>
  73.             <li><a href="">子菜单2</a></li>
  74.         </ul>
  75.     </li>
  76.     <li class="main">
  77.         <a href="#">菜单2</a>
  78.         <ul>
  79.             <li><a href="">子菜单1</a></li>
  80.             <li><a href="">子菜单2</a></li>
  81.         </ul>
  82.     </li>
  83.     <li class="main">
  84.         <a href="#">菜单3</a>
  85.         <ul>
  86.             <li><a href="">子菜单1</a></li>
  87.             <li><a href="">子菜单2</a></li>
  88.         </ul>
  89.     </li>
  90.  
  91. </ul>
  92. </body>
  93. </html>

3、水平菜单的实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-3.3.1.min.js"></script>
  7.     <script>
  8.         $(document).ready(function () {
  9.             isClick = 1;
  10.             /*为了防止多次点击而设置的变量*/
  11.             $(".main>a").click(function () {
  12.                 // 这里有个非常nice的写法：$(".main>a,.hmain>a").click(function(){
  13.                 // if (isClick) {
  14.                 //     isClick = 0;
  15.                     var ulNode = $(this).next("ul");
  16.                     ulNode.stop(true,false).slideToggle();/*详情查询stop函数的用法啊，取消回调函数，两个参数第一个参数决定是否取消当前正在执行的动画，
  17.                                                             第二个参数决定是否立即完成当前正在执行的动画。
  18.                                                             我们在这里使用的动画效果不足以用到第一个参数，所以这里true和false都是可以的。
    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　这里实现了如何避免动画重复的功能
    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　*/
  19.                     /*插两个标签：hover、stop标签*/
  20.                     changeIcon($(this));
  21.                     // setTimeout(function () {
  22.                     //     isClick = 1;
  23.                     // }, 1000);
  24.                     // /*如何处理多次点击造成的之后一直执行动作的方法。
  25.                     //     这里用的是toggle()函数所以没法分开两个动作的处理
  26.                     //     比如在还没展开完毕的时候再次点击没有实现直接收回动作。*/
  27.                 // }
  28.             });
  29.             // $(".hmain").hover(function(){
  30.             //     $(this).children("ul").slideToggle();
  31.             // });//这是一种比较简单的方法，下面还有一种很奇妙的方法，给hover两个函数对象作为参数。
  32.             isHover = 1;
  33.             /*为了防止多次点击而设置的变量*/
  34.  
  35.             $(".hmain").hover(function () {
  36.                     $(this).children("ul").stop(false,false).slideDown(500);
  37.                     changeIcon($(this).children("a"));
  38.                     /*点击的是main的子元素a标签之后执行的动作。*/
  39.                 }
  40.                 , function () {
  41.                     $(this).children("ul").stop(false,false).slideUp(500);
  42.                     changeIcon($(this).children("a"));
  43.                 }
  44.             );
  45.             /*jQuery官方文档中有介绍，这是有两个参数时的方法。
  46.         一个参数是鼠标放上去的时候有的动作，第二个参数时鼠标离开时将要执行的动作。*/
  47.  
  48.         });
  49.  
  50.         function changeIcon(mainNode) {
  51.             if (mainNode) {
  52.                 if (mainNode.css("background-image").indexOf("collapse.gif") >= 0) {/*indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。*/
  53.                     mainNode.css("background-image", "url('images/expanded.gif')");
  54.                 } else {
  55.                     mainNode.css("background-image", "url('images/collapse.gif')");
  56.                 }
  57.             }
  58.         }
  59.     </script>
  60.     <style>
  61.         ul, li {
  62.             list-style: none;
  63.         }
  64.  
  65.         ul {
  66.             padding: 0px; /*覆盖子菜单的缩进*/
  67.             margin: 0px; /*防止ie浏览器的问题。*/
  68.         }
  69.  
  70.         .main, .hmain {
  71.             background-image: url("images/title.gif");
  72.             background-repeat: repeat-x;
  73.             width: 100px;
  74.         }
  75.  
  76.         li {
  77.             background-color: #eeeeee;
  78.         }
  79.  
  80.         a {
  81.             text-decoration: none;
  82.             padding-left: 20px;
  83.             display: block;
  84.             width: 80px;
  85.             padding-top: 3px;
  86.             padding-bottom: 3px;
  87.         }
  88.  
  89.         .main > a, .hmain > a {
  90.             color: white;
  91.             background-image: url("images/collapsed.gif");
  92.             background-repeat: no-repeat;
  93.             background-position: 3px center; /*距离左面3px，垂直方向居中*/
  94.         }
  95.  
  96.         .main li a, .hmain li a {
  97.             color: black;
  98.             background-image: none;
  99.         }
  100.  
  101.         .main ul, .hmain ul {
  102.             display: none;
  103.         }
  104.  
  105.         .hmain {
  106.             float: left;
  107.             margin-right: 3px;
  108.         }
  109.     </style>
  110. </head>
  111. <body>
  112. <ul>
  113.     <li class="main">
  114.         <a href="#">菜单1</a>
  115.         <ul>
  116.             <li><a href="">子菜单1</a></li>
  117.             <li><a href="">子菜单2</a></li>
  118.         </ul>
  119.     </li>
  120.     <li class="main">
  121.         <a href="#">菜单2</a>
  122.         <ul>
  123.             <li><a href="">子菜单1</a></li>
  124.             <li><a href="">子菜单2</a></li>
  125.         </ul>
  126.     </li>
  127.     <li class="main">
  128.         <a href="#">菜单3</a>
  129.         <ul>
  130.             <li><a href="">子菜单1</a></li>
  131.             <li><a href="">子菜单2</a></li>
  132.         </ul>
  133.     </li>
  134.  
  135.     <br/>
  136.     <li class="hmain">
  137.         <a href="#">菜单1</a>
  138.         <ul>
  139.             <li><a href="">子菜单1</a></li>
  140.             <li><a href="">子菜单2</a></li>
  141.         </ul>
  142.     </li>
  143.     <li class="hmain">
  144.         <a href="#">菜单2</a>
  145.         <ul>
  146.             <li><a href="">子菜单1</a></li>
  147.             <li><a href="">子菜单2</a></li>
  148.         </ul>
  149.     </li>
  150.     <li class="hmain">
  151.         <a href="#">菜单3</a>
  152.         <ul>
  153.             <li><a href="">子菜单1</a></li>
  154.             <li><a href="">子菜单2</a></li>
  155.         </ul>
  156.     </li>
  157. </ul>
  158. </body>
  159. </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. 动态设置背景图片，class，style

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

  2. jquery ajax 放在重复点击事件beforeSend方法

    防止重复数据在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数 ...

  3. JavaScript事件(随笔)

    1. Javascript事件介绍 JavaScript中的事件和现实生活中的事件类似,现实生活中发生的一些事情,例如:交通事件,当这些事情发生时,我们需要提供处理方案: 在JavaScript中事件 ...

  4. Python爬取b站任意up主所有视频弹幕

    爬取b站弹幕并不困难.要得到up主所有视频弹幕,我们首先进入up主视频页面,即https://space.bilibili.com/id号/video这个页面.按F12打开开发者菜单,刷新一下,在ne ...

  5. HBase Ganglia

  6. C语言源代码——计算任何一天是星期几

    代码写的不严谨. 网上也有很多计算任何一天是星期几的C语言源代码,不过,有些代码含有一点点小错误.像闰年的分辨啊,或者是每个月的天数,再或者星期的计算公式,都是比较细微的环节,出一点错误都有可能导致结 ...

  7. Angularjs 1 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

  8. [转]C# 委托、事件，lamda表达式

    1. 委托Delegate C#中的Delegate对应于C中的指针,但是又有所不同C中的指针既可以指向方法,又可以指向变量,并且可以进行类型转换, C中的指针实际上就是内存地址变量,他是可以直接操作 ...

  9. Werkzeug库——wrappers模块

    Werkzeug库中的wrappers模块主要对request和response进行封装.request包含了客户端发往服务器的所有请求信息,response包含了web应用返回给客户端的所有信息.w ...

  10. dump与load

    dump与load 简化了dumps与loads