優美網站首頁，頂部多層導航

 

一個我的用的瀏覽器首頁，能夠把一下經常使用的網站放在這裏，日常打開會比較方便。

 第一步，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);
}
})

好了，很簡單，這就已經完成了