导航栏Navigator
自定义了导航栏,改成了黑色背景 和 鼠标悬停展示子菜单
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="${base}"><span class="ux-logo">JeeWeiXin</span></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="${base}">Java编程</a></li>
<li><a href="${base}">小程序编程</a></li>
<li><a href="${base}">Spring编程</a></li>
<li><a href="${base}">前端编程</a></li>
<li><a href="${base}">源码下载</a></li>
<li><a href="${base}">软件工具</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" >
Java笔试面试 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="${base}">面试技巧篇</a></li>
<li class="divider"></li>
<li><a href="${base}">Java八股文</a></li>
<li><a href="${base}">Spring系列</a></li>
<li><a href="${base}">MyBatis系列</a></li>
<li class="divider"></li>
<li><a href="${base}">机试编程</a></li>
<li><a href="${base}">JVM系列</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" >
更多 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="${base}">小程序开发</a></li>
<li><a href="${base}">MySQL</a></li>
<li><a href="${base}">Git和SVN</a></li>
<li><a href="${base}">Maven</a></li>
<li><a href="${base}">CentOS建站</a></li>
<li><a href="${base}">jeeweixin项目</a></li>
<li><a href="${base}">GitHub收藏</a></li>
<li><a href="${base}">编程副业赚钱</a></li>
<li><a href="${base}">wiki导航</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
$(function(){
hoverDropdown();//菜单悬停展开,(去掉data-toggle="dropdown")
})
function hoverDropdown(){
$('.dropdown').mouseover(function(){
$(this).addClass('show');
$(this).find(".dropdown-menu").addClass('show');
}).mouseout(function(){
$(this).find(".dropdown-menu").removeClass('show');
$(this).removeClass('show');
});
}
</script>
<style type="text/css">
.container-fluid{
padding-left:80px;
padding-right:80px;
}
.ux-logo{
font-size: 24px;
color: #FFF;
letter-spacing: 1px;
}
.dropdown-menu > li > a:hover,:focus{
text-decoration: none;
color: #FFF;
background-color: #3D3D3D;
}
.dropdown-menu > a:hover,:focus{
text-decoration: none;
outline: 0;
color: #FFF;
background-color: #3D3D3D;
}
</style>