用CSS簡單製作網頁中的翻轉菜單

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


CSS代碼:
#imgmenu{
width: 450px;
height: 25px; /*高度是背景圖片的一半*/
background: url(../images/navbg.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(../images/navbg.gif) 0 -25px;
/*翻轉時背景圖的位置,左邊0px,頂部-25px,
背景圖的下半部分,下同*/
}

#imgmenu li#about a:hover,#activea{
background: url(../images/navbg.gif) -90px -25px;
/*第二個菜單的位置距左邊90px,
每個菜單的寬度是90px*/
}

#imgmenu li#pro a:hover,#activep{
background: url(../images/navbg.gif) -180px -25px;
}

#imgmenu li#faq a:hover,#activef{
background: url(../images/navbg.gif) -270px -25px;
}

#imgmenu li#contact a:hover,#activec{
background: url(../images/navbg.gif) -360px -25px;
}
XHTML:
<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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。