導航–CSS控制矩陣導航圖片平移實現的導航

來源:互聯網
上載者:User

這次的導航,使用導航矩陣技術來解決圖片替換與多個狀態所提出的挑戰。導航矩陣使用一個單個圖圖片和一組樣式組合,把一個未排序列錶轉換為一個圖片替換的菜單。這項技術通過“背景—位置”屬性把這個圖片在各個清單項目周圍移動,確保將表示該清單項目及其狀態的那部分圖片顯示出來。

在導航中使用單個圖片有一點額外的好處,就是提供了對滑鼠移至上方狀態的快速反應,當瀏覽器在裝載滑鼠移至上方狀態下的圖片時,看不出哦延遲。下面來看實現的執行個體,其中需要用到的圖片如下:

圖片的尺寸:

1、HTML代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  <title>Vertical Navigation</title><!--meta標記定義的字元集是支援中文的gb2312--><meta http-equiv=content-type content="text/html; charset=gb2312"><!--連結外部CSS樣式 --><link rel="stylesheet" href="advanced-tabs.css" type="text/css" media="screen" /></head><body id="body_his"> <!--為body設定一個id屬性,和導航的id關聯起來以指出使用者目前在瀏覽網站的哪個頁面或哪個區 --><!--直接將導航項目包含在一個列表中,為排序列表和div一樣屬於塊層級元素,所以直接將id賦予列表自身 -->  <ul id="nav">  <!--為列表的每個項目都設定唯一的id -->    <li id="nav_hom"><a href="/">Home</a></li>    <li id="nav_map"><a href="/maps/">Maps</a></li>    <li id="nav_jou"><a href="/journal/">Journal</a></li>    <li id="nav_his"><a href="/history/">History</a></li>    <li id="nav_ref"><a href="/references/">References</a></li>    <li id="nav_con"><a href="/contact/">Contact</a></li>  </ul></body></html>

2、CSS代碼

/*CSS STYLE SHEET FOR [advanced-tabs.html] Created by [Serein_Chan]Email: [Serein_Chan@foxmail.com]Author Blog:[http://blog.csdn.net/cxwen78]*//*注釋 */#nav {  width: 767px;/*採用圖片替換保證了菜單有固定的寬度和高度 */  height: 30px;  position: relative;/*為排序列表是相對位置,為裡面的連結的位置作參照基準 */  background: url(images/menu.jpg); /*加入菜單圖片 */  margin: 0;      padding: 0;}#nav li {  float: left; /*清單項目左浮動,消除IE的雙邊距留下的空白BUG */} /*為連結元素設定樣式 */#nav li a {  position: absolute;  top: 0;  margin: 0;  padding: 0;  display: block; /*區塊層級元素 */  height: 30px;/*設定高度 */  background: url(images/menu.jpg) no-repeat;  /*添加背景圖片 */  text-indent: -9999px; /*將文本移出頁面 */  overflow: hidden;/*圖片超出地區的部分隱藏 */  font-size: 1%;}/*為具體的每個清單項目的連結元素進行定位和圖片的移動 *包括指定寬度,用left屬性,即左位移,將其置於準確的位置 *對背景圖片進行移動。 *對於每個清單項目的確切位置以及圖片的移動要進行事先的精確的計算 */li#nav_hom a {  left: 0;  width: 112px;  background-position: 0 0;}li#nav_map a {  left: 112px;  width: 109px;  background-position: -112px 0;}li#nav_jou a {  left: 221px;  width: 129px;  background-position: -221px 0;}li#nav_his a {  left: 350px;  width: 131px;  background-position: -350px 0;}li#nav_ref a {  left: 481px;  width: 153px;  background-position: -481px 0;}li#nav_con  a {  left: 634px;  width: 133px;  background-position: -634px 0;}/*設定滑鼠移至上方時標籤的轉變的狀態,即把背景圖片的位置左移並上調 */li#nav_hom a:hover {  background-position: 0 -30px;}li#nav_map a:hover {  background-position: -112px -30px;}li#nav_jou a:hover {  background-position: -221px -30px;}li#nav_his a:hover {  background-position: -350px -30px;}li#nav_ref a:hover {  background-position: -481px -30px;}li#nav_con a:hover {  background-position: -634px -30px;}/*在body元素上利用id屬性並把它與特定的清單項目的id關聯,實現導航上啟用“當前位置” *繼續把背景圖片向上移動,就像處理滑鼠移至上方狀態那樣*/#body_hom li#nav_hom  a {  background-position: 0 -60px;}#body_map li#nav_map a {  background-position: -112px -60px;}#body_jou li#nav_jou a {  background-position: -221px -60px;}#body_his li#nav_his a {  background-position: -350px -60px;}#body_ref li#nav_ref a {  background-position: -481px -60px;}#body_con li#nav_con a {  background-position: -634px -60px;}

3、

參考:《The
Art & Science of CSS》

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.