实例：用jQuery实现垂直和水平下拉 菜单

时间：2023-01-23 20:36:49

主要是利用jQuery来实现垂直菜单和水平菜单。实现效果如图：

实例：用jQuery实现垂直和水平下拉 菜单

第一步，创建一个HTML文件，如图，包含两个ul。当然把jquery库也引入进去了。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>

    <link rel="stylesheet" href="app.css" type="text/css">

    <title>menu</title>

</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>

    <br/>

    <br/>

    <br/>

    <!--水平菜单-->

    <ul>

        <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>

<script type="text/javascript" src="app.js"></script>

</body>

</html>

menu.html

第二步，给菜单设置样式，包括颜色，背景图片，a标签等等的样式。

ul,li{

    list-style: none;

}

ul{

    padding:;

    margin:;

}

.main,.hmain{

    background-image:url(img/1.png) ;

    background-repeat: repeat-x;

    width: 100px;

}

li{

    background-color: #cccccc;

}

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("img/y.png");

    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-right: 1px;

}

app.css

第三步，就是利用jQuery给菜单设置响应效果了。其中，垂直菜单的原理是：当点击这个a标签时，把子菜单的display属性变为block，再次点击，更改为none。这里可以用if-else的条件判断，然后设置css（）方法，或者用hide/show/toggle，slideDown/slideUp方法。而水平菜单，用到的是hover属性，划过ul时的效果显示状态。

最后就是小图标的变化。用css修改方法即可。

$(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.show();

       //ulNode.hide();

       //ulNode.toggle(3000);//数字，slow，normal，fast

       //ulNode.slideDown();

       //ulNode.slideUp();

       ulNode.slideToggle();

       changeIcon($(this));

   });

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

        $(this).children("ul").slideDown();

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

    },function(){

        $(this).children("ul").slideUp();

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

    })

});

function changeIcon(mainNode){

    if(mainNode.css("background-image").indexOf("y.png")>=0){

        mainNode.css("background-image","url('img/x.png')");

    }else{

        mainNode.css("background-image","url('img/y.png')");

    }

}

app.js

如需工程文件，可以留下邮箱。。

　　

实例：用jQuery实现垂直和水平下拉 菜单的更多相关文章

  1. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  2. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  3. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  4. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  5. jQuery实现多级手风琴树形下拉菜单（源码）

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  6. JQuery -&amp&semi;gt&semi; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  7. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  8. &lbrack;jquery&rsqb;添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

  9. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

随机推荐

  1. Spring官网改版后下载

    Spring官网改版后找了好久都没有找到直接下载Jar包的链接,下面汇总些网上提供的方法,亲测可用. 1.直接输入地址,改相应版本即可:http://repo.springsource.org/lib ...

  2. php实现文件下载

    <?php $filename = '路径+实际文件名'; //文件的类型 header('Content-type: application/octstream'); //下载显示的名字 he ...

  3. win32汇编hello world

    下载:http://www.masm32.com/ 安装masm32 建一个Var.bat文件并运行 @echo offset include=E:\masm32\includeset lib=E:\ ...

  4. 0814JavaScript简介、基本语法、运算符、转换

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  5. chrome加载本地js

    通过chrome的扩展功能,可以执行一些本地脚本. 1.如何添加扩展程序 具体做法是:chrome -> 设置 -> 扩展程序 -> 加载正在开发的扩展程序 图(1.1) 图(1.2 ...

  6. AIDL使用以及原理分析

    AIDL使用以及IPC原理分析(进程间通信) 概要 为了大家能够更好的理解android的进程间通信原理,以下将会从以下几个方面讲解跨进程通讯信: 1. 必要了解的概念 2. 为什么要使用aidl进程 ...

  7. git与eclipse集成之clone远程仓库到本地

    1. Git与Eclipse集成 1.1. Clone远程仓库到本地 1.1.1.        获取远程仓库地址(选择北京,访问速度比深圳快) 1.1.2.        将远程仓库导入到Eclip ...

  8. 改变javascript函数内部this指针指向的三种方法

    在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. function a() { alert( ...

  9. 深入分析escape&lpar;&rpar;、encodeURI&lpar;&rpar;、encodeURIComponent&lpar;&rpar;的区别及示例

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...

  10. 1-scala基础

    1.scala ①定义:Scala设计的初衷是要集成面向对象编程和函数式编程的各种特性.Scala运行于Java平台(Java虚拟机),并兼容现有的Java程序. ②特点:优雅.简洁.一行代码抵得上多 ...

相关文章