CSS實現導航條圖片的翻轉菜單

來源:互聯網
上載者:User
css|菜單|導航

  如果用傳統的方法製作這個翻轉菜單,至少需要把圖片切成10塊,還要加上JS代碼,在圖片按鈕上再加行為,現在完全用CSS來實現,圖片只要一張,見下圖:

  CSS代碼:

  #imgmenu{
  width: 450px;
  height: 25px; /*高度是背景圖片的一半*/
  background: url(/imagelist/06/43/473648jpj0j1.gif);
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  }
  #imgmenu li{
  float: left;
  }
  #imgmenu li a{
  display: block;
  width: 90px;
  height: 25px;
  }
  #imgmenu li#home a:hover,#activeh{
  background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px;
  /*翻轉時背景圖的位置,左邊0px,頂部-25px,
  背景圖的下半部分,下同*/
  }
  #imgmenu li#about a:hover,#activea{
  background: url(/imagelist/06/43/473648jpj0j1.gif) -90px -25px;
  /*第二個菜單的位置距左邊90px,
  每個菜單的寬度是90px*/
  }
  #imgmenu li#pro a:hover,#activep{
  background: url(/imagelist/06/43/473648jpj0j1.gif) -180px -25px;
  }
  #imgmenu li#faq a:hover,#activef{
  background: url(/imagelist/06/43/473648jpj0j1.gif) -270px -25px;
  }
  #imgmenu li#contact a:hover,#activec{
  background: url(/imagelist/06/43/473648jpj0j1.gif) -360px -25px;
  }<ul id="imgmenu">
<li id="activeh"><a href="#"></a></li>

<li id="about"><a href="#"></a></li>
<li id="pro"><a href="#"></a></li><li id="faq"><a href="#"></a></li>

<li id="contact"><a href="#"></a></li></ul>

  設計的更體貼,照顧純文字瀏覽的朋友:

  可以在LI內套入SPAN元素,加入文本連結,在風格中設SPAN不可見。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。