【html】【13】特效篇--下拉导航

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>Bootstrap导航条鼠标悬停下拉菜单</title>
 6     <link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">
 7     <script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
 8     <script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script>
 9     </head>
10     <body>
11         <div class="container">
12
13                 <div class="navbar">
14         <div class="navbar-inner">
15           <ul class="nav">
16             <li class="dropdown"> <a href="#menu3">Menu3</a>
17               <ul class="dropdown-menu">
18                 <li><a href="#menu7">Menu7</a></li>
19                                 <li><a href="#menu8">Menu8</a></li>
20               </ul>
21             </li>
22             <li><a href="#">Menu4</a></li>
23             <li><a href="#">Menu5</a></li>
24             <li><a href="#">Menu6</a></li>
25           </ul>
26         </div>
27       </div>
28             </div>
29     </body>
30 </html>

css:

1 .navbar .nav > li .dropdown-menu {
2     margin: 0;
3 }
4 .navbar .nav > li:hover .dropdown-menu {
5     display: block;
6 }

效果：

参考：http://runjs.cn/detail/k4ahmcgc

转载于:https://www.cnblogs.com/aiqingqing/p/5037596.html

【html】【13】特效篇--下拉导航相关推荐

一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
mui 组件：“div下拉导航”【scroll固定位置】- 案例篇
(含代码.效果图)侧滑导航:"div下拉导航" 截图如下: 重要代码 · 如下: //下拉菜单定位:动态锁定 window.onscroll = function(){let sc ...
MUI下拉导航组件 - 应用篇
MUI下拉导航组件 - 看效果图注意: 滚动监听,自动获取Y轴滚动高度,始终定位(下拉菜单高度)于页眉底部: 代码待优化点:(下拉菜单的fixed,仍会随页面滚动而滚动). 效果图全部代码: &l ...
Bootstrap鼠标悬停下拉导航总结
文章目录 Bootstrap鼠标悬停下拉导航总结方案一 · 源码修改添加css代码方案二 · 不改动源码附件:压缩版本 de 源码修改 Bootstrap鼠标悬停下拉导航总结以bootstr ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
使用Axure RP 8制作两种导航菜单-下拉导航
日常在绘制web端原型时,往往会涉及到导航栏的制作,文章主要记录两种常见导航栏的绘制方法. 首先我们看一下两种导航方式,一种是点击一级菜单,出现下拉的二级菜单:另一种是鼠标移入时显示二级菜单的悬浮框, ...
关于网站下拉导航的设置
网站的导航很多都是下拉的方式,如下图所示: 就是一种下拉菜单,导航的数据是以ul.li相互嵌套的方式存在的. ------------------------------------------ &l ...
【Android UI设计与开发】第11期：顶部标题栏（二）ActionBar实现Tab选项卡和下拉导航列表
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573 在上一篇文章中,我们只是大概的了解了一下关于ActionBar ...
自制纯css下拉导航
自己动手用纯css写了一个下拉导航,下面把代码呈上.主要用到了伪类,相对定位,绝对定位的知识. <doctype html> <html> <head> <m ...

【html】【13】特效篇--下拉导航

【html】【13】特效篇--下拉导航相关推荐

最新文章

热门文章