仿PHP中文网导航条
一、功能代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php中文网</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="icon" href="picture/logo.png">
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<!-- 页面头部 -->
<div class="container-fluid">
<a href="javascript:;"><img src="picture/logo (1).png" alt=""></a>
<ul class="ul_box">
<li style="background:rgba(109,122,138,0.5);"><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">社区问答</a></li>
<li id="dictionary"><a href="">编程词典</a><i class="glyphicon glyphicon-triangle-bottom"></i>
<ul class="ul_box_dictionary">
<li><a href="">php词典</a></li>
<li><a href="">技术文章</a></li>
<li><a href="">jquery词典</a></li>
<li><a href="">php教程</a></li>
<li><a href="">html词典</a></li>
<li><a href="">小程序开发</a></li>
<li><a href="">javascript词典</a></li>
<li><a href="">html教程</a></li>
</ul>
</li>
<li><a href="">手册下载</a></li>
<li><a href="">工具下载</a></li>
<li><a href="">类库下载</a></li>
<li><a href="">特色课程</a></li>
<li><a href="">菜鸟学堂</a></li>
</ul>
<div class=".container-fluid_right">
<a href="">登录</a>
<a href="">注册</a>
</div>
<div class="clear"></div>
</div>
<script>
$(function(){
//实现‘编程词典’弹出功能
$('.ul_box_dictionary').hide();
$('#dictionary').hover(function(){
$(this).children('i').attr('class','glyphicon glyphicon-triangle-top')
$(this).children('ul').slideDown(500)
},function(){
$(this).children('i').attr('class','glyphicon glyphicon-triangle-bottom')
$(this).children('ul').slideUp(500)
})
//实现‘编程词典’弹出后移动到ul各个li的事件
$('.ul_box_dictionary li').hover(function(){
$(this).css('background','#ccc')
},function(){
$(this).css('background','#fff')
})
})
</script>
</body>
</html>css样式代码
*{margin: 0px;padding: 0px;}
body{
background: #F3F5F7;
font-size: 14px;
}
.clear{clear: both;}
.container-fluid{
height: 60px;
background: black;
line-height: 60px;
}
.container-fluid a img{
width: 135px;
height: 60px;
float: left;
}
.container-fluid ul{
float: left;
}
.ul_box>li {
list-style: none;
width: 100px;
height: 60px;
text-align: center;
float: left;
margin-left: 10px;
cursor: pointer;
}
.container-fluid a {
text-decoration: none;
color: #ccc;
}
.container-fluid div{
float: right;
right: 10px;
}
.container-fluid div a{
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
}
.ul_box>li:hover{
border-bottom: 3px solid #A5EA6A;
}
.ul_box>li>a:hover{
color: #fff;
}
.container-fluid div a:hover{
color: #fff;
background:rgba(109,122,138,0.5);
}
i{
color: #ccc;
margin-left: 5px;
}
.ul_box_dictionary{
width: 220px;
height: 160px;
margin-top: 10px;
padding: 5px 0;
background: #fff;
}
.ul_box_dictionary li{
width: 110px;
height: 36px;
list-style: none;
float: left;
text-align: center;
line-height: 36px;
}
.ul_box_dictionary li a{
color: #313131;
}