精华内容
下载资源
问答
  • 做成下拉菜单
    千次阅读
    2021-06-11 08:43:39

    http://js.jirengu.com/qegovoxize/1/edit?html,css,output

    这个是放在jsbin上的代码。

    一、我的思路

    CSS制作下拉菜单,主要是运用了样式hover。

    原来下拉菜单设置的样式是display:none;当一级菜单hover时,下拉菜单从display:none转变为display:block。

    在设置当一级菜单:a标签被hover时,下拉菜单的样式,我的写法是:.nav>ul>a:hover+.pull1{display:block;}。

    但是这样设置只能在a标签被hover时才能出现下拉菜单,当鼠标离开a标签时,下拉菜单就会消失。这样不符合下拉菜单的要求。所以我又设置了当下拉菜单被hover时,下拉菜单也会从display:none转变为display:block。我的写法是:.pull1:hover{display:block;}。

    二、存在的问题

    这样的写法只能勉强实现了下拉菜单的模样,但是存在几个问题。

    1、鼠标从a标签移动到下拉菜单时,当鼠标经过一级菜单和二级菜单的空隙之间,下拉菜单会消失。只有当鼠标运动速度足够快的时候,才能实现选择二级菜单的功能。

    2、这样的写法无法实现渐变,因为display:none转变到display:block上是不需要时间转变的,这样会不美观。

    3、这个写法代码感觉非常冗长,因为一个下拉标签需要分别设置一级标签和下拉标签的hover。这样代码也会非常不美观。

    更多相关内容
  • 手风琴效果的下拉菜单大家都有见到过吧,实现的方法也有很多,这篇文章就为大家分享了javascript手风琴下拉菜单实现代码,纯手写的,感兴趣的朋友不要错过。
  • TIA博途WINCC中如何自定义登录对话框?
  • 用Javascript实现下拉菜单

    千次阅读 2021-01-28 20:12:50
    用Javascript实现下拉菜单 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 下拉菜单,或者侧拉菜单在实际开发当中非常的实用 最近学到了这里那就上传博客分享一下 <!DOCTYPE html> &...

    用Javascript实现下拉菜单

    正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教
    下拉菜单,或者侧拉菜单在实际开发当中非常的实用
    最近学到了这里那就上传博客分享一下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                border: 0;
            }
            .menu{
                width: 100%;
                height: 50px;
                border: 1px solid lightyellow;
                box-shadow: 0 2px 5px black;
            }
            .menu div{
                /*margin-top: 10px;*/
                float: left;
                width: 19.82%;
                height: 50px;
              /*  border: 1px solid red;*/
                text-align: center;
            }
            button{
                margin-top: 15px;
                cursor: pointer;
                width: 25px;
                height: 15px;
                background-color: pink;
            }
            .show1{
                display: none;
                width: 19.82%;
                height: 250px;
                /*border: 1px solid black;*/
    
            }
            .show1 div{
                border: 1px solid pink;
                width: 247px;
                height: 48px;
                text-align: center;
            }
            a{
                text-decoration: none;
                display: block;
                margin-top: 10px;
            }
            a:hover{
                color: #ff242d;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            <div>下拉1
                <button>^</button>
            </div>
            <div>下拉2
                <button>^</button>
            </div>
            <div>下拉3
                <button>^</button>
            </div>
            <div>下拉4
                <button>^</button>
            </div>
            <div>下拉5
                <button>^</button>
            </div>
        </div>
    
        <div class="show1">
            <div><a href="#">4654tyyut</a></div>
            <div><a href="#">4654</a></div>
            <div><a href="#">sdf</a></div>
            <div><a href="#">sdf</a></div>
            <div><a href="#">tert</a></div>
        </div>
        <script>
            var btn=document.querySelector('button')
            var show1=document.querySelector('.show1')
            var flag=0
            btn.onclick=function () {
                if (flag === 0) {
                    show1.style.display = 'block'
                    flag=1
                }else {
                    show1.style.display='none'
                    flag=0
                }
            }
        </script>
    </body>
    </html>
    

    代码解释

    这里主要就是用script的onclick来进行实现,这里我用到的按钮,也可以换成其他的东西,做法都是类似的。
    onclick点击相应的东西过后,便会触发事件,调用函数,然后判断flag的值来进行相应的操作,隐藏/显示div。
    这里的flag是关键,这个变量在点击事件发生时不断在0.1之间变化,点击一次即该函数被执行一次,即循环一次,也就是判断flag的值,从而达到显示/隐藏的效果

    演示效果

    未下拉时

    在这里插入图片描述


    下拉后

    在这里插入图片描述




    别喷我,写的不好就劳烦指点一二,觉得有帮助就留下个大拇指点个关注再走哈哈哈!
    展开全文
  • 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置block,具体css: 复制代码 代码如下: .nav > li:hover .dropdown-menu {display: block;} 这句css加在bootstrap.min.css之后出现的css中,你...
  • JavaScript(js)网页--下拉菜单制作

    千次阅读 多人点赞 2020-11-19 20:40:15
    JavaScript(js)网页–下拉菜单制作 在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏。例如新浪网 鼠标放到微博、博客或邮箱上面时,会出现一个二级菜单,鼠标离开则隐藏。 ...

    JavaScript(js)网页–下拉菜单制作

    在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏。例如新浪网

    在这里插入图片描述

    鼠标放到微博、博客或邮箱上面时,会出现一个二级菜单,鼠标离开则隐藏。

    设计简单的下拉菜单栏

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>下拉菜单</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                
            }
            a{
                text-decoration: none;
                
            }
            div {
                width: 1200px;
                height: 30px;
                margin: 0px auto;
                background-color: blanchedalmond;
            }
            li {
                list-style: none;
            }
            div li {
                position: relative;
                float: right;
                text-align: center;
                border: 1px solid black;
                line-height: 30px;
                width: 80px;
                height: 30px;
            }
            div ul {
                position: absolute;
                top:30px;
                display: none;
            }
            div ul li{
                
                float: left;
                width: 120px;
                height: 30px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            <li><a href="#">邮箱</a>
                <ul>
                    <li><a href="#">免费邮箱</a></li>
                    <li><a href="#">VIP邮箱</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>
                </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></li>
    
        </div>
        <script>
            var div = document.querySelector('div');
            var lis = div.children;
            for (var i=0;i<lis.length;i++){
                //鼠标经过,出现下拉菜单
                lis[i].onmouseover=function(){
                    this.children[1].style.display='block';
                }
                //鼠标离开,隐藏下拉菜单
                lis[i].onmouseout=function(){
                    this.children[1].style.display='none';
                }
            }
    
        </script>
    </body>
    </html>
    
    展开全文
  • 本篇文章给大家带来的内容是关于Bootstrap框架下下拉菜单的实现(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap...

    本篇文章给大家带来的内容是关于Bootstrap框架下下拉菜单的实现(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。本文将详细介绍Bootstrap下拉菜单(免费课程推荐:bootstrap教程)

    使用方法

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果使用的是未编译版本,在js文件夹下能找到一个名为“dropdown.js”的文件,也可以调用这个js文件

    因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果

    Document

    基本用法

    在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用

    1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素

    2、使用了一个按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致

    3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”

    4、通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出(默认是向下弹出的)

    原理分析

    Bootstrap框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,因为“dropdown-menu”默认样式设置了“display:none”;当用户点击父菜单项时,下拉菜单将会被显示出来;当用户再次点击时,下拉菜单将继续隐藏

    .dropdown-menu {

    position: absolute;/*设置绝对定位,相对于父元素p.dropdown*/

    top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/

    left: 0;

    z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/

    display: none;/*默认隐藏下拉菜单项*/

    float: left;

    min-width: 160px;

    padding: 5px 0;

    margin: 2px 0 0;

    font-size: 14px;

    list-style: none;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #ccc;

    border: 1px solid rgba(0, 0, 0, .15);

    border-radius: 4px;

    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

    }

    【实现原理】

    1、Dropdown插件在网页加载的时候,对所有带有data-toggle="dropdown"样式的元素进行事件绑定

    2、用户单击带有data-toggle="dropdown"样式的链接或按钮时,触发javascript事件代码

    3、javascript事件代码在父容器上加一个.open样式

    4、默认隐藏的.dropdown-menu菜单在外部有了.open样式后,即可显示出来,从而达到预期的效果

    5、当用户再次点击时,“p.dropdown”容器中的类名“open”又会被移除

    .open > .dropdown-menu {

    display: block;

    }

    【其他用法】

    还有一个有趣的用法,是触发元素可以放在菜单的父容器的外部

    但是,这种用法有两点需要注意

    1、要设置父容器的id值

    2、要设置触发元素的data-toggle属性和data-target属性,data-target属性值是#id

    外部触发器

    扩展用法

    【分隔线】

    在Bootstrap框架中的下拉菜单提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的

    ,并且给这个添加类名“pider”来实现添加下拉分隔线的功能

    .dropdown-menu .pider {

    height: 1px;

    margin: 9px 0;

    overflow: hidden;

    background-color: #e5e5e5;

    }

    【菜单标题】

    在任何下拉菜单中均可通过添加标题来标明一组动作

    Dropdown header

    .dropdown-header {

    display: block;

    padding: 3px 20px;

    font-size: 12px;

    line-height: 1.42857143;

    color: #999;

    }

    【对齐方式】

    Bootstrap框架中下拉菜单默认是左对齐,如果想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名

    .dropdown-menu-right {

    right: 0;

    left: auto;

    }

    由于

    展开全文
  • Element UI 之 Tabs 栏下拉菜单的实现

    千次阅读 2020-08-09 17:01:27
    Element UI 之 Tabs 栏下拉菜单的实现 产品小姐姐有一个业务需求,Tabs 组件某个 Tab 为 下拉菜单,效果如下: 业务代码比较多,这里弄了一个小 Demo,以供参考,效果如下: 一、思路 通过 el-tab-pane 的 name ...
  • React下拉选择可自定义的下拉菜单用于做出React特征可通过prop s配置通过渲染道具回调(可访问内部道具,状态和方法),所有内部组件的总自定义组件覆盖可通过CSS(或自定义组件)设置样式门户支持在本地DOM树之外...
  • css导航条横向带下拉菜单

    千次阅读 2021-06-09 11:49:15
    css+div导航下拉二级菜单竖排效果如何改为横排?,在“下一站”有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起来,这样就在一行了。 下面是...
  • 代码如下:菜单项1 子菜单项11子菜单项12菜单项2子菜单项21子菜单项22菜单项3子菜单项31子菜单项32最外围的中元素即为菜单项1、菜单项2、菜单项3,下拉菜单分别在各主菜单之下,如果菜单最外层为ul,一层每个主菜单...
  • 按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。 把一组”btn-group”>组合进一个”btn-toolbar”>做成更复杂的组件。 <button type=button class=btn btn-...
  • 本篇文章主要的介绍了关于HTML select标签下拉菜单的做法实例,还有一个html的一些网站的下拉菜单的用法都放在了文章中,下面就让我们一起来看看这篇文章吧首先我们要知道html下拉菜单的代码是什么?很明显是select...
  • 【实例简介】【实例截图】【核心代码】无标题文档*{margin:0;padding:0;}/*通用选择器样式*/body{font-family:"微软雅黑";}/*标签选择器样式,规定页面的基本字体类型为“微软雅黑”*/li{list-style-type:none;...
  • html下拉菜单怎么?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户...
  • 下拉菜单实现小型通讯录,桌球游戏,移动的车 等功能,其小型通讯中有增删改差等功能,包括文件存盘 移动的车不太理想,希望各位C语言爱好者再进行改进
  • JS文件中的Select 有2个,我想做成联动的,例如选择" 信息采集器 " 那么第二个Select 就自动显示"A" 选择 " 信息变送器 " 就自动显示 “ B ” 怎么实现~~求高手,求专家!网上找的代码,测试了都不行! 是不是因为这...
  • 如何将Excel的单元格设置成下拉选项?-excel设置下拉菜单 作者:乔山办公网日期:2019-09-24 21:13:23 返回目录:excel表格制作 在用Excel表录入数据时,有时需要限制某个字段(也叫列)的值(也叫内容),比如,...
  • Excel表格中如何快速生成下拉菜单

    千次阅读 2022-04-22 16:00:48
    Excel表格中如何快速生成下拉菜单 目录 Excel表格中如何快速生成下拉菜单 1、例如下表先手动输入前几组的“等级”类别“优良中差” ​2、同时按住 alt+ ↓键(键盘下翻键)出现下拉选项,点击即可。 1、...
  • Dreamweaver怎么创建下拉菜单

    千次阅读 2021-01-17 18:32:01
    一、在Dreamweaver中创建弹出式菜单1. 点击鼠标,将光标放在表单框线内,点击“插入”菜单,选择“表单”项,在弹出的子菜单中选择“选择(列表/菜单)”命令。或者在“插入”面板中选择“表单”项,点击“选择(列表/...
  • QListWidget* ListCbx=new QListWidget(this);//创建 ListCbx->addItem("sdl");//添加内容 ListCbx->setVisible(false);//是否可见 connect(CmdnameLine,SIGNAL(textChanged(QString)),this,SLOT(OnCmdNameChang
  • html下拉菜单怎么

    千次阅读 2021-06-09 02:44:32
    一:首先我们打开Notepad++,如果使用Notepad++的话,请在HTML窗口顶部的“语言”菜单设置“H”。【推荐学习:Html5教程】二:创建下拉菜单代码,输入...三:表示您要将链接放在下拉菜单中,也可以将添加指向下拉...
  • javascript原生实现二级联动下拉菜单

    千次阅读 多人点赞 2021-10-20 17:06:51
    JS原生实现二级联动菜单(市/区县) ???? Java学习路线:搬砖工的Java学习路线 ???? 作者:程序员小王 ???? 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF ???? 扫描主页左侧二维码...
  • 您是否正在考虑将下拉菜单添加到WordPress网站? 下拉菜单可能对您的网站很有帮助。它们会组织您的站点链接,并将它们放在易于访问的位置,以便用户可以浏览您的内容。 在今天的教程中,我们将研究市场上6个优秀的...
  • vue---实现递归组件(多级下拉菜单)

    千次阅读 2021-05-05 10:34:21
    不过它们只能通过 name 选项来这件事。 之前在写组件时总有些疑惑,为什么export default导出的对象中有个name属性,今天看过递归组件之后,才发现这个name属性的一个比较重要的作用。(当然。name属性的还有其他...
  • 导航下拉菜单被banner遮住/显示不全,这种问题是老生常谈了,经常有新手会问,有些人了2、3年的还会经常犯错,而且好多人还以为是js问题,其实这是基本的css知识。我觉得还是有必要写一遍文章解释给新手们。一、...
  • 红色多级下拉菜单,是学习Div CSS jquery制作菜单的一个好实例,可以显示5级子菜单,关于本菜单中的JS封装,作者其实是想利用一些私有方法和变量,但是这么包装,感觉有些不伦不类,既然还是要搞了半天,还是返回的...
  • JS简单实现下拉菜单 首先,写一个菜单条,包含菜单,加上菜单项,并给他们加上样式,使下拉菜单变得更加美观,再加上js效果,设置其是否可见,用js写一个方法调用即可。  上图,是我写的一个简单的下拉菜单条,最...
  • jQuery jdMenu下拉式导航菜单实例,也可以向右展开菜单做成了插件形式,非常方便大家调用了,样式可自己动手调整,效果请参见截图所示。水平和垂直方向都可以展开子菜单的一个jquery插件,兼容各大浏览器。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,421
精华内容 18,968
关键字:

做成下拉菜单