jQuery 代码正常的导航栏

最新推荐文章于 2023-07-20 09:28:41 发布
最新推荐文章于 2023-07-20 09:28:41 发布
阅读量298 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gong1422425666/article/details/72637942
版权

     github代码正常的导航栏









<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            *{
                margin: 0;
                padding: 0;
            }
            .nav{
                width: 960px;
                height: 40px;
                margin: 50px auto;
            }
            .nav ul li{
                list-style: none;
                float: left;
                width: 120px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: green;
                position: relative;
            }
            .nav ul li a{
                color: white;
                text-decoration: none;
            }
            .nav ul li .dropbox{
                background-color: yellowgreen;
                display: none;
            }
        </style>
        <script src="jquery.js" charset="utf-8"></script>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="#">坦克</a></li>
                <li>
                    <a href="#">刺客</a>
                    <div class="dropbox">
                        <div class="inner">
                            <p><a href="#">李白</a></p>
                            <p><a href="#">兰陵王</a></p>
                            <p><a href="#">荆轲</a></p>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">法师</a>
                    <div class="dropbox">
                        <div class="inner">
                            <p><a href="#">安琪拉</a></p>
                            <p><a href="#">貂蝉</a></p>
                            <p><a href="#">小乔</a></p>
                            <p><a href="#">大乔</a></p>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">射手</a>
                    <div class="dropbox">
                        <div class="inner">
                            <p><a href="#">后羿</a></p>
                            <p><a href="#">孙尚香</a></p>
                            <p><a href="#">鲁班七号</a></p>
                        </div>
                    </div>
                </li>
            </ul>

        </div>
    </body>
    <script type="text/javascript">
        // 在导航上面快速滑动好几次，就会抽风
        $("li").mouseenter(function(){
            // 函数节流
            var self = $(this).find(".dropbox");
            if(self.is(":animated")){
                return;
            }
            self.slideDown();
        })

        $("li").mouseleave(function(){
            var self = $(this).find(".dropbox");
            self.slideUp();
        })

    </script>
</html>


越简单 越好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery自定义多级导航菜单完整代码带搜索查询功能附注释
qq_37344688的博客
08-25 310
Jquery自定义多级导航菜单带查询搜索功能完整源码附注释
jquery点击展开收缩垂直菜单代码_菜单导航一级二级分类可收缩和展开
ICode联盟
12-26 674
下载地址 鼠标点击一级分类后自动展开二级分类，点击二级分类后实现跳转$(".ny_zblb1 ul li").click(function(){ var thisSpan=$(this); $(".ny_zblb1 ul li ul").prev("a").removeClass("cur"); $("ul", this).prev("a").addClass("cur"); $(this).children("ul").slideDown("fast"); $(this).siblings().chil
jQuery宽屏鼠标悬停展开下拉导航菜单代码
2301_78416267的博客
07-20 137
【代码】jQuery宽屏鼠标悬停展开下拉导航菜单代码。
JQuery实现带有滑动下边框的导航栏
LUOZONGW的博客
10-23 968
写前端项目实现导航栏滑动的过程
jQuery 苹果官网导航栏效果代码
11-03
jQuery 苹果官网导航栏效果代码 jQuery 苹果官网导航栏效果代码
jQuery自适应网站导航栏代码
06-24
jQuery自适应网站导航栏代码是一款通过调整浏览器大小，自适应不同宽度的导航栏代码。
jQuery无限极左侧导航栏代码
05-01
jQuery无限极左侧导航栏代码基于jQuery1.10.2制作，无限极网页左侧下拉菜单栏，适用于后台框架。
jQuery Mobile 导航栏代码
10-26
jQuery Mobile 导航栏代码
jQuery自适应网站导航栏代码.zip
11-02
jQuery自适应网站导航栏代码.zip
基于jQuery实现顶部导航栏功能
11-29
今天给大家介绍一下，如何利用jQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。 下面举个例子具体介绍一下如何这些功能，案例如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery三级下拉列表导航菜单</title> [removed][removed] <style type="text/css"> *{m
jQuery+CSS3弹性工具栏菜单特效代码
03-20
jQuery+CSS3弹性工具栏菜单代码是一款默认只显示一个圆形按钮，单点击按钮时，子菜单项会以弹性动画展开，效果不错。
jQuery城市切换导航栏代码
09-28
jQuery城市频道 站点切换导航栏代码，希望对大家有用
jquery仿腾讯云滑动下拉导航菜单效果.zip
07-04
jquery仿腾讯云滑动下拉导航菜单效果是一款和阿里云菜单效果一样的菜单，但是处理方法却大不相同。
jquery导航菜单
11-11
jquery导航菜单，非常帅气，使用简单，可以用于自定义功能中
jquery导航栏代码
Twilight_b的博客
04-29 369
<script type="text/javascript"> $(function(){ $('p').click(function(){ $(this).next().slideToggle(2000); }); }); </script> <style type="text/css"> *{ margin: 0; paddi...
jquery 动态生成导航栏
weixin_44468853的博客
08-23 936
在使用jquery开发网页的时候，做不到像vue一样引入组件，但是我们的导航栏，还是不能每个页面都写的。要不然当需要修改小部分内容的时候，还得需要一个个文件去改，这样的代码也太不好维护了。所以我们需要使用js来生成导航栏。这里写的比较简单，入门级的，提供大致思路，可以根据你们的使用场景来进行修改。
jQuery 导航栏案例
qq_50839755的博客
04-07 2388
基本需求： 1.当页面滑动到某个盒子时 导航栏显示出来 2.点击导航栏 可以直接移动到相应的位置 3.给点击的导航栏某一项 变化背景颜色(加上current类) 4.当页面滑动到某个盒子时 对应的导航栏也要固定到对应的位置 整体代码展示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
jquery实现导航下拉菜单
joan_yb的博客
07-29 1897
jquery实现导航下拉菜单
jQuery实现导航菜单伸缩效果
Naughty_Fairy的博客
11-01 4352
效果描述：若菜单未展开点击则显示子菜单，否则将子菜单上卷收缩，同时菜单方向图标进行改变   &lt;!--left_menu star--&gt; &lt;div class="leftMenu" id="leftmenu"&gt; &lt;div class="menu_detail" id="leftmenu_0"&gt; &lt;dl&amp
jquery一级导航栏
最新发布
12-29
以下是一个简单的示例，演示如何使用jQuery创建一个一级导航栏： ```html <!DOCTYPE html> <title>jQuery一级导航栏示例 /* 样式可以根据需要进行自定义 */ ul { list-style-type: none; margin: 0; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值