js,jq,css多方面实现简易下拉菜单

最新推荐文章于 2019-08-05 00:22:24 发布
最新推荐文章于 2019-08-05 00:22:24 发布
阅读量501 收藏
点赞数
分类专栏： jQuery javascript css 文章标签： css javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_19327991/article/details/71785600
版权
jQuery 同时被 3 个专栏收录
30 篇文章 0 订阅
订阅专栏
javascript
28 篇文章 0 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏

效果图预览

这里写图片描述

一 、css实现

html代码部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html+css下拉菜单</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <ul class="menu">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">菜单一</a>
                <ul>
                    <li>内容一</li>
                    <li>内容一</li>
                    <li>内容一</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单二</a>
                <ul>
                    <li>内容二</li>
                    <li>内容二</li>
                    <li>内容二</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单三</a>
                <ul>
                    <li>内容三</li>
                    <li>内容三</li>
                    <li>内容三</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单四</a>
            </li>
        </ul>
    </body>
</html>

css部分

*{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    color: #000;
}

ul,li{
    list-style: none;
}

.menu{
    margin: 50px auto;
    width: 500px;
    height: 35px;
    background-color: #ccc;
    text-align: center;
    line-height: 35px;
}

.menu li{
    float: left;
    width: 20%;
    position: relative;
}

.menu li:hover ul{
    display: block;
}

.menu li a{
    display: block; 
}

.menu li a:hover{
    background-color: burlywood;
}

.menu li ul{
    display: none;
    position: absolute;
}

.menu li ul li{
    width: 100%;
    margin-top: 2px;
    background-color: darkgray;
}

.menu li ul li:hover{
    cursor: pointer;
    background-color: chartreuse;
}

二、js实现

html和js部分（实现方法一）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS下拉菜单</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <ul class="menu" id="menu">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">菜单一</a>
                <ul>
                    <li>内容一</li>
                    <li>内容一</li>
                    <li>内容一</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单二</a>
                <ul class="show">
                    <li>内容二</li>
                    <li>内容二</li>
                    <li>内容二</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单三</a>
                <ul class="hide">
                    <li>内容三</li>
                    <li>内容三</li>
                    <li>内容三</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单四</a>
            </li>
        </ul>
        <script type="text/javascript">             
            window.onload = function(){ 
                function $(id){
                    return typeof id == "string"?document.getElementById(id):id;    
                }

                var menu_li = $("menu").getElementsByTagName("li");                
                for(var i = 0; i < menu_li.length; i++){
                    menu_li[i].onmouseover = function(){
                        var ss = this.getElementsByTagName("ul")[0];
                        if(ss != undefined){
                            ss.style.display = "block";
                        }
                    }
                }

                for(var j = 0; j < menu_li.length; j++){
                    menu_li[j].onmouseout = function(){
                        var ssa = this.getElementsByTagName("ul")[0];
                        if(ssa != undefined){
                            ssa.style.display = "none";
                        }                   
                    }
                }               
            }                                   
        </script>
    </body>
</html>

html和js部分（实现方法二）

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            li {
                list-style: none;
                float: left;
            }

            #tabCon {
                clear: both;
            }

            #tabCon div {
                display: none;
            }

            #tabCon div.fdiv {
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="tanContainer">
            <div id="tab">
                <ul>
                    <li class="fli">标题一</li>
                    <li>标题二</li>
                    <li>标题三</li>
                    <li>标题四</li>
                </ul>
            </div>
            <div id="tabCon">
                <div class="fdiv">内容一</div>
                <div>内容二</div>
                <div>内容三</div>
                <div>内容四</div>
            </div>
        </div>
    </body>
    <script>
        function $(id){
            return typeof id=="string"?document.getElementById(id):id;
        }

        var EventUtil = {
            addHandler: function(element, type, handler) {
                if(element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if(element.attachEvent) {
                    element.attachEvent("on" + type + handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            removeHandler: function(element, type, handler) {
                if(element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if(element.detachEvent) {
                    element.detachEvent("on" + type + handler);
                } else {
                    element["on" + type] = null;
                }
            }
        }

        var tabs = $("tab").getElementsByTagName("li");
        var divs = $("tabCon").getElementsByTagName("div");    

        for(var i = 0; i < tabs.length; i++) {
            var set = function() {
                change(this);
            }
            EventUtil.addHandler(tabs[i], "click", set);
            //tabs[i].onclick=function(){change(this);}
        }

        function change(obj) {
            console.log(obj);
            for(var i = 0; i < tabs.length; i++) {
                if(tabs[i] == obj) {console.log(tabs[i]);
//                  tabs[i].style.display = "block";
                    divs[i].style.display = "block";
                } else {
//                  tabs[i].style.display = "none";
                    divs[i].style.display = "none";
                }
            }
        }
    </script>

</html>

css部分

*{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    color: #000;
}

ul,li{
    list-style: none;
}

.menu{
    margin: 50px auto;
    width: 500px;
    height: 35px;
    background-color: #ccc;
    text-align: center;
    line-height: 35px;
}

.menu li{
    float: left;
    width: 20%;
    position: relative;
}

.menu li a{
    display: block; 
}

.menu li a:hover{
    background-color: burlywood;
}

.menu li ul{
    display: none;
    position: absolute;
    left: 0;
}

.menu li ul li{
    width: 100%;
    margin-top: 2px;
    background-color: darkgray;
}

.menu li ul li:hover{
    cursor: pointer;
    background-color: chartreuse;
}

三、JQ实现

html和jq部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS下拉菜单</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <ul class="menu" id="menu">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">菜单一</a>
                <ul>
                    <li>内容一</li>
                    <li>内容一</li>
                    <li>内容一</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单二</a>
                <ul class="show">
                    <li>内容二</li>
                    <li>内容二</li>
                    <li>内容二</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单三</a>
                <ul class="hide">
                    <li>内容三</li>
                    <li>内容三</li>
                    <li>内容三</li>
                </ul>
            </li>
            <li>
                <a href="#">菜单四</a>
            </li>
        </ul>
        <script type="text/javascript" src="../../jq/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">             
            $(function(){
                $(".menu li").hover(function(){
                    $(this).children("ul").show();
                },function(){
                    $(this).children("ul").hide();
                });
            });
        </script>
    </body>
</html>

css部分

*{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    color: #000;
}

ul,li{
    list-style: none;
}

.menu{
    margin: 50px auto;
    width: 500px;
    height: 35px;
    background-color: #ccc;
    text-align: center;
    line-height: 35px;
}

.menu li{
    float: left;
    width: 20%;
    position: relative;
}

.menu li a{
    display: block; 
}

.menu li a:hover{
    background-color: burlywood;
}

.menu li ul{
    display: none;
    position: absolute;
    left: 0;
}

.menu li ul li{
    width: 100%;
    margin-top: 2px;
    background-color: darkgray;
}

.menu li ul li:hover{
    cursor: pointer;
    background-color: chartreuse;
}

以上就是通过css,js,jq三个方式实现简易下拉菜单的写法，有更好的写法欢迎你的指教

豆i浆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery下拉菜单的实现
北野的博客
09-09 373
实现效果 html代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下拉菜单</title> <script src="/hello
js,jq,css多方面实现简易下拉菜单功能
10-19
本篇文章将探讨如何利用JavaScript (js), jQuery (jq) 和 CSS 多方面实现简易下拉菜单功能。 首先，我们从HTML结构开始。在提供的代码片段中，可以看到一个`<ul>`元素作为主菜单容器，包含若干个`<li>`元素，每个`...
使用JQuery实现下拉菜单
05-18
使用JQuery实现横向纵向下拉菜单的效果，简单，一看就会
CSS、javascript、jquery三种方法实现下拉菜单
weixin_43264322的博客
01-05 345
1、纯CSS制作 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;html+css实现下拉菜单&lt;/title&gt; &lt;style type="text/css"&gt;
jQuery的9种方式实现下拉列表
车联网开发的博客
08-18 8033
利用基本动画、滑动动画、淡入淡出、自定义动画和事件实现下拉列表框。我只是将所学的知识统统实现了一遍，但是如果加上排列和组合不止这九种。（这么神奇，又在吹牛吧。）附代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
js,jq,css多方面实现简易下拉菜单功能.docx
01-19
js,jq,css多方面实现简易下拉菜单功能.docx
jq+css3弹动下拉菜单特效代码
03-20
【jq+css3弹动下拉菜单特效代码】是一种结合了jQuery库和CSS3技术的网页导航菜单设计，它能够为网站的交互体验增添生动有趣的元素。这种特效使得用户在鼠标悬停在菜单项上时，下拉菜单会以弹动的方式展开，增加了...
jquery和css实现图片效果下拉菜单
01-23
本文将深入探讨如何使用jQuery和CSS来实现这样的图片效果下拉菜单，以创建一个美观且易用的网页模板。 首先，我们来理解CSS（层叠样式表）在其中的角色。CSS主要用于定义网页的布局和样式，包括颜色、字体、大小...
jq实现下拉菜单效果 jq二级菜单效果.zip
06-19
jQuery（jq）作为一个轻量级的JavaScript库，因其简洁的API和丰富的插件，成为实现这种效果的首选工具。本示例将探讨如何使用jQuery实现一个二级下拉菜单的效果。 首先，我们需要理解HTML基础结构。一个简单的下拉...
Destiny / easyui的一些使用
zhuqiangqq的博客
08-22 263
var item = "/EasyUI/DemoServlet?type=" $(function(){ DemoPage(); }) function text(){ $.messager.alert('警告','警告消息'); } function DemoPage(){ $('#tab').datagrid({    url:'DemoServlet?typ
jQuery案例（1）（jQuery实现下拉菜单栏）（附：纯css，原生js实现）
weixin_44138076的博客
08-05 855
jQuery实现下拉菜单 解析：给menu的子元素li（一级菜单）注册鼠标悬停事件，然后slideToggle()通过滑动缓慢切换显示与隐藏li的子元素ul（二级菜单） 注：要记得使用stop停止动画，不然操作频繁后就会出现下拉效果延迟 html： <!DOCTYPE html> <html lang="en"> <head> <meta char...
jquery实现最简单的下拉菜单
半夏半暖半倾城的博客
06-19 4435
代码部分：&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jquery实现最简单的下拉菜单&lt;/title&gt; &lt;style type="text/css"&
jQuery实战_下拉菜单的实现
热门推荐
大脸猫~
06-25 1万+
mouseover事件和mouseenter 事件的区别 mouseove事件会触发多次，每遇到一个子元素就会触发一次。 mouseenter 事件只会触发一次。鼠标经过的时候只会触发一次 实例下拉菜单的实现： 方法一：（常规） 结构： JS： $(document).ready(function(){ $('.box li').mouseenter(function(...
jquery+css实现点击下拉菜单
weixin_42670523的博客
07-31 6225
代码如下：  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;script src="http://code.jquery.com/jquery-latest.j
实例：用jQuery实现垂直和水平下拉 菜单
weixin_30940783的博客
07-28 217
主要是利用jQuery来实现垂直菜单和水平菜单。实现效果如图： 第一步，创建一个HTML文件，如图，包含两个ul。当然把jquery库也引入进去了。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script ty...
如何用jQuery实现下拉菜单
weixin_43853424的博客
02-20 4213
代码部分 布局 &lt;body&gt; &lt;div class="box"&gt; &lt;ul class="zong"&gt; &lt;li class="one"&gt; &lt;p&gt;新闻中心&lt;/p&gt; &lt;ul class="three"&gt;
Html+css、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果
z_fighting的博客
03-28 7547
分别采用Html+css、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果
js和jquery下拉菜单全攻略
weixin_30660027的博客
07-15 140
我们先看看利用javascript如何实现下拉菜单。 下拉菜单的效果是当鼠标滑过主菜单的时候，二级菜单显示，而当鼠标滑过的时候，二级菜单隐藏。网上实现的方法很多，我觉得最好的是下面这个，因为它不需要在html代码中给标签注册一个事件函数。实现了行为和内容的完全分离。 html代码： <ul id="nav"> <li><a href="#">首...
jq添加css多个样式
最新发布
05-27
你可以使用以下方式向元素添加多个 CSS 样式: ```javascript $("#yourElement").css({ "property1": "value1", "property2": "value2", "property3": "value3" }); ``` 其中，`property1`、`property2` 和 `property3` 是 CSS 属性名称，而 `value1`、`value2` 和 `value3` 是对应的属性值。你可以根据需要添加任意数量的属性和值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值