❀ 網頁右側懸浮導航制作
現在很多網站頁面上都會出現彈出窗口、右下角廣告窗、左下角論壇區等等，今天學習了一個右側懸浮導航的制作，即無論頁面超出屏幕多長，往下瀏覽頁面時，懸浮導航依然保持窗口位置不動，展示在用戶面前，下面和大家分享一下。（借用網站上的圖片資源）
1、首先得具有基本的logo和導航分類，然后規定一個盒子大小，將他們布局好。
2、基本布局完成就得給它設置觸動效果，鼠標觸碰分類，就會有相應的背景色變化，點擊之后就進入內頁瀏覽。
3、重點在於如何將導航盒子固定在一個右側的位置上不隨用戶的操作變動，用css樣式中的position:fixed（用於固定對象的位置）來實現，不置頂就給它一個距離，左浮動就設置"left:0px;"右浮動就設置"right:0px;"，為了能夠顯示效果，加文字使之超過一個頁面的大小可以上下滑動。
1 <body> 2 <div id="NavTop"> 3 <div id="NavCon"> 4 <img src="images/banner.png" class="banner"> 5 <ul> 6 <li><a href="#">獨家觀點</a></li> 7 <li><a href="#">前排明星</a></li> 8 <li><a href="#">秀場細節</a></li> 9 <li><a href="#">場外街拍</a></li> 10 <li><a href="#">秀場快訊</a></li> 11 </ul> 12 <img src="images/top.png" class="bottom"> 13 </div> 14 </div> 15 <p> 16 <br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa 17 <br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa 18 <br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa 19 <br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa 20 <br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa 21 <br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa 22 </p> 23 </body>
布局效果：
css樣式：
1 <style type="text/css"> 2 *{margin:0px; padding:0px; } 3 body{ 4 background:#000; 5 } 6 #NavTop{ 7 width:140px; 8 height:270px; 9 margin-top:50px; 10 position:fixed; right:0px;top:150px; /*固定位置,右浮動，距上150px*/ 11 } 12 #NavTop #NavCon{ 13 width:140px; 14 height:270px; 15 background:url('images/d.png') repeat-y; 16 position:relative; 17 border:1px solid black; 18 } 19 #NavTop #NavCon img.banner{ 20 position:absolute; 21 left:25px; 22 top:-40px; 23 } 24 #NavTop #NavCon ul{ 25 margin-top:40px; 26 } 27 #NavTop #NavCon ul li a{ 28 text-decoration:none; 29 color:#fff; 30 width:105px; 31 height:30px; 32 background:#555; 33 display:block; 34 margin-top:10px; 35 margin-left:20px; 36 line-height:30px; 37 text-align:center; 38 font-family:"微軟雅黑"; 39 font-size:14px; 40 } 41 #NavTop #NavCon ul li a:hover{ 42 background:#cc0066; 43 } 44 #NavTop #NavCon img.bottom{ 45 margin-top:15px; 46 } 47 p{color:red;} 48 </style>
效果如下：
