利用jQuery仿写下拉导航栏

已于 2022-05-09 14:42:26 修改
阅读量90 收藏
点赞数
分类专栏： 笔记 文章标签： jquery javascript 前端
于 2022-05-08 15:34:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52065872/article/details/124648954
版权 
<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            $(function() {
            /* // 鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                slideDown下滑 slideUp上滑
                $(this).children("ul").slideDown(200);
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").slideUp(200);
            }); */

            // 1.利用事件切换，简化代码
            $(".nav>li").hover(function() {
                // 鼠标经过
                $(this).children("ul").slideDown(200);
            }, function() {
                // 鼠标离开
                $(this).children("ul").slideUp(200);
            })
        })
       
    </script>
</body>

</html>

效果图
在这里插入图片描述

龙眸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 二 属性操作， 数据缓存data() ，内容文本值，元素遍历、创建、添加和删除操作，尺寸、位置操作，
m0_55170432的博客
03-23 312
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 1. 获取属性语法 2. 设置属性语法 element.prop("属性名") 1.获取元素固有的属性值 console.log($("a").prop("href")); element.prop("属性名",
jQuery 常用API
Lotus_fragrance的博客
06-07 485
jQuery 常用API
jQuery——常用API
@一只躺平的猪@的博客
08-01 821
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 ......
JQuery概述和常用API
qq_43714708的博客
05-08 648
JQuery概述和常用API
jQuery常用的API
m0_67388537的博客
07-07 413
jQuery常用API
jQuery网站导航下拉菜单实例
07-24
jQuery网站导航下拉菜单实例是一款中英文导航栏下拉菜单演示代码。
漂亮的jquery实用的下拉菜单导航条代码
06-06
漂亮的下拉菜单效果
jQuery自适应横排下拉导航代码
04-07
jQuery自适应横排下拉导航代码是一款大气好看带有背景的网站下拉导航菜单特效。
jQuery下拉滑动切换导航条
04-07
jQuery文字上下滑动切换代码是一款鼠标经过下拉显示二级菜单，上下移动可以切换二级菜单特效。
jQuery绿色宽屏下拉导航菜单
06-24
jQuery绿色宽屏下拉导航菜单是一款通过鼠标悬停导航栏收缩下拉菜单效果代码。
JQuery API
10-20
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，
JS动态导航代码
11-14
是一个动态导航竖向的代码，用于网页的左边，jquery框架，希望有用
[jQuery]常用API
m0_71229255的博客
05-04 480
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
jqueryApi
weixin_51207199的博客
05-10 232
文章目录什么是jquery？jQuery的DOM操作添加或删除calss中的操作jquery中的事件jquery中的ajax遍历与选择常用的apijQuery 效果 什么是jquery？ jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程 jquery插件里面提供一个全局的对象$和jQuery对象,本质是一个函数， $(document).ready(function(){ //预加载函数; //method }) $(function()
jQuery常用API
czx1826488201的博客
10-19 650
1.jQuery 选择器 $('选择器') //获取事件 $('选择器') .css('属性', '属性值')； 如： $('div').css('background', 'pink'); 为什么使用,css属性就可以更改获取的事件的属性值： 把匹配的所有元素在内部进行遍历循环，给每一个元素添加css这个方法，这种行为称为隐式迭代。 $('ul li:first')// 获取ul...
[python] 基于Gradio可视化部署机器学习应用
热门推荐
You and Me
10-24 1万+
基于Gradio可视化部署机器学习应用。
strust2 标签的使用
欢迎来到sudyguoguo的世界
04-20 870
s:url：                                             url     该方法在生成的页面源码中生成如下代码     url 属性includeParams，该属性有三个值：none get all，默认值为get get:该url会将访问其所在jsp的的请求的所有get方法的参数添加到自身来 all:
JQ淡入 淡出 隐藏 显示 、隐藏和显示（slideToggle）、animate()、slideDown、stop 学习
DN_XIAOXIAO的博客
10-12 745
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).read...
jquery如何设计导航栏
最新发布
11-22
为了设计一个jQuery导航栏，可以使用以下步骤： 1. 首先，在HTML文件中创建一个导航栏的基本结构，例如一个`<nav>`元素和一些`<a>`元素作为导航链接。 2. 使用CSS样式来设置导航栏的外观，例如设置背景颜色、字体大小、边框等。 3. 使用jQuery来实现导航栏的交互效果，例如当用户滚动页面时，导航栏会固定在页面顶部。 4. 在jQuery中使用`scrollTop()`和`offset().top`方法来检测页面滚动位置，并使用`addClass()`和`removeClass()`方法来添加或删除CSS类来实现导航栏的固定效果。 以下是一个简单的jQuery导航栏的示例代码： ```html <!DOCTYPE html> <html> <head> <title>jQuery Navigation Bar Example</title> <style> nav { background-color: #333; overflow: hidden; position: fixed; top: 0; width: 100%; } nav a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } nav a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 获取导航栏的初始位置 var navOffset = $("nav").offset().top; // 当页面滚动时，检测导航栏是否应该固定 $(window).scroll(function() { if ($(document).scrollTop() >= navOffset) { $("nav").addClass("fixed"); } else { $("nav").removeClass("fixed"); } }); // 当用户点击导航链接时，添加active类来突出显示当前链接 $("nav a").click(function() { $("nav a").removeClass("active"); $(this).addClass("active"); }); }); </script> </head> <body> <nav> <a href="#" class="active">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> <div style="height: 1000px;"></div> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值