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

    万次阅读 2012-11-09 20:18:39
    菜单菜单1 子菜单11 子菜单12 菜单2 子菜单21 子菜单22 菜单3 子菜单31 子菜单32 // JavaScript Document $(document).ready...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>菜单项</title>
    <script src="js/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <link href="css/menu.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    	<ul>
    		<li class="main"><a href="#">菜单1</a>
    			<ul>
    				<li><a href="#">子菜单11</a></li>
    				<li><a href="#">子菜单12</a></li>
    			</ul>
    		</li>		
    		<li class="main"><a href="#">菜单2</a>
    			<ul>
    				<li><a href="#">子菜单21</a></li>
    				<li><a href="#">子菜单22</a></li>
    			</ul>
    		</li>
    		<li class="main"><a href="#">菜单3</a>
    			<ul>
    				<li><a href="#">子菜单31</a></li>
    				<li><a href="#">子菜单32</a></li>
    			</ul>
    		</li>
    	</ul>
    </body>
    </html>
    

    // JavaScript Document
    $(document).ready(function(){
    		$(".main > a").click(function(){
    			//alert("aaaaaaaa");
    			var nextUL=$(this).next("ul");
    			/*if(nextUL.css("display")=="none")
    				nextUL.css("display","block");
    			else
    				nextUL.css("display","none");*/
    			//nextUL.show("normal");
    			nextUL.toggle();
    		});
    	
    });


    展开全文
  • Bootstrap完美select标签下拉菜单实现

    万次阅读 多人点赞 2018-08-25 14:00:01
    初级者使用bootstrap框架时,大部分对官方提供的下拉菜单dropdown组件不是很感冒! 所以,这里就提供简单原生下拉标签&amp;amp;amp;amp;amp;lt;select&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt...

    Bootstrap <select>下拉菜单实现

    初级者使用bootstrap框架时,大部分对官方提供的下拉菜单dropdown组件不是很感冒!
    所以,这里就提供简单原生下拉标签<select><option>实现的下拉组件。



    一、样式1、样式2——截图对比

    1.原生select标签,截图如下:

    原生select标签效果

    2.bootstrap官方dropdown组件,截图如下:

    官方dropdown效果



    二、样式1、样式2 —— 主要代码

    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">所属角色</label>	
        <div class="col-sm-6">	
        	<!-- 样式1 -->
    		<select class="form-control">
    			<option>1</option>
    			<option>2</option>
    			<option>3</option>
    			<option>4</option>
    			<option>5</option>
    		</select>
        	<!-- 样式2 -->
    		<!--<div class="btn-group dropdown" id="dropdown">
    		  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    		    超级管理员 <span class="caret"></span>
    		  </button>
    		  <input type="hidden" name="hidedrop_1" id="hidedrop_1" value="超级管理员" />
    		  <ul class="dropdown-menu">
    		    <li><a href="#">超级管理员</a></li>
    		    <li role="separator" class="divider"></li>
    		    <li><a href="#">设计总监</a></li>
    		    <li role="separator" class="divider"></li>
    		    <li><a href="#">运维人员</a></li>
    		    <li role="separator" class="divider"></li>
    		    <li><a href="#">发布人员</a></li>
    		  </ul>
    		</div>-->
    		
        </div>
        <div class="col-sm-4 tips"></div>
    </div>
    


    附:全部html代码

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>添加管理员</title>
    	<link rel="stylesheet" type="text/css" href="../statics/plugins/bootstrap/3.3.7/css/bootstrap.css"/>
    	<style type="text/css">
    		.modal-header{padding: 0;}
    		/*.modal-content{border-radius: 0;}*/
    		.modal-dialog .close{position: absolute;top: 10px;right: 15px;}
    		.modal-dialog h3{font-size: 14px;height:42px;line-height: 42px;margin: 0;padding: 0 80px 0 20px;}
    		.modal-dialog label{font-weight: 400;}
    		.tips{line-height: 34px;font-size: 13px;}
    		.tips span{color: red;}
    		@media (min-width: 1080px){
    			/*模态框-距顶部距离*/
    			.modal-dialog {
    			    margin-top: 100px;
    			}
    			.col-sm-6{padding-left: 0;padding-right: 0;}
    			
    		}
    	</style>
    </head>
    <body>
    	<!--模态框-->
    	<div class="modal-dialog">
    		<div class="modal-content">
    		  <form class="form-horizontal" autocomplete="off" action="0.php">
    			<div class="modal-header">
    				<button class="close" data-dismiss="modal">x</button>
    				<h3>添加管理员</h3>
    			</div>
    			<div class="modal-body">
    				<div class="form-group">
    				    <label for="name" class="col-sm-2 control-label">用户名</label>
    				    <div class="col-sm-6">
    				    	<input type="text" class="form-control" id="name" placeholder="6~16位字母、数字、下划线组合">
    				    </div>
    				    <div class="col-sm-4 tips"><span>* </span>必填</div>
    				</div>
    				<div class="form-group">
    				    <label for="mobile" class="col-sm-2 control-label">手机号码</label>
    				    <div class="col-sm-6">
    				    	<input type="text" class="form-control" id="mobile" placeholder="输入11位手机号码" >
    				    </div>
    				    <div class="col-sm-4 tips"><span>* </span>必填</div>
    				</div>
    				<div class="form-group">
    				    <label for="email" class="col-sm-2 control-label">E-mail</label>
    				    <div class="col-sm-6">
    				    	<input type="text" class="form-control" id="email" placeholder="请输入邮箱" >
    				    </div>
    				    <div class="col-sm-4 tips"></div>
    				</div>
    				<div class="form-group">
    				    <label for="email" class="col-sm-2 control-label">所属角色</label>	
    				    <div class="col-sm-6">	
    				    	<!-- Single button -->
    						<select class="form-control">
    							<option>1</option>
    							<option>2</option>
    							<option>3</option>
    							<option>4</option>
    							<option>5</option>
    						</select>
    						<!--<div class="btn-group dropdown" id="dropdown">
    						  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    						    超级管理员 <span class="caret"></span>
    						  </button>
    						  <input type="hidden" name="hidedrop_1" id="hidedrop_1" value="超级管理员" />
    						  <ul class="dropdown-menu">
    						    <li><a href="#">超级管理员</a></li>
    						    <li role="separator" class="divider"></li>
    						    <li><a href="#">设计总监</a></li>
    						    <li role="separator" class="divider"></li>
    						    <li><a href="#">运维人员</a></li>
    						    <li role="separator" class="divider"></li>
    						    <li><a href="#">发布人员</a></li>
    						  </ul>
    						</div>-->
    						
    				    </div>
    				    <div class="col-sm-4 tips"></div>
    				</div>
    				<div class="form-group">
    				    <label for="regtime2" class="col-sm-2 control-label">注册日期</label>
    				    <div class="col-sm-8 input-group" id="regtime2">
    				    	<input type="text" class="form-control" placeholder="YYYY-MM-DD" >
    				    	<span class="input-group-addon">
    			                <span class="glyphicon glyphicon-calendar"></span>
    			            </span>
    				    </div>
    				</div>
    			</div>
    			<div class="modal-footer">
    				<button class="btn btn-primary" type="submit">保存</button>
    				<button class="btn btn-info" data-dismiss="modal">关闭</button>
    			</div>
    		  	
    		  </form>
    		</div>
    	</div>
    <script type="text/javascript">
    	$(function(){
    		window.top.parent.dropdownFun();
    		//函数dropdownFun()为官方文档中的$(‘#dropdown’).on('show.bs.dropdown', function(){ ··· ··· })
    	});
    </script>
    </body>
    </html>
    
    
    

    上述红色注释部分表示:在顶级页面内的函数。
    详细了解,参考具体的实现效果,以及页面iframe后的子页面,如何在主视图窗口实现下拉效果!


    以上就是关于“ Bootstrap完美select标签下拉菜单实现 ” 的全部内容。

    展开全文
  • 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: "与其它优惠共享"}];

    效果图如下:

     

    展开全文
  • 禁用某个下拉菜单 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 上开源。

    展开全文
  • 下拉菜单 下拉菜单生成器 好用省事儿  http://www.yesky.com/imagesnew/software/tools/makemenu.htm   这是个在线下拉菜单生成系统 直接选择即可 不用手工编写 看来人真是越来越懒啦 哈哈
  • ()" class="header-dropbtn" id="header-dropdown-btn">下拉菜单 <div id="header-dropdown" class="header-dropdown-content"></div> ``` js片段如下 ``` function dropdown() { //切换 document....
  • 下拉菜单的实现,纯css实现与js实现
  • Bootstrap图标、下拉菜单、按钮组、按钮式下拉菜单

    万次阅读 多人点赞 2020-05-18 14:14:31
    1.图标使用 <span class="glyphicon glyphicon-search" aria-hidden="true"></span> .glyphicon 公共类 .glyphicon-search 相应的图标 aria-hidden="true" 意思是让图标只是显示,辅助...2.下拉菜单 ...
  • 我用火狐和google浏览器打开文件后点击下拉菜单能正常显示二级菜单,但用IE和Edge浏览器打开文件后点击下拉菜单无反应,不显示二级菜单。请问是什么原因?我应该怎么办才能解决浏览器兼容问题?html代码我已经...
  • var data = [ { p: "省1", c: ["市a", "市b"] }, { p: "省2", c: ["市c", "市d", "市e"] } ] var main = document.ge
  • ANGULAR.JS:NG-SELECTANDNG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档读起来特别费力,基础差、底子薄的有可能一会...
  • 下拉菜单的ul设置成绝对定位之后,鼠标一向下,想点下拉菜单时,下拉菜单就没了 不设置成绝对定位,又会对后面的层产生影响,一弹出下拉菜单直接把后面的图片挤走了。。该怎么弄啊
  • Bootstrap 多级下拉菜单

    万次阅读 2018-03-08 11:15:51
    多级下拉菜单在很多时候,我们可能需要多级下拉菜单。在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单。只需为下拉菜单的任意 &lt;li&gt; 元素添加 .dropdown-submenu 的类,并...
  • CSS 下拉菜单

    2016-06-20 16:12:09
    1、基本下拉菜单 当鼠标移动到指定元素上时,会出现下拉菜单下拉菜单实例|菜鸟教程(runoob.com) .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; ...
  • 新手,临时被安排写html,涉及到筛选问题,第一个下拉菜单可以通过我预设的值,就称为type吧,type有123456几个大类,第二个下拉菜单是根据php链接mysql查出来的一堆数据,需要在选择第一个下拉菜单后,第二个下拉...
  • java无限层级下拉菜单

    2017-11-06 13:17:21
    例如:页面有一个主菜单A,可以进行同级增、删、改B、C....... A(B......)又可以对自己子菜单A1、A2.....(.......)增、删、改 A1(A2.....B1......)又可以对自己主菜单A1.1、A1.2.....(.....菜单都是下拉菜单形式
  • 最近公司要做Excel的模板导出,导入数据的工作,导出时还要动态生成模板,并且生成单选下拉菜单,和多选下拉菜单。开始搞这个很快除了多选的都搞定了,就是多选卡住了。弄了很久。。。最后终于在和多方面的交流下...
  • Bootstrap 下拉菜单

    2018-03-08 11:12:25
    下拉菜单下拉菜单是一种非常常见的效果,用于展示可切换、有关联的一组链接,它可以节省网页排版空间,使网页布局简洁有序。Bootstrap内置了一套完整的下拉菜单组件,可用于不同的元素,如导航、按钮等等。配合其他...
  • jsTreeSelect jquery 树形下拉菜单

    千次下载 热门讨论 2011-07-22 11:42:08
    用jsTree+div模拟 js树形下拉菜单
  • 竖导航下拉菜单、多级下拉菜单

    千次阅读 2017-05-24 16:57:30
    简单的下拉菜单 一、HTML <!DOCTYPE html> <title>menu <script
  • 仿微信下拉菜单

    热门讨论 2014-03-13 13:15:31
    模仿微信首页右上角下拉菜单,这是在别人代码的基础上修改的。

空空如也

1 2 3 4 5 ... 20
收藏数 25,524
精华内容 10,209
关键字:

下拉菜单