下拉菜单分别用css，javascript,jquery实现

最新推荐文章于 2023-09-27 21:55:53 发布
最新推荐文章于 2023-09-27 21:55:53 发布
阅读量696 收藏
点赞数
分类专栏： 前端 文章标签： javascript jquery css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22222499/article/details/52800027
版权

最近在学习前端知识，写了点小例子，各大家分享一下。我特意给大家做了个gif。第一次做，感觉还可以。

效果图
- 首先用css实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        #nav{
            background-color: #eee ; width: 600px;
            height:40px;
            margin:0 auto;
        }
        ul{
            list-style: none;

        }

        ul li{
                float: left;
            width:90px;
            line-height: 40px;
            text-align: center;
            position: relative;
            }
          a{
              text-decoration: none;
              color: #c02f1d;
              display:block;
              padding: 0 10px;
          }
        a:hover{
            color: #FFF;
            background-color: #c02f1d;
        }
        ul li ul li{

            background-color: #eee;
            margin-top: 2px;
        }
        ul li ul{
            display: none;

        }
        ul li ul li a:hover{
            background-color: #4ae75e;
            color: white;
        }
        ul li:hover ul{
            display: block;
        }
    </style>
</head>
<body>
<div id="nav">
   <ul>
       <li><a href="#">首页</a></li>
       <li><a href="#">课程大厅</a>
         <ul>
             <li><a href="#">javascript</a></li>
             <li><a href="#">css</a></li>
             <li><a href="#">jquery</a></li>
         </ul>
       </li>
       <li><a href="#">学习中心</a>
           <ul>
               <li><a href="#">javascript</a></li>
               <li><a href="#">css</a></li>
               <li><a href="#">jquery</a></li>
           </ul></li>
       <li><a href="#">经典案例</a></li>
       <li><a href="#">关于我们</a></li>
   </ul>


</div>
</body>
</html>
  • 用javascript实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        #nav{
            background-color: #eee ; width: 600px;
            height:40px;
            margin:0 auto;
        }
        ul{
            list-style: none;

        }

        ul li{
            float: left;
            width:90px;
            line-height: 40px;
            text-align: center;
            position: relative;
        }
        a{
            text-decoration: none;
            color: #c02f1d;
            display:block;
            padding: 0 10px;
        }
        a:hover{
            color: #FFF;
            background-color: #c02f1d;
        }
        ul li ul li{

            background-color: #eee;
            margin-top: 2px;
        }
        ul li ul{
            display: none;
            position: absolute;
            left: 0px;
            top: 40px;
        }

    </style>
    <script type="text/javascript">
        function show(li){
            var submenu=li.getElementsByTagName("ul")[0];
            submenu.style.display="block";

        }
        function hide(li) {
            var submenu=li.getElementsByTagName("ul")[0];
            submenu.style.display="none";
        }
    </script>
</head>

<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">javascript</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">jquery</a></li>
            </ul>
        </li>
        <li><a href="#">学习中心</a>
            <ul>
                <li><a href="#">javascript</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">jquery</a></li>
            </ul></li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>
  • jquery实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        #nav{
            background-color: #eee ; width: 600px;
            height:40px;
            margin:0 auto;
        }
        ul{
            list-style: none;

        }

        ul li{
            float: left;
            width:90px;
            line-height: 40px;
            text-align: center;
            position: relative;
        }
        a{
            text-decoration: none;
            color: #c02f1d;
            display:block;
            padding: 0 10px;
        }
        a:hover{
            color: #FFF;
            background-color: #c02f1d;
        }
        ul li ul li{

            background-color: #eee;
            margin-top: 2px;
        }
        ul li ul{
            display: none;
            position: absolute;
            left: 0px;
            top: 40px;
        }

    </style>
    <!--<script src="js/jquery-1.7.min.js"></script>-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".navmenu").mouseover(function () {

                  $(this).children("ul").show();
            })

            $(".navmenu").mouseout(function () {
                $(this).children("ul").hide();
            })

        })
    </script>
</head>

<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li class="navmenu"><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">javascript</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">jquery</a></li>
            </ul>
        </li>
        <li><a href="#">学习中心</a>
            <ul>
                <li><a href="#">javascript</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">jquery</a></li>
            </ul></li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>


</div>
</body>
</htm
wending-Y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
11-24
首先给大家展示下效果图： 查看效果 源码下载 html代码部分： 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...<...
js 实现下拉菜单 完整代码
qq_43435403的博客
08-22 4989
一、js实现下拉菜单 二、解题思路： 三、代码： 1.html <ul id="divBox"> <li class="myLi" onclick="openS(this,0)"> <span class="iconfont icon-maobi front"></span> <span class="font">Diseno
js实现下拉菜单
weixin_62485207的博客
08-23 499
运用jQuery方便快捷的实现下拉菜单。
使用js实现简单的下拉菜单
qq_52622178的博客
08-05 5517
全部代码如下，详细注释已在代码注释中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
JavaScript（js）网页--下拉菜单制作
热门推荐
Dreamer
11-19 1万+
JavaScript（js）网页–下拉菜单制作 在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网 鼠标放到微博、博客或邮箱上面时，会出现一个二级菜单，鼠标离开则隐藏。 设计简单的下拉菜单栏 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
原生JavaScript技术，jQuery实现下拉菜单
weixin_46433198的博客
07-28 1020
利用onMouseOver 和 onMouseOut 事件来触发一个自定义的 change() 函数，实现了鼠标悬停时显示下拉菜单，鼠标移出时隐藏下拉菜单的效果。我是小p，希望与大家分享更多的前端开发的知识，如果你有不同或更好的见解，欢迎在我的评论区留言！onMouseOver 和 onMouseOut 事件所含不同参数决定了他们各自实现的效果不同。作为选择器，在函数中选中对应元素。来决定何时显示，何时隐藏下拉菜单。设置下拉菜单div的样式是否可见。实现下拉菜单的下滑与收起。
jQuery实现多级下拉菜单jDropMenu的方法
11-22
本文实例讲述了jQuery实现多级下拉菜单jDropMenu的方法。分享给大家供大家参考。具体如下： 这里介绍的jQuery多级下拉菜单导航-多级下拉菜单，英文名叫 DropDown Menu。通过 each() 遍历添加相应的处理事件 ...
jquery+css3绿色下拉菜单.zip
11-19
jquery+css3绿色下拉菜单.zip
jQuery+CSS3流畅下拉菜单特效.zip
11-19
jQuery+CSS3流畅下拉菜单特效.zip
jQuery+CSS3复古下拉菜单Formbox.zip
11-19
jQuery+CSS3复古下拉菜单Formbox.zip
CSS+JavaScript分别实现下拉菜单效果
02-15
利用CSS和JavaScript分别实现简单的下拉框效果，简单实用，容易上手
js实现树型下拉菜单
11-07
用js实现树型下拉菜单
最简单js代码实现select二级联动下拉菜单
11-26
本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD H
非常小巧的JS下拉菜单代码
10-10
非常小巧的JS下拉菜单代码，兼容：IE, Firefox, Opera, Safari, Chrome
jquery仿百度下拉列表搜索框
08-22
jquery仿百度搜索框下拉列表 ，可实现自动模糊查询，显示已输入匹配信息
如何使用原生js来实现下拉菜单
最新发布
weixin_75115821的博客
09-27 1188
下拉菜单在页面中存在无非就是显示和隐藏的效果，鼠标滑动到标题显示下拉菜单，离开的使用关闭下拉菜单，但是在显示隐藏的时候会有一个小条件，就是控制鼠标移入移出事件的标签必须是包裹这个标题和下拉列表的，否则就会出现移入标题标签能够显示，但是移除标题标签就直接隐藏了，而我们要的效果是移入标题标签显示下拉菜单，而且移除标题标签，但是鼠标在下拉标签中，下拉菜单是显示的，所以在编写事件的时候，需要注意是由大盒子来控制里面的显示隐藏效果！
javascript案例10——下拉菜单
努力、拼搏、奋进
05-07 7166
一、案例描述 鼠标经过导航栏出现下拉菜单。 二、案例效果演示 三、案例局部代码 css代码： <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } ul { list-style: none; } .nav { text-align: center;
html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
weixin_35906775的博客
06-07 1757
用javascript实现简单的下拉折叠菜单Gary_js实现简单的下拉折叠菜单*{margin:0px; padding:0px;}#div1 {width:200px; margin:0 auto; line-height:25px;}ul {list-style:none;}li {background:#ccc;margin-bottom:3px;}dl {background:#eee;...
用jquery实现下拉菜单
05-13
可以通过以下步骤使用 jQuery 实现下拉菜单： 1. HTML 结构：在 HTML 中创建一个按钮和一个下拉框，下拉框中包含需要显示的选项。 ```html 下拉菜单 选项1 选项2 选项3 ``` 2. CSS 样式：使用 CSS 样式隐藏...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wending-Y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值