用css+js實現自動伸縮導航欄
需要達到的效果：
- 默認首頁選中樣式
- 設置鼠標滑過效果：顏色變化(#f60),寬度變化，字體變化
所涉及的知識點：
- 布局：float
- css: 元素狀態切換(display),盒模型(margin,padding),圓角邊框(border-radius),可見寬度(offsetWidth);
- JavaScript:匿名類，for循環,通過標簽獲得元素(getElementsByTagName),方法自動間隔運行(setInterval/clearInterval)
基本架構
無序列表:<ul>，<li>,是與導航欄語義比較貼切的標簽，然后將<a>標簽放到<li>內部即可實現導航欄html部分。
<ul class="nav" >
<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>
樣式修改
取消默認樣式
把瀏覽器默認的盒模型值，列表樣式以及鏈接樣式的默認樣式取消，並且把字體顏色改成黑色。
*{margin: 0;padding: 0;
font-size: 14px;}
li{list-style: none;}
a{text-decoration: none;
color: #000;}
設置骨架
- 通過將/設置成塊狀標簽，即可達到給/設置寬高的目的；
- 通過float：left使導航欄從縱向排列變成橫向排列；
- 通過將line-height屬性設置的跟height一樣，實現導航欄文字垂直居中；
- 通過text-aligin將導航欄文本水平居中。
li{list-style: none;float:left;}
li a{display:block;width: 100px;
height: 30px;line-height: 30px;
text-aligin:center; }
顏色以及細節修改
- 設置導航欄默認顏色，並且通過margin屬性是導航標簽產生間隔。
- 將導航欄四個角通過border-radius設置成圓角。
- 通過給a標簽屬性設置class=on，以及偽類選擇器a:hover將【首頁】和【鼠標滑過】的樣式顏色設置為#f60，字體顏色設置為白色。
li a{
display:block;
width: 100px;
height: 30px;
line-height: 30px;
background-color: #efefef;
margin-left:1px;
border-radius: 5px;
}
.on,.nav li a:hover{
background-color: #f60;
color: #fff;
}
設置導航欄的底邊
- 通過border-bottom屬性制作導航欄的“腳”;
- 要知道我們已經將<li>設置成了float，因此它已經脫離了文本檔，那么其父元素的默認height值也就為0，需要自己設定；
- 通過margin,padding屬性移動導航欄主體部分。
ul{height:50px;
border-bottom:5px solid #f60;
padding-left:20px;}
li{margin-top:20px;}
鼠標划過改變行高
- 通過hover設置鼠標划過后的行高
- 此時會發現導航欄向下移動了，通過將margin設置為負值，向上移動。
.on,.nav li a:hover{
height: 40px;
line-height: 40px;
margin-top: -10px;}
鼠標划過自動伸縮
一、 鼠標划過導航欄自動延伸
- 首先要獲得標簽元素，可以通過getElementsByTag；
- 要給每一個標簽設置，可以通過for循環遍歷；
- 鼠標划過事件通過 onmouseover設置；
- 在方法里通過var變量獲得當前標簽元素。
- 設置自動延伸，可以通過setInterval方法，讓方法以固定的時間為間隔，反復執行；
- 此時導航欄會無限延伸，通過if設置條件，設置導航欄延伸停止時機。
window.onload=function(){
var aA=document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++){
aA[i].onmouseover=function(){
var This=this;
clearInterval(This.time);//初始化
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=150){
clearInterval(This.time)
}
},30);
}
}
}
二、鼠標離開自動縮
aA[i].onmouseout=function(){
var This = this;
clearInterval(This.time);//初始化
This.time=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=100){
clearInterval(This.time);
}
},30);
}
}
最終代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導航欄</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 14px;
}
a{
text-decoration: none;
color: #000;
}
ul{
list-style: none;
height: 50px;
border-bottom: 5px solid #f60;
padding-left: 20px;
}
li{
margin-top: 20px;
float: left;
}
.nav li a{
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #efefef;
margin-left: 1px;
border-radius: 5px;
}
.nav .on,.nav li a:hover{
height: 40px;
line-height: 40px;
margin-top: -10px;
background-color: #f60;
color:#fff;
}
</style>
<script type="text/javascript">
window.onload=function(){
var aA = document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++){
aA[i].onmouseover=function(){
// 此處this為當前a標簽
var This = this;
// 設置方法停止的時機
clearInterval(This.time);
// 設置方法每30毫秒運行一次
// 其中offsetWidth:對象的可見寬度,包括width+padding-border
// 當offsetWidth>=120時,程序停止
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=160){
clearInterval(This.time);
}
},30);
}
aA[i].onmouseout=function(){
var This = this;
clearInterval(This.time);//初始清理
This.time=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=120){
clearInterval(This.time);
}
},30);
}
}
}
</script>
</head>
<body>
<ul class="nav">
<li><a class="on" href="#">首頁</a></li>
<li><a href="#">新聞快訊</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">售后服務</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</body>
</html>
