bootstrap 下拉菜单改为鼠标悬停弹出效果
程序员文章站
2022-03-09 12:05:43
...
修改下拉菜单样式
<style type="text/css">
.navbar .nav > li .dropdown-menu {
margin: 0;
}
.navbar .nav > li:hover .dropdown-menu {
display: block;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<!-- 导航条logo部份 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<!-- 导航条菜单和表单部份 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">菜单名称<span class="sr-only">(current)</span></a></li>
<li><a href="#">菜单名称</a></li>
<li class="dropdown">
<a href="#">下拉菜单<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></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>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">投稿</a></li>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
上一篇: bootstrap气泡弹窗使用——pc端
下一篇: Bootstrap 设置File样式
推荐阅读
-
Bootstrap下拉菜单更改为悬停(hover)触发的方法
-
bootstrap modal+gridview实现弹出框效果
-
bootstrap 弹出框modal添加垂直方向滚轴效果
-
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
-
bootstrap实现二级下拉菜单效果
-
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
-
Bootstrap下拉菜单更改为悬停(hover)触发的方法
-
整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
-
Bootstrap警告框、弹出提示层、模态框的js插件效果总结
-
bootstrap modal+gridview实现弹出框效果