Html+Css+jQuery悬浮菜单

于 2022-01-17 13:45:46 发布
阅读量840 收藏 6
点赞数
文章标签： jquery html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gly_technology/article/details/122538134
版权

 

 

Html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>导航栏</title>
        <!-- 引入css样式 -->
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <!-- 引入jQuery文件 -->
        <script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入js文件 -->
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <nav>
            <!-- 一级菜单 -->
            <ul id="menu">
                <li>
                    <a href="#">电脑软件</a>
                    <!-- 二级菜单 -->
                    <ul>
                        <li>
                            <a href="#">360云盘</a>
                        </li>
                        <li>
                            <a href="#">360杀毒</a>
                        </li>
                        <li>
                            <a href="#">360浏览器</a>
                        </li>
                        <li>
                            <a href="#">360搜索</a>
                        </li>
                        <li>
                            <a href="#">360压缩</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">手机软件</a>
                    <ul>
                        <li>
                            <a href="#">手机助手</a>
                        </li>
                        <li>
                            <a href="#">安全换机</a>
                        </li>
                        <li>
                            <a href="#">清理大师</a>
                        </li>
                        <li>
                            <a href="#">省电王</a>
                        </li>
                        <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>
                        <li>
                            <a href="#">流量安全</a>
                        </li>
                        <li>
                            <a href="#">SaaS服务</a>
                        </li>
                        <li>
                            <a href="#">移动安全</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">视频直播</a>
                    <ul>
                        <li>
                            <a href="#">快剪辑</a>
                        </li>
                        <li>
                            <a href="#">360影视</a>
                        </li>
                        <li>
                            <a href="#">360娱乐</a>
                        </li>
                        <li>
                            <a href="#">快资讯</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">金融科技</a>
                    <ul>
                        <li>
                            <a href="#">你财富</a>
                        </li>
                        <li>
                            <a href="#">360借条</a>
                        </li>
                        <li>
                            <a href="#">360保险</a>
                        </li>
                        <li>
                            <a href="#">360金融</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">个人服务</a>
                    <ul>
                        <li>
                            <a href="#">影视</a>
                        </li>
                        <li>
                            <a href="#">棋牌</a>
                        </li>
                        <li>
                            <a href="#">天气</a>
                        </li>
                        <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="#">360生态链</a>
                        </li>
                        <li>
                            <a href="#">亿方云</a>
                        </li>
                        <li>
                            <a href="#">360智慧云</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">游戏</a>
                    <ul>
                        <li>
                            <a href="#">热门网游</a>
                        </li>
                        <li>
                            <a href="#">棋牌天地</a>
                        </li>
                        <li>
                            <a href="#">动作冒险</a>
                        </li>
                        <li>
                            <a href="#">角色扮演</a>
                        </li>
                        <li>
                            <a href="#">体育竟技</a>
                        </li>
                        <li>
                            <a href="#">经营策略</a>
                        </li>
                        <li>
                            <a href="#">飞行射击</a>
                        </li>
                        <li>
                            <a href="#">RPG网游</a>
                        </li>
                    </ul>
                </li>
                </li>
            </ul>
        </nav>
    </body>
</html>

Css部分

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
}

nav {
    width: 100%;
    height: 50px;
    background-color: #000;
    /* 父用相对定位 */
    position: relative;
}

#menu {
    /* 子用绝对定位 */
    position: absolute;
    left: 27%;
    top: 0px;
}

#menu li {
    text-align: center;
    width: 90px;
    height: 50px;
    /* 去掉li前面的小圆点 */
    list-style: none;
    /* 浮动操作 */
    float: left;
}

#menu li a {
    /* 去掉a的下划线 */
    text-decoration: none;
    position: relative;
    top: 12px;
    color: #fff;
}

#menu li ul {
    /* 将ul隐藏 */
    display: none;
    position: relative;
    top: 29px;
}

#menu li ul li {
    background-color: #000;
}


jQuery部分

$(function() {
    // 当鼠标悬浮时样式
    $('#menu li').mouseover(function() {
        $(this).css('background-color','#ff3838');
        $(this).css('cursor','pointer');
        $(this).children('ul').show();
    });
    // 当鼠标离开时的样式
    $('#menu li').mouseout(function() {
        $(this).css('background-color','');
        $(this).css('cursor','');
        $(this).children('ul').hide();
    });
})

gly_technology
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
几种实现悬浮下拉菜单的方式
老刘的日志博客
05-10 1万+
首先是HTML代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body><div id="nav" class="nav
html+css+jq 悬浮导航栏
qq_38004125的博客
08-19 2146
右侧导航栏，一直悬浮在右侧居中处，当导航栏到页面的最上面部分，导航栏消失，当鼠标滑动到页面的第二部分，导航栏出来，导航栏出现的位置在页面的第二部分和第三部分，即是页面的中部和下部。可设置描点跳转到页面位置 html代码 <div class="r_xnav"> <ul class="rnav_ul"> <li> <a href="#indnav_z
通过HTML和CSS制作二级菜单栏
method_Wcs的博客
08-17 4959
我们在很多网站浏览时，通常会遇到很多二级菜单栏，通常它们是隐藏起来的，只有我们鼠标移过去后，它们才会显现出来，比如说下面这张图片。 但是我们如何实现类似的效果呢？下面我们仅使用 HTML+ CSS来实现一个简单的二级菜单栏。 1.首先，我们先创建一级菜单。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-.
JavaScript实现HTML导航栏下拉菜单[悬浮显示]
热门推荐
Gorho的博客
11-24 1万+
JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时，我们会遇到鼠标悬浮在某选项上，然后就会凭空显示出菜单出来，这种设计的确受到了很多人的青睐。其实纯css也是可以实现的，但是会有一些限制，必须如要显示的菜单需要作为鼠标悬浮元素的子元素，选择器优先级等等。废话不多说，直接看效果！ . 样式有点丑，因为待会赶着时间去锻炼哈哈哈，xdm看得懂就行了！ 代码实现（JavaScript） 1、获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = docume
html导航栏制作css伪类,利用:hover伪类制作二级导航菜单
weixin_39641334的博客
06-22 495
该楼层疑似违规已被系统折叠隐藏此楼查看此楼/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/* {margin:0; padding:0; border:0;}a {text-decoration:none; color:#000;}body {font-size:12px; font-family:"微软雅黑";}ul,ol {list-style:none;}ul ...
jquery+css右侧浮动html菜单导航
06-05
本项目聚焦于实现一个“jquery+css右侧浮动html菜单导航”，这种类型的导航菜单常见于许多电商网站，如购物车功能，能跟随用户的滚动保持在屏幕的右侧行动，提供持续的访问选项。 首先，我们需要理解HTML基础。HTML...
jQuery+CSS3弹性工具栏菜单特效代码
03-20
"jQuery+CSS3弹性工具栏菜单特效代码"就是一个这样的设计实例，它将jQuery的动态效果与CSS3的现代特性相结合，为用户提供了一个创新且富有吸引力的导航菜单。这个菜单在默认状态下仅显示一个圆形按钮，当用户点击该...
如何使用CSS3+JQuery实现悬浮墙式菜单
10-16
【如何使用CSS3+JQuery实现悬浮墙式菜单】 悬浮墙式菜单是一种创新的网页设计技术，它结合了CSS3的动态效果与JQuery的交互功能，为用户提供了一种新颖的浏览体验。这种设计尤其适合桌面浏览器用户，因为它提供了一...
HTML+CSS+JS原神官网实现
05-11
在这个项目中，你将使用原生JavaScript来实现动态功能，如导航栏的下拉菜单、轮播图、悬浮按钮等。你将学习到事件监听（event listeners）、DOM操作（Document Object Model，用于访问和修改HTML元素）、定时器...
jQuery+css3水平悬停动画 jQuery+css3水平悬停动画网页特效.zip
11-19
在"jQuery+css3水平悬停动画"中，jQuery被用来监听元素的悬停事件（hover），当用户鼠标悬浮在特定元素上时，触发预定义的动画效果。 其次，CSS3是CSS的最新版本，它引入了许多新的特性和功能，尤其是动画模块。CSS...
jquery鼠标悬浮动画菜单
11-03
jquery鼠标悬浮动画菜单 jquery鼠标悬浮动画菜单 jquery鼠标悬浮动画菜单
收缩式导航菜单(CSS+DIV)
10-16
很好用的收缩式导航菜单(CSS+DIV)
HTML5 CSS3 鼠标悬停动画展开的二级菜单.rar
07-10
HTML5 CSS3 鼠标悬停动画展开的二级菜单，把你的鼠标放在菜单上，就可看到子菜单展开的动画效果了，十分好看漂亮。
超酷的HTML5/CSS3 3D气泡悬浮菜单
08-23
之前我们分享过各式各样的网页菜单，有基于jQuery的，也有基于HTML5和CSS3的，很多都比较炫酷和实用，比如这款jQuery 3D 垂直多级菜单就非常实用，还有这款CSS3 3D立方体菜单导航就非常炫酷和富有创意。今天我们要给大家带来另外一款超酷的HTML5 3D菜单，每一个菜单项是一个个3D样式的悬浮气泡，点击菜单项后就可以激活当前菜单。
jQuery可拖拽悬浮弹性菜单源代码.zip
07-11
代码片段： <div class="aside-nav bounceInUp animated" id="aside-nav">         <label for="" class="aside-menu" title="按住拖动">菜单</label>         <a >首页</a>         <a >QQ</a>         <a >预约</a>         <a >关注<br>微信</a> <!-- *跳到商家微信推广* -->     </div> </div>
纯CSS实现鼠标悬浮式二级菜单
12-05 1841
<style> .fmenu { position: relative; } .fmenu .fsubmenu { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: #0b5ed7; width: 200px; .
html5底部悬浮添加到桌面,如何使用CSS3+JQuery实现悬浮墙式菜单
weixin_42168230的博客
05-30 555
前言大家好，今天我要教你如何创建一个有用的悬停式用户界面，使用jQuery，CSS3，HTML5和@ font – face。你可能会问我，为什么是一个基于悬停的用户界面？好吧，由于现在很流行的基础触摸的web站点可以运行在移动设备上，我认为我们可以让那些基于桌面浏览器的人们使用站点更加简单。什么是悬停界面？悬停界面就是只需要做少量的工作就可以浏览更多的内容。比起传统的基于页面的点击，我们需要改变...
jquery右侧悬浮层菜单
qq_25003027的博客
08-01 1012
效果直接看下图：
jQuery简单实现导航栏根据滑动自动悬浮效果
任鹏鹏博客
09-15 8913
jQuery简单实现导航栏根据滑动自动悬浮效果 今天在网上看一些别人的一些网站，都觉得很厉害，写插件什么的，无意间看到一款基于插件为导航栏自动悬浮插件，当时看到之后觉得挺简单，然后便自己也开始试着写了一下。 主要用处就是一个导航栏本来是固定的，没有自动悬浮在网站的最顶部，但是当页面下滑到导航栏的位置时，开始自动悬浮。再次向上拉到导航栏的位置时，导航栏再次固定。菜鸟编程，大鸟勿喷。 案例开始,全部
html+css+jquery首页
最新发布
09-03
HTML和CSS是前端开发中最基础和常用的技术，而jQuery则是一种流行的JavaScript库，用于构建交互式的网页应用程序。下面是一个关于如何使用HTML、CSS和jQuery构建一个基本的首页的解释。 首先，我们需要使用HTML来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值