Bootstrap下拉菜单效果实例代码分享_javascript技巧

下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊,而是导航条中常见的那种。 

Bootstrap官方网站对下拉菜单Dropdown的解释很少,即使是他们的英文官方网站。 

对于如何更改下拉菜单的背景颜色、如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式,官方网站是完全没有具体的解释。 

而且,官方网站的超级链接代码杂糅着许多没有用的参数。 

笔者研究了很久,才找到更改下拉菜单的方法。 
以下是IE8对Bootstrap的下拉菜单,以后各位使用Bootstrap记得千万要用IE8去测试,谷歌等高级浏览器掩盖了许多Bug。 

提供如何更改下拉菜单的背景颜色、如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式的修改方法, 

至于如何把下拉菜单的框框改没,笔者实在是无能为力的。 

以上的下拉菜单具体实现请看如下的代码: 

<!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=utf-8" />
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <title>下拉菜单dropdown</title>
 </head>

 <body>
 <div class="btn-group">
   <!--将btn-default改成btn-link可以让其变为一个文字式的下拉菜单-->
 <button type="button" class="btn btn-link dropdown-toggle"
 data-toggle="dropdown">
 下拉菜单
    <!--这是下拉菜单的旁边的小三角形-->
 <span class="caret"></span>
 </button>
 <!--这里在class中的dropdown-menu再加入label-warning等属性可以改变下拉菜单的背景色-->
 <ul class="dropdown-menu" role="menu">
 <li>
    <!--这里的span中的class中的text-info是为了让下拉菜单里面的链接的颜色从黑色变成更像超级链接的蓝色-->
  <a href="#"><span class="text-info">项目一</span></a>
 </li>
 <li>
  <a href="#"><span class="text-info">项目二</span></a>
 </li>
 </ul>
 </div>
 </body>
</html>

没有jquery支持下拉菜单也是无法工作的。下拉菜单本来就是一个javascript组件。

没有bootstrap之前,写一个下拉菜单,要定义一个隐藏图层,当鼠标悬停或者点击相应的超级链接之后,此图层显示出来。当鼠标悬停在此隐藏图层,此隐藏图层依旧显示,当鼠标离开此隐藏图层,则此隐藏图层继续从显示变成隐藏,很麻烦的。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap下拉菜单
Bootstrap菜单
bootstrap 下拉菜单、bootstrap 下拉菜单树、bootstrap的下拉菜单、bootstrap3下拉菜单、bootstrap 下拉子菜单,以便于您获取更多的相关知识。

时间: 2024-08-31 09:00:54

Bootstrap下拉菜单效果实例代码分享_javascript技巧的相关文章

JS模拟bootstrap下拉菜单效果实例_javascript技巧

本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的

jquery实现select下拉框美化特效代码分享_javascript技巧

这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码.  为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&

Android仿泡泡窗实现下拉菜单条实例代码

功能描述:点击下拉按钮,显示出所有的条目,有删除和点击功能,点击后将条目显示. 注意:泡泡窗默认是没有焦点的.要让泡泡窗获取到焦点.假如listview的item中有Button,ImageButton,CheckBox等会强制获取焦点的view 此时,listview的item无法获取焦点,从而无法被点击 解决方法:给item的根布局增加以下属性 Android:descendantFocusability="blocksDescendants"设置之后,Button获取焦点,ite

js 单击式的下拉菜单效果实例_javascript技巧

复制代码 代码如下: <!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=&qu

ASP.NET实现级联下拉框效果实例讲解_实用技巧

用ASP.NET控件实现部门和员工的联动,参考过程如下效果图:  Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199

JavaScript实现下拉菜单的显示和隐藏_javascript技巧

我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏.使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单showsub()函数:使用getElementsByTagName获

用jquery实现下拉菜单效果的代码_jquery

效果如下:这是菜单的内容,用ul标签实现菜单: 复制代码 代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a>

jquery实现多级下拉菜单的实例代码_jquery

复制代码 代码如下: <!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><title>jquery实现多级下拉菜

JS 实现导航菜单中的二级下拉菜单的几种方式_javascript技巧

最近整理了, JS 实现导航菜单中的二级下拉菜单的三种方式,便于项目中应用.  如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margi