下拉菜单 订阅
下拉菜单是计算机网页中的一种展示效果。 展开全文
下拉菜单是计算机网页中的一种展示效果。
信息
下拉菜单:
点击一个菜单时出现对应列表
具体表现
当用户选中一个选项后
中文名
下拉菜单
应    用
选单的一种表现形式
下拉菜单在计算机应用
在计算机应用中,下拉式选单是选单的一种表现形式。具体表现为:当用户选中一个选项后,该选单会向下延伸出具有其他选项的另一个选单。下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中,并把这个下拉式选单置于主选单的一个选项下。下拉菜单内的项目可以据需要设置为多选或单选,可以用来替代一组复选框(设置为多选)或单选框(设置为单选)。这样比复选框组或单选框组的占用位置小,但不如它们直观。
收起全文
精华内容
下载资源
问答
  • 下拉菜单

    2016-09-09 23:53:08
    类似的是,在下拉菜单中我们使用class="dropdown"。它的样式只有一个相对定位。这个相对定位了它是为表单菜单需要显示的内容class="dropdown-menu"准备的。 它是绝对定位。所以它可以用class="pull-left/dropdown-...

    简介

      下拉菜单在web页面时必不可少的。Bootstrap提供了一套下拉菜单的实现机制,我们按照指定的步骤(套路)就可以简单快速实现。在Bootstrap中下拉菜单是依赖JS实现的,它提供了一个dropdown.js用来实现下拉菜单,在已编译的版本合并的到了Bootstrap.js中(所以我们在页面只需要引入bootstrap.js/bootstrap.min.js就可以)。

    基本用法

      在表单一节输入框组部分我已经列出了淘宝搜索框那块的下拉菜单+输入框+搜索的组合框。在那里用的是class="input-group-btn"父标签。然后将下拉菜单的内容包裹在其内。
      
      class="input-group-btn"样式有相对定位,设为table-cell元素(与后面元素连接起来)…。类似的是,在下拉菜单中我们使用class="dropdown"。它的样式只有一个相对定位。这个相对定位了它是为表单菜单需要显示的内容class="dropdown-menu"准备的。它是绝对定位。所以它可以用class="pull-left/dropdown-menu-left"class="pull-right/dropdown-menu-right"类来定义左右位置。
      
      下面三个步骤就可以简单的定义一个下拉菜单。

    • 使用class=dropdown的容器包裹整个下拉菜单。
    • 在容器内定义一个按钮,用来点击可以展现出下拉菜单。它的样式基本是固定的。
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
    • 在<button>同级定义一个<ul>元素。并且添加class="dropdown-menu"
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="baobei">宝贝</a></li>
            <li><a href="dianpu">店铺</a></li>
        </ul>
    </div>
    <!--我们使用按钮组也可以实现同样的效果-->
    <div class="btn-group dropup">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            收藏夹<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="###">收藏的宝贝</a></li>
            <li><a href="###">收藏的店铺</a></li>
        </ul>
    </div>

    其中<span class="caret"></span>用来定义一个下三角。

    基本原理

      默认状态下,下拉菜单是不显示的,因为class="dropdown-menu"设置了”display:none”样式。点击下拉菜单的时候,class="dropdown-menu"上会通过一个open类来实现下拉菜单的显示与隐藏。

    分割线

      在class="dropdown-menu"中(通常是ul或ol)添加一个li元素。其类为class="divider"。它会将它上面所有的li(直到上一个class="divider"为止)和它下面所有的li(直到上一个class="divider"为止)分成两部分。通过增加一个分割线。

    菜单标题

      在class="dropdown-menu"中(通常是ul或ol)添加一个li元素。其类为class="dropdown-header"(而面板标题是panel-heading)。添加一个标题。它颜色稍淡,字体偏小。

    对齐方式

      上面简单提到如何定义下拉菜单的对齐样式。默认是相对于父容器左对齐的。想让下拉菜单右对齐,则可以在class="dropdown"中加上class="pull-right"或者class="dropdown-mune-right"即可。当然,想要左对齐(默认)只要将right改成left即可(媒体对象建议使用”media-left/right”)。

    菜单状态

      “active”:表示激活状态,深蓝色。
      “disabled”:表示禁用状态,鼠标放上去有禁止标志。

    综合案例

    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            分割线<span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right">
            <li class="dropdown-header">前端技术</li>
            <li><a href="javascript:void(0)">HTML</a></li>
            <li><a href="javascript:void(0)">CSS</a></li>
            <li><a href="javascript:void(0)">Javascript</a></li>
            <li><a href="javascript:void(0)">Jquery</a></li>
    
            <li class="divider"></li>
    
            <li class="dropdown-header">后端技术</li>
            <li><a href="javascript:void(0)">nodejs</a></li>
            <li><a href="javascript:void(0)">java</a></li>
            <li><a href="javascript:void(0)">php</a></li>
    
        </ul>
    </div>

    小结

      下拉菜单在页面很常用。于是bootstrap实现了它。并且通过分割线,标题,对齐方式,菜单项状态来让下来菜单更优雅。不过更常用的还是将它作为一个class="input-group-btn来添加到组合框。

    展开全文
  • 禁用某个下拉菜单 Bootstrap3中,为下拉菜单中某个下拉项的 <li> 元素添加 .disabled 类,就可以禁止该选项,让该菜单项的链接变灰并失去鼠标悬停效果。如: <ulclass="dropdown-menu"> <li>&...

    禁用某个下拉菜单

    Bootstrap3中,为下拉菜单中某个下拉项的 <li> 元素添加 .disabled 类,就可以禁止该选项,让该菜单项的链接变灰并失去鼠标悬停效果。如:

    1. <ul class="dropdown-menu">
    2.   <li><a href="#">Regular link</a></li>
    3.   <li class="disabled"><a href="#">Disabled link</a></li>
    4.   <li><a href="#">Another link</a></li>
    5. </ul>

    效果如图 3‑14所示:

    禁用菜单项

    图3-14 禁用菜单项

    注意:被禁用的链接仍然可以点击,除非你去掉链接的 href 属性,或者使用JavaScript代码阻止用户点击链接。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http://dotansimha.github.io/angularjs-dropdown-multiselect/#/ ...

    Angular实现下拉菜单多选

    写这篇文章时,引用文章地址如下:

    http://ngmodules.org/modules/angularjs-dropdown-multiselect

    http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

    AngularJS Dropdown Multiselect

    This directive gives you a Bootstrap Dropdown with the power of AngularJS directives.

    Features

    Based on Bootstrap's dropdown.

    jQuery is not necessary.

    Seperated your data and the selection data. no modification to the data made.

    Built-in search.

    Complete control on the selected items model to fit it to your requirements.

    Two view options: normal list and checkboxes.

    Pre-selected values.

    Limit selection count.

    Grouping items by property.

    Callback events.

    Demo

    http://dotansimha.github.io/angularjs-dropdown-multiselect/

    Dependencies

    required: AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0

    Make sure to add the dependencies before the directive's js file.

    Note: Bootstrap JS file is not needed for the directive, it just uses the CSS file.

    Install

    Download the files

    Using bower:

    Just run bower install angularjs-dropdown-multiselect

    Manually: You can download the .js file directly or clone this repository.

    Include the file in your app

    <script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>.

    You can also use the minfined version (angularjs-dropdown-multiselect.min.js).

    Include the module in angular (i.e. in app.js) - angularjs-dropdown-multiselect

    Usage and Documentation

    See the documentation and examples in the GitHub pages: http://dotansimha.github.io/angularjs-dropdown-multiselect/

    由以上英文文档可以得知,若使用angularjs-dropdown-multiselect,首先需要在index.html中引入AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0,如下所示:

    <script src="js/angularjs-dropdown-multiselect.js"></script>

    <script src="js/lodash.min.js"></script>

    并在app.js模块中添加依赖angularjs-dropdown-multiselect。如下所示:

    var routerApp = angular.module('routerApp', ['ui.router''ngCookies''ngTable''angularjs-dropdown-multiselect''MedListModule']);

    yh_set_dtl.html核心代码如下:

    <div style="float:left">优 惠 类 型:</div>

    <!-- Demo -->

    <div ng-dropdown-multiselect="" 

     options="yhctlModelOptions" 

     selected-model="yhctlModel"

     checkboxes="true">

    </div>

    controllers.js代码如下:

     $scope.yhctlModel = [];

     

     $scope.yhctlModelOptions = [ 

                                  {id: 1, label: '限定用户'}, 

                                  {id: 2, label: "限定商家"}, 

                                  {id: 3, label: "限定使用次数"},

                                  {id: 4, label: "限定药品"}, 

                                  {id: 5, label: "与其它优惠共享"}];

    效果图如下:

     

    展开全文
  • Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单

    万次阅读 多人点赞 2020-05-18 14:14:31
    1.图标使用 <span class="glyphicon glyphicon-search" aria-hidden="true"></span> .glyphicon 公共类 .glyphicon-search 相应的图标 aria-hidden="true" 意思是让图标只是显示,辅助...2.下拉菜单 ...

    1.图标使用

    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

     .glyphicon 公共类   .glyphicon-search 相应的图标   aria-hidden="true" 意思是让图标只是显示,辅助设备不用读。

    .sr-only 类让其在视觉上表现出隐藏的效果

    部分

    所有图标查询 https://v3.bootcss.com/components/

    2.下拉菜单

    向下弹出

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    向上弹出

    <div class="dropup">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropup
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    下拉菜单中的标题

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
      ...
      <li class="dropdown-header">Dropdown header</li>
      ...
    </ul>

    分割线

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
      ...
      <li role="separator" class="divider"></li>
      ...
    </ul>

    禁用菜单

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
      <li><a href="#">Regular link</a></li>
      <li class="disabled"><a href="#">Disabled link</a></li>
      <li><a href="#">Another link</a></li>
    </ul>

    3. 按钮组

    按钮颜色:btn-default  btn-primary  btn-success  btn-info  btn-warning  btn-danger

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>

    按钮的大小

    <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
    <div class="btn-group" role="group" aria-label="...">...</div>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
    <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

    嵌套下拉菜单

    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
    
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

    按钮组垂直排列

    <div class="btn-group-vertical" role="group" aria-label="...">
      ...
    </div>

    4.按钮式下拉菜单

    <!-- Single button -->
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    5.分裂式按钮下拉菜单

    <!-- Split button -->
    <div class="btn-group">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    尺寸

    <!-- Large button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Large button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
    
    <!-- Small button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Small button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
    
    <!-- Extra small button group -->
    <div class="btn-group">
      <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Extra small button <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>

    向上弹出

    <div class="btn-group dropup">
      <button type="button" class="btn btn-default">Dropup</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <!-- Dropdown menu links -->
      </ul>
    </div>

    在学习过程中自己做一个全ui的demo,多测试多看官方文档上手非常容易。

    展开全文
  • 下拉菜单 下拉菜单生成器 好用省事儿  http://www.yesky.com/imagesnew/software/tools/makemenu.htm   这是个在线下拉菜单生成系统 直接选择即可 不用手工编写 看来人真是越来越懒啦 哈哈
  • 网页中下拉菜单随处可见,一般用到toggle()或slideToggle()事件;但下拉菜单出来后,一般要再次点击原来的按钮才能收起,所以做到下拉菜单以外点击收起,体验就会方便很多。 <script type="text/javascript">...
  • bootstrap input 下拉树 下拉菜单 下拉列表

    万次阅读 多人点赞 2017-01-11 15:12:47
    bootstrap input 下拉树 下拉菜单 下拉列表
  • 下拉菜单的实现,纯css实现与js实现
  • Bootstrap 多级下拉菜单

    万次阅读 2018-03-08 11:15:51
    多级下拉菜单在很多时候,我们可能需要多级下拉菜单。在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单。只需为下拉菜单的任意 &lt;li&gt; 元素添加 .dropdown-submenu 的类,并...
  • 最近公司要做Excel的模板导出,导入数据的工作,导出时还要动态生成模板,并且生成单选下拉菜单,和多选下拉菜单。开始搞这个很快除了多选的都搞定了,就是多选卡住了。弄了很久。。。最后终于在和多方面的交流下...
  • Bootstrap 下拉菜单

    2018-03-08 11:12:25
    下拉菜单下拉菜单是一种非常常见的效果,用于展示可切换、有关联的一组链接,它可以节省网页排版空间,使网页布局简洁有序。Bootstrap内置了一套完整的下拉菜单组件,可用于不同的元素,如导航、按钮等等。配合其他...
  • 弹性下拉菜单和弹性碰撞下拉菜单,其实基本的实现过程是一样的,不同的是,弹性下拉菜单是围绕着目标点上下弹跳直到停止,而弹性碰撞下拉菜单是在目标点上面做弹跳运动直到停止因为弹性下拉菜单和弹性碰撞下拉菜单,...
  • excel设置下拉菜单多选 如何设置多选Excel下拉菜单 (How to Set up Multiple Selection Excel Drop Down) [Latest update: July 27, 2016] With a bit of Excel VBA programming, you can change an Excel data ...
  • 我们来看下常见的下拉菜单: 这里我们点击菜单,下拉菜单就会显示,点击下拉菜单以外的区域就会隐藏。 这是一个简单的例子: 这里增加一个选项,就是当我们按下esc键的时候,下拉菜单也可以关闭。 先贴出代码: &...
  • vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单 2018-08-29 15:34:55周家大小姐.阅读数 5928收藏更多 分类专栏:vue2.0周家大小姐 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文...
  • html表单下拉菜单Drop-down menus are used on forms to capture responses for which there is one correct response from multiple possible answers. A good example of this is asking for a visitor’s ...
  • Bootstarp下拉菜单

    2019-06-16 17:43:08
    Bootstarp下拉菜单 开发工具与关键技术:Visual Studio 前端 作者:盘子 撰写时间: 2019年6 月 18日 Bootstrap的下拉菜单则是设计为通用的,适用于各种情形和标记结构,如可以创建包含其它输入和表单控制项(如...
  • CSS 下拉菜单

    2017-11-29 21:54:43
    CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 下拉菜单实例 实例演示 1 文本下拉菜单 实例演示 2 下拉菜单 实例演示 3 基本下拉菜单 ...
  • 竖导航下拉菜单、多级下拉菜单

    千次阅读 2017-05-24 16:57:30
    简单的下拉菜单 一、HTML <!DOCTYPE html> <title>menu <script
  • 找到下拉菜单是标签,给他修改样式 /deep/.van-dropdown-item{ position:absolute!important; height:100vh; top:100%!important; }
  • 下拉菜单 <div class="dropdown"> <button class="btn">下拉菜单</button> <div class="content"> <a href="#option">选项 1</a> <a href="#option">选项...
  • Bootstrap 按钮下拉菜单

    2018-03-08 11:17:09
    只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data-toggle="dropdown" 属性,就可以创建一个按钮下拉菜单。为了从视觉上告诉人们按钮包含下拉菜单,还要为按钮添加...
  • 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出现下拉菜单,用户就可以点击其中一个选项来访问来进入另外一个网址。 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有...
  • CSS下拉菜单

    2016-11-04 15:49:47
    下拉菜单 鼠标移动到按钮上打开下拉菜单下拉菜单 菜鸟教程 1 菜鸟教程 2 菜鸟教程 3

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,255
精华内容 11,702
关键字:

下拉菜单