优美网站首页，顶部多层导航

 

一个个人用的浏览器首页，可以把一下常用的网站放在这里，平常打开会比较方便。

 第一步，HTML代码

<script src="js/jquery-3.4.1.min.js"></script>
<div id="navigate">
<ul>
<li class="labels labels_1">
<p id="labels_1" >搜索</p>
<div class="tab one">
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
</div>
</li>
<li class="labels labels_2">
<p id="labels_2" >工作</p>
<div class="tab two">
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
</div>
</li>
<li class="labels labels_3">
<p id="labels_3" >学习</p>
<div class="tab three">
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
</div>
</li>
<li class="labels labels_4">
<p id="labels_4" >娱乐</p>
<div class="tab four">
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
<p><a href="#" target="_blank">名字</a></p>
</div>
</li>

</ul>
</div>

 

第二步，为HTML设置样式

 

*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: white;
text-align: center;
}
body{
min-height: 100vh;
/*背景图片路径*/
background: url(https://raw.githubusercontent.com/szharf/hello-world/master/images/%E4%B9%A6%E6%88%BF.jpg) no-repeat;
background-size:100% 100%;
font-family: "微软雅黑";
}
#navigate{
width: 80%;
height: 50px;
margin: auto;
background-color: rgba(205,104,57,0.8) ;
}
.labels{
border-bottom:solid gainsboro 1px;
float: left;
width: 25%;
line-height: 50px;
font-size: 20px;
}
.tab{
display: none;
background-color:rgba(238,118,33,0.8);
overflow:auto;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
font-size: 16px;
line-height: 40px;
}
/*美化滚动条*/
.tab::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 3px rgba(238,118,33,0.3);
background-color:#F5F5F5;
}
.tab::-webkit-scrollbar {
width:5px;
background-color:#font: 5px F5 F5;;
}
.tab::-webkit-scrollbar-thumb {
background-color:#CD6839;
border:2px solid #CD6839;
}

第三步，用jQuery添加事件

 

$(function(){
//鼠标悬浮显示div的内容
$(".labels_1").mouseover(function () {
$(".one").slideDown();
//鼠标离开，div隐藏
}).mouseleave(function () {
$(".one").slideUp();
})
//2
$(".labels_2").mouseover(function () {
$(".two").slideDown();
}).mouseleave(function () {
$(".two").slideUp();
})
//3
$(".labels_3").mouseover(function () {
$(".three").slideDown();
}).mouseleave(function () {
$(".three").slideUp();
})
//4
$(".labels_4").mouseover(function () {
$(".four").slideDown();
}).mouseleave(function () {
$(".four").slideUp();
})

//获取页面高度,减去顶部高度
var height =$(window).height()-51;
//获取内容的高度
var height1 =$('.one').outerHeight();
//判断div高度是否大于页面高度
if(height1>=height){
//当div高度大于页面高度时,为div设置高度
$(".one").height(height);
}
var height2 =$('.two').outerHeight();
if(height2>=height){
$(".two").height(height);
}
var height3 =$('.three').outerHeight();
if(height3>=height){
$(".three").height(height);
}
var height4 =$('.four').outerHeight();
if(height4>=height){
$(".four").height(height);
}
})

好了，很简单，这就已经完成了