css實現側邊欄隱藏顯示效果

做企業網站時通常都會遇到需要做個側邊導航或者QQ之類的東西。通常在網站上看到的通過js時間的比較多。

下面我主要介紹三種通過css來實現側邊欄隱藏顯示的效果。

第一步 先把頁面中需要的元素給列出來。

<dl id="box">
<dt>側邊導航</dt>
<dd>
<a href="">QQ1</a><a href="">QQ2</a><a href="">QQ3</a><a href="">QQ4</a>
</dd>
</dl>

元素基本的css

body{overflow:hidden;}
dl,dt,dd{margin:0px;padding:0px;font-size:12px;}
dl{width:175px;background-color:#ddd;position:absolute; right:-157px;cursor: pointer;}
dt{width:10%;background:orange;float:left;text-align:center;color:#fff;padding:5px 0px;font-weight:bold;}
dd{width:90%;}
dd a{margin:5px; color:red;}

這些是我們基本的頁面元素

第二步 我們來分析一下側邊欄的運行原理

其實也沒什麼可分析的，它主要實現的也就是一個顯示隱藏效果。用到的事件分別是當滑鼠划上顯示，滑鼠划出隱藏。

談到滑鼠時間css能控制的滑鼠事件大家應該能想到就是：hover偽類。

ok。我們下面的3種實現方式都是通過：hover這個偽類來實現的。

第三步 切入正題

方法一：通過css2基本的偽類方式來實現

我們所要控制運動的選取器為dl；當滑鼠划上的時候修改dl的right屬性就OK了。代碼如下：

dl：hover｛right:0px;｝

這個是最簡單目前瀏覽器安全色最好的。如果沒有運動效果的要求這個足夠了。涉及到運動效果的時，css2就有點力不從心了。這時候我們就需要用到css3的新技術。

第四步 講講css3的控制動畫的屬性：animation和transition;

這兩個屬性都是css3中新增的用來實現動畫的屬性。

Animations：
animation-name:指定動畫主要畫面格名稱；（需要我們自己定義）
animation-duration:動畫執行時間；（比如1s表示1秒）
animation-timing-funcion:表示執行什麼種類的動畫，也就是動畫執行的計算種類；
animation-iteration-count:動畫執行次數，整數為多少表示執行多少次，infinite表示迴圈執行；
Transitions
property：表示對那個屬性進行動畫設定，比如background,color等（在後面的課程會列出可變換屬性列表）；
duration：表示在多長時間內完成動畫，也就是動畫執行事件，比如1s表示1秒，0.5s表示半秒；
timing-function：表示執行什麼種類的動畫，也就是動畫執行的計算種類，比如linear漸層（在後面的課程同樣也會列齣動畫執行的計算種類列表）

這兩個屬性在使用過程中不同瀏覽器下需要帶有不通的首碼（例如-webkit-****），在這裡便不再贅述；
animation-timing-funcion 和
timing-function 的參數有一下幾種：

1.linear	勻速運動
2.ease	運動速度 慢——快——慢
ease-in	起始速度比較慢
ease-out	臨近結束時速度變慢
ease-in-out	開始和結束時速度減慢 中間為勻速
cubic-bezier(n,n,n,n)	可以自行設定運動速度 但是不需是數字

區別：使用Transitions時只能通過指定屬性的開始值和結束值，然後在這兩個屬性之間進行平滑過渡的方式來實現動畫效果，因此它不能實現比較複雜的動畫效果；而Animations則可以通過多種方式定義中的元素屬性值來實現更為複雜的動畫效果。
第四步：先用Transitions來實現

同樣是控制dl

css如下：

dl:hover{right:0px;-moz-transition:right 1s ease-out;} ；

第五步：先用animation來實現
同樣是控制dl

css如下：

@-moz-keyframes show{0%{right:-100px;} 50%{right:-57px} 100%{right:0px;}}
dl:hover{-moz-animation:show 1s ease-out;right:0px;}

結語：css3的實現中我唯寫的firefox下的樣式，實際用的時候要注意加上其他幾個瀏覽器的相容。不過目前還比較噁心很多瀏覽器對css3的支援還不夠好，還是做mobile項目的比較幸福。呵呵~

 

 

http://blog.sina.com.cn/u/1779046463