最近在学习bootstrap框架,实现顶部导航条并加上hover实现一些特效;
<nav class="nav navbar-inverse" role="navigation">
<div class="navbar-header">
<img src="../image/logo.png" width="50" height="50" class="img-circle navbar-left">
<a href="#" class="navbar-left"><p class="navbar-text" style="color: whitesmoke; font-size: 15px;font-family: 楷体">燕大科技</p></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="" class="dropdown-toggle txt" data-toggle="dropdown" style="color: white">
<span class="glyphicon glyphicon-plus-sign" ></span>加入</a>
<ol class="dropdown-menu" style="min-width: 110px">
<!--弹出页面-->
<li><a href="#" class="txt"><span class="glyphicon glyphicon-plus"></span>加入班级</a></li>
</ol>
</li>
<li><a href="#" class="txt" style="color: white;"><span class="glyphicon glyphicon-bell" ></span>通知</a></li>
<li class="dropdown" style="margin-right: 20px"><a href="#" class="dropdown-toggle txt" data-toggle="dropdown" style="color: white">
<span class="glyphicon glyphicon-user" ></span>个人</a>
<ol class="dropdown-menu" style="min-width: 120px">
<li><a class="txt" href="#"><span class="glyphicon glyphicon-home"></span>我的主页</a></li>
<li><a class="txt" href="#"><span class="glyphicon glyphicon-education"></span>教学课堂</a></li>
<li><a class="txt" href="#"><span class="glyphicon glyphicon-cog"></span>账号管理</a></li>
<li class="divider"></li>
<li><a class="txt" href="#"><span class="glyphicon glyphicon-off"></span>登出</a></li>
</ol>
</li>
</ul>
</nav>
CSS代码
*{
margin: 0;
padding: 0;
}
.txt{
font-family: 楷体;
font-size: 15px;
text-align: center;
text-decoration: none;
color: white;
}
ul>li:hover>a>span{
opacity: 0.5;
font-size: 17px;
}
ul>li:hover>ol{
display: block;
width: 35px;
}
ul>li>ol>li:hover .txt{
background: rgba(100,100,100,0.15);
font-size: 17px;
}
看看效果图:
鼠标悬浮在图标上,自动显示二级菜单内容;同时,鼠标悬浮在二级菜单内容,列表内容会实现放大特效;
存在一个问题:
<li><a href="#" class="txt" style="color: white;"><span class="glyphicon glyphicon-bell" ></span>通知</a></li>
//这行代码中,引入的txt CSS样式中已经设置color:white;
但是并不能对图标以及与图标相邻的文字产生影响;于是我加入了内置CSS样式,改变颜色;
这个问题大家懂的可以私聊我;
更多推荐
bootstrap实现导航条,并利用hover实现鼠标悬浮特效
发布评论