靠左扁平下拉菜单以及水平下拉菜单的功能实现

最新推荐文章于 2021-10-24 22:44:25 发布
最新推荐文章于 2021-10-24 22:44:25 发布
阅读量358 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_42698442/article/details/82083937
版权

感觉这两个功能很重要，以后用的地方也多，所以在此处发出来分享一下，同时，自己在以后也可以回过头来看看。

这两个下拉 菜单分别用了点击触发和 焦点触碰时触发，都是比较 常用的两种方式

在这其中。我导入了jquery-3.3.1.min.js这个包

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery/jquery-3.3.1.min.js"></script>
        <style >
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            .menu{
                width: 200px;
                background-color: #CCCCCC;
            }
            .menu>li>a,.hmenu>li>a{
                display: block;
                height: 35px;
                width: 200px;
                line-height: 35px;
                text-align: center;
                color: #fff;
                background: #3498db;
            }
            a{
                text-decoration: none;
            }
            .submenu>li>a{
                display: block;
                height: 35px;
                line-height: 35px;
                text-align: center;
                color: #fff;
                border-bottom: 1px solid rgba(255,255,255,0.5);
                transition: all .5s;  /*css3过度*/
            }
            .menu>li:not(:last-child){
                border-bottom: 1px solid rgba(255,255,255,0.5);
            }
            .submenu{
                display: none;                
            }
            .submenu>li>a:hover{
                background: #FFFFFF;
                color: #000;
            }
            .hmenu>li{
                float: left;
                width: 200px;
                background: #CCCCCC;
            }
            .hmenu>li:not(:last-child){
                border-right: 1px solid rgba(255,255,255,0.5);
            }
        </style>
    </head>
    <body>
        <!--并列关系用+号-->
        <!--ul>li*4>a+ul>li*2>a-->
        
        <ul class="menu">
            <li class="an"><a href="#" >商品管理</a>
                <ul class="submenu">
                    <li><a href="">类别列表</a></li>
                    <li><a href="">商品列表</a></li>
                </ul>
            </li>
            <li class="an"><a href="#">库存管理</a>
                <ul class="submenu">
                    <li><a href="">类别列表</a></li>
                    <li><a href="">商品列表</a></li>
                </ul>
            </li>
            <li class="an"><a href="#">供应管理</a>
                <ul class="submenu">
                    <li><a href="">类别列表</a></li>
                    <li><a href="">商品列表</a></li>
                </ul>
            </li>
            <li class="an"><a href="#">商品管理</a>
                <ul class="submenu">
                    <li><a href="">类别列表</a></li>
                    <li><a href="">商品列表</a></li>
                </ul>
            </li>
        </ul>
        
        <br />
        <br />
        <br />
        
        <ul class="hmenu">
            <li class="an"><a href="#" >商品管理</a>
                <ul class="submenu">
                    <li><a href="">类别列表</a></li>
                    <li><a href="">商品列表</a></li>
                </ul>
            </li>
            <li class="an"><a href="#">库存管理</a>
                <ul class="submenu">
                    <li><a href="">类别列表</a></li>
                    <li><a href="">商品列表</a></li>
                </ul>
            </li>
            <li class="an"><a href="#">供应管理</a>
                <ul class="submenu">
                    <li><a href="">类别列表</a></li>
                    <li><a href="">商品列表</a></li>
                </ul>
            </li>
            <li class="an"><a href="#">商品管理</a>
                <ul class="submenu">
                    <li><a href="">类别列表</a></li>
                    <li><a href="">商品列表</a></li>
                </ul>
            </li>
        </ul>
        
        <script>
            $(function(){
                //将页面中的所有空连接失效
                $('a[href=""]').attr('href','javascript:void(0)')
                
                //单击时触发
                $('.menu>li>a').on('click',function(){
                    $(this).next().slideToggle();
                })
                
                //焦点触碰时触发
                $('.hmenu>li').hover(function(){
                    $(this).children('.submenu').stop().slideDown();
                },function(){
                    $(this).children('.submenu').stop().slideUp();
                })
            ;
            })
        </script>
    </body>
</html>

求别出bug
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何设计下拉菜单（技巧+实例）
weixin_34088583的博客
04-26 1515
下拉菜单可以说是网页设计中令人又爱又恨的元素之一了。下拉菜单有许多优点：不占地方，不需要做输入验证，所有平台都支持，技术门槛低，用户都很熟悉其使用方法。然而与之同时，下拉菜单又是最容易被错误使用的表单组件。这篇文章就来告诉大家下拉菜单的适用场景、设计技巧以及一些漂亮的实例。 什么时候适合用下拉菜单： 陈列子页面 下拉菜单通常适用于陈列所有需要展示的子页面，相当于一个子导航菜单，如下图：...
扁平下拉菜单网页模板
01-22
对于扁平下拉菜单，CSS可以用来设置菜单项的样式，如颜色、字体大小、边距等，并控制下拉菜单的显示和隐藏，以及过渡动画效果。 【JavaScript与网页特效】 虽然HTML和CSS可以创建静态的下拉菜单，但要实现动态交互...
扁平风格手风琴式菜单效果
GBin1.com
08-05 740
在线演示 在这个课程中我们将使用jQuery，CSS和知名的font awesome图标字体来开发一个简单的扁平风格的手风琴菜单效果 立刻访问课程：http://www.gbtags.com/gb/gbliblist/12.htm 阅读原文：扁平风格手风琴式菜单效果
（翻译）水平下拉菜单（Horizontal Dropdown Menu）
gc_2299的博客
01-20 1041
问题概述 用户需要在网站的各个模块间导航，但是网页中显示导航信息的空间有限。 用途 用于当网站包含2~9个模块，需要分级导航结构时； 当网站功能设计与桌面应用程序类似时，菜单结构也可与桌面应用程序类似 如果需要标识当前模块在网站中的位置，不要使用本模式，可以采用导航标签模式
选择下拉菜单
{竹子}
05-11 1586
/** * Create by lutn on 2018-05-04 * 选项下拉菜单选择 例子： &lt;TabSelectComponent data={data} selectStyle={{ height:40, backgroundColor:'#fff', color:'#f00', ...
下拉菜单js
weiyuyang250的博客
10-13 125
css随便设置的，需要再额外修改即可 <!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">
jQuery扁平垂直下拉菜单
04-02
jQuery扁平垂直下拉菜单是一款基于jquery实现的响应式高亮下拉导航菜单。本作品由【站长素材】收集整理，转载请注明出处！
jQuery实现的页面左侧扁平化可伸缩下拉导航菜单特效源码
01-12
在这个菜单中，可能使用`click`事件来触发菜单的展开和收缩，而`hover`事件可能用于显示下拉菜单的预览。 6. **响应式设计**：考虑到不同设备的屏幕尺寸和浏览习惯，这个导航菜单可能采用了响应式设计，即根据屏幕...
CSS3响应式多级下拉菜单导航代码
01-01
"CSS3响应式多级下拉菜单导航代码"是一个专为现代网页设计打造的解决方案，它结合了扁平化设计风格、字体图标以及对移动设备的良好适应性，确保在不同屏幕尺寸下的良好可读性和易用性。 首先，CSS3（层叠样式表第三...
js+css3手风琴展开收缩下拉菜单代码
06-05
本资源提供了一种扁平化设计的实现方式，结合JavaScript与CSS3技术，创建了一个带有小图标的多级下拉菜单，能够帮助用户更直观、更高效地浏览网站的层级结构。 首先，我们来了解一下“手风琴”效果。手风琴菜单是一...
下拉菜单导航栏
07-19
小例子，用来学习导航栏的下拉菜单 html+js
20个最炫HTML5，jQuery和CSS3下拉菜单制作教程
06-04
20个最炫HTML5，jQuery和CSS3下拉菜单制作教程
HTML用户充值页面充值中心模板.zip
05-23
HTML用户充值页面充值中心模板，DIV CSS布局，有10元、20元、50元、其他金额等充值选项，充值方式可微信或支付宝，显示应付金额。
js下拉菜单
素描本里的男子的博客
05-08 448
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ height:100%; background:black; } .b...
html简单下拉菜单
热门推荐
zww学习笔记
08-28 1万+
菜单的功能多种多样，这里提供给一个简单的下拉菜单的参考。 具体代码如下： html:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .dropbtn{ background-c
利用JavaScript实现下拉菜单
勤能补拙
01-14 6357
实现效果：点击父级标题时下拉菜单会出现，同时其他已下拉的菜单会闭合。再次点击当前打开的父级菜单时，闭合。 CSS： * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; } #list { width: 300px; margin: 50px; fon...
CSS-下拉菜单被覆盖
07-28 6969
问题：做了个网站的导航栏带有下拉菜单，鼠标放在导航栏上就会显示下拉菜单，现在下拉菜单被覆盖了。解决：设置当前的div的style属性，新增position和z-index<div class="box" style="position:relative; z-index:9999;">原因：Z-INDEX是设置不同块的层次的 position 属性规定元素的定位类型。
HTML下拉菜单（超详细）：
qq_56045326的博客
10-24 3万+
html代码段： <!--下拉菜单--> <div class="downorder"> <button class="order"> 下拉菜单 </button> <div class="downtext"> <a href="">text1</a> <a href="">text2</a> <a ..
下拉菜单栏的制作
人类工程师的博客
07-01 515
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>this is the title</title> <style> .entertainment{ width: 100px; height: 40px; background-color: #ccc; line-height: 40px; te.
Java List转树形菜单实现
通过以上步骤，我们可以将一个简单的列表转换为树形结构，便于在前端以层次结构的形式展示，如在菜单、下拉选择器等组件中使用。这个方法在实际开发中非常实用，可以节省大量的编码工作，提高效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值