水平导航栏-二级

最新推荐文章于 2024-03-19 10:15:00 发布
最新推荐文章于 2024-03-19 10:15:00 发布
阅读量241 收藏 1
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dearlwy521/article/details/124903658
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            float: left;
        }
        .first{
            width: 100px;
            height: 30px;
            background-color:violet;
        }
        .first p{
            text-align: center;
            line-height: 30px;
        }
        .second{
            width: 100px;
            /* display: none; */
        }
        .second ul{
            list-style: none;
        }
        .second ul li{
            background-color: wheat;
        }
        .second ul li:hover{
            background-color: yellow;
        }
        .second p{
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="first" id="first">
        <p>菜单一</p>
    </div>
    <div class="second" id="second">
        <ul>
            <li>
                <p>
                    1.1
                </p>
            </li>
            <li>
                <p>
                    1.2
                </p>
            </li>
            <li>
                <p>
                    1.3
                </p>
            </li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="first" id="first2">
        <p>菜单一</p>
    </div>
    <div class="second" id="second2">
        <ul>
            <li>
                <p>
                    1.1
                </p>
            </li>
            <li>
                <p>
                    1.2
                </p>
            </li>
            <li>
                <p>
                    1.3
                </p>
            </li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="first" id="first3">
        <p>菜单二</p>
    </div>
    <div class="second" id="second3">
        <ul>
            <li>
                <p>
                    1.1
                </p>
        </li>
            <li>
                <p>
                    1.2
                </p>
            </li>
            <li>
                <p>
                    1.3
                </p>
            </li>
        </ul>
    </div>
</div>
<script>
    $(document).ready(function(){
        $('#first').click(function(){
            $('#second').slideToggle('slow')
        })
        $('#first2').click(function(){
            $('#second2').slideToggle('slow')
        })
        $('#first3').click(function(){
            $('#second3').slideToggle('slow')
        })
    })
</script> 
</body>
</html>

许晨梦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js练习总结
aohudai3633的博客
08-16 685
1.div返回顶部 当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。 实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。 要点一：document.documentElement.c...
JS返回顶部代码
11-09
JS效果返回顶部代码，学习时写的，如有问题请留言。javascript返回顶部代码
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 730
<!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-...
JS返回顶部
才这么点的博客
05-14 113
<!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>D.
返回顶部JS
weixin_33757609的博客
03-13 114
CSS #back-to-top{ position: fixed; bottom:20px; right: 20px; } JS var backBtn=$("#back-to-top"); function backToTop() { $("html,body").animate({ scrollTop: 0 ...
jquery响应式二级导航显示不同内容效果
06-05
这个二级导航方案采用了媒体查询等响应式设计技巧，使得导航栏能够根据用户的设备类型自动调整布局和样式，以达到最佳的视觉效果和可用性。 此解决方案的一大亮点在于二级导航菜单支持多种自定义内容。这包括但不...
二级导航栏
04-20
在IT行业中，尤其是在移动应用开发或者网页设计领域，"二级导航栏"是一个常见的设计元素，它主要用于提供层次化的导航结构，帮助用户更有效地在复杂的页面体系中穿梭。二级导航栏通常出现在一级导航栏下方，为用户...
css+js漂亮 二级横向导航菜单-大全
04-24
本文将深入探讨如何使用CSS（层叠样式表）和JavaScript技术来创建一款既美观又实用的二级横向导航菜单，主要关注"css+js漂亮蓝色二级横向导航菜单-大全"这一主题。 首先，我们来看CSS在构建导航菜单中的作用。CSS...
头部超级菜单导航-鼠标放上去显示二级菜单
07-25
1. 水平展开：二级菜单在一级菜单下方水平延伸，适用于横向空间充足的情况。 2. 垂直展开：二级菜单在一级菜单右侧垂直下降，适合窄屏或空间有限的界面。 3. 悬停弹出：二级菜单以弹出框的形式出现，可以避免遮挡...
双级导航栏 漂亮的css
11-22
例如，`display:flex`可以让元素在行内灵活布局，便于实现水平导航栏；`display:inline-block`可以保持元素的块状特性同时允许它们并排显示。 3. **悬停效果**：使用`:hover`伪类可以为鼠标悬停在导航项上时添加...
Jquery 实现弹出框（模态框）
12-10
Jquery实现模态框，包含对表的修改，删除，详情查看，增加等功能，代码简介，通俗易懂，对该代码原主人表示感谢！
利用js实现返回页面顶部
04-20
NULL 博文链接：https://ihenu.iteye.com/blog/1885565
jquery-Modal-Plug(jQuery模态框插件)
05-18
集成于jquery的一个模态框插件，在本插件中体现出了点击显示模态框，在一个模态框里面还有一个关闭按钮，如果有需求您可以使用第一个模态框，里面有多种加载方式仅供使用！
倒计时.html
09-20
倒计时简单制作，思路是利用思路：获取结束的时间-当前的时间>0，本资源好理解，便于学习
【JavaScript】---- 纯 js 实现返回页面顶部
最新发布
止于至善
03-19 1727
由于直接设置 scrollTop 为 0，因此执行过程不够平滑，直接返回顶部，体验不好！实现了平滑滚动到顶部；在滚动完成后执行回调函数。
jquery实现模态框
anmi8562的博客
07-12 1469
需求： 1、点击添加弹出模态框； 2、点击编辑弹出模态框，并有默认值； 3、点击删除，删除此行数据。 <!-- jquery模态框 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
模态框--jquery
庸医2048的博客
02-26 2220
今天第一次写博客，希望自己写的简单易懂，好分享。为小伙伴们分享。
JS实现页面返回顶部
Handsome_fan的博客
07-15 8020
页面返回顶部是在Web中常见的效果，在一个很长的页面中，页面返回顶部按钮可以方便用户回到页面的顶部，增强用户体验。 这里我要实现的效果图如下： 其html代码如下： &amp;amp;lt;body style=&amp;quot;height: 1800px;&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;to-top&amp;quot;&amp;amp;gt;&
html倒计时代码
weixin_34389926的博客
03-24 2258
<SPAN id=span_dt_dt></SPAN> <SCRIPT language=javascript> <!-- //document.write(""); function show_date_time(){ window.setTimeout("show_date_time()", 1000); BirthDay=new Date("...
css导航栏横向二级菜单
11-05
这是一款使用jQuery和CSS实现的红色线条横向二级菜单效果。它带有导航菜单，当前选中的菜单项会以个性化的方式显示出来。当鼠标悬停在菜单上时，会显示菜单缺口。这是一个简单的二级导航栏，但实际上，我们通常看到的二级导航栏有很多链接，不仅有垂直的链接，还有很多水平的链接。下面我们将学习如何制作水平的二级导航栏。 首先，我们需要创建一个HTML结构，其中包含一个主菜单和一个子菜单。然后，我们使用CSS样式来设置菜单的外观和布局。最后，我们使用jQuery来添加交互效果，例如当鼠标悬停在菜单上时显示子菜单。 以下是一个简单的示例代码，可以帮助你更好地理解如何创建水平的二级导航栏： ```html <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">Our Team</a></li> <li><a href="#">Our Story</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> ``` ```css nav ul { list-style: none; margin: 0; padding: 0; background-color: #333; } nav ul li { display: inline-block; position: relative; } nav ul li a { display: block; padding: 0 10px; line-height: 40px; color: #fff; text-decoration: none; } nav ul li:hover > ul { display: block; } nav ul ul { display: none; position: absolute; top: 40px; left: 0; width: 100%; background-color: #333; } nav ul ul li { display: block; } nav ul ul li a { padding: 0 20px; line-height: 30px; } ``` ```javascript $(document).ready(function() { $('nav ul li').hover( function() { $(this).children('ul').slideDown(200); }, function() { $(this).children('ul').slideUp(200); } ); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值