[英]How to make a CSS horizontal navigation menu?
我需要根據以下樣式進行CSS導航:
期望的外觀
以下是我已經完成的設計:
1)展覽A-使用精靈制作
注意: 忽略菜單項的排列
優點:運作良好,並具有所需的外觀
缺點:如果需要添加另一個菜單項,則必須為該特定菜單項手動制作另一個圖像。 即。 不可擴展
2)圖B
優點:非常可擴展。 如果必須添加另一個菜單項,則無需制作新的額外圖像。 僅菜單名稱需要在html代碼中鍵入。
缺點:懸停效果與所需外觀不同。
我的要求
就是用附錄B中 ,與附錄A中懸停效果一起,但無需創建一個菜單項時添加額外的圖像(這是在附錄A發生了什么,盡管它具有所需的懸停效果)。
我的方法:
a)最左邊
b)重復中段
c)最右邊
這個對嗎 ?
這可能嗎 ?
有沒有更好的辦法? 鏈接到tute會很好。
謝謝
1]附件A的CSS代碼
@charset "UTF-8";
* {
margin:0;
padding:0;
list-style: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
.clear {
clear:both;
}
.nav-container {
width: 960px;
}
#navMenu{
display: inline;
margin: 0;
padding: 0px;
position: relative;
z-index: 5;
}
#navMenu li{
float: left;
display: inline;
}
#navMenu li.navRepeat{
float: left;
display: inline;
background-image:url("../images/navigation_repeat.gif");
width:425px;
height:40px;
}
#navMenu li.navRepeatEnd{
float: right;
display: inline;
background-image:url("../images/navigation_repeat_end.gif");
width:1px;
height:40px;
}
a.navReservations{
display:block;
float:left;
width:89px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reservations.gif")
}
a.navReservations:hover{
background: url("../images/reservations.gif") 0 40px;
}
a.navRentals{
display:block;
float:left;
width:62px;
height:40px;
background-repeat:no-repeat;
background: url("../images/rentals.gif")
}
a .navReservations {
float: left;
display: inline;
height: 100px;
width: 400px;
}
a.navRentals:hover{
background: url("../images/rentals.gif") 0 40px;
}
a.navTariffs{
display:block;
float:left;
width:59px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tariffs.gif")
}
a.navTariffs:hover{
background: url("../images/tariffs.gif") 0 40px;
}
a.navFleet{
display:block;
float:left;
width:64px;
height:40px;
background-repeat:no-repeat;
background: url("../images/fleet.gif")
}
a.navFleet:hover{
background: url("../images/fleet.gif") 0 40px;
}
a.navTools{
display:block;
float:left;
width:56px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tools.gif")
}
a.navTools:hover{
background: url("../images/tools.gif") 0 40px;
}
a.navReports{
display:block;
float:left;
width:71px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reports.gif")
}
a.navReports:hover{
background: url("../images/reports.gif") 0 40px;
}
a.navSystem-Management{
display:block;
float:left;
width:133px;
height:40px;
background-repeat:no-repeat;
background: url("../images/system_management.gif")
}
a.navSystem-Management:hover{
background: url("../images/system_management.gif") 0 40px;
}
2]附件B的CSS代碼
#navigation {
width: 959px;
height: 36px;
margin: 0;
padding: 0;
background-image: url(images/navigation-bg.gif);
background-repeat: no-repeat;
background-position: left top;
border: 1px solid #CCC;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: inline;
margin: 0px;
}
#navigation ul li a {
height:27px;
display: block;
float: left;
color: #000;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-image: url(images/navigation-separator.gif);
background-repeat: no-repeat;
background-position: right center;
padding-top: 6px;
padding-right: 15px;
padding-left: 15px;
vertical-align: 10%;
padding-bottom: 4px;
}
#navigation ul li a:hover {
color:#FFF;
background-image: url(images/navigation-hover.gif);
background-repeat: repeat-x;
background-position: left top;
}
#navigation ul li#active a {
color:#363636;
background: url(images/navigation-hover.png) repeat-x left top;
}
好吧,從技術上講,您只需要兩個精靈,即選項卡的左側+主體和右側。 寬,我的意思是400px或您不希望碰到的任意大的尺寸。 您正在交易kb以便於使用。 您可以通過以下標記來實現此目的:
<ul class="list">
<li><a href="#">Text</a></li>
</ul>
與CSS像:
ul.list
{
list-style-type: none;
margin: 0;
}
ul.list li
{
float: left;
background: url(leftpluswide.png) top left no-repeat;
}
ul.list li a
{
background: url(right.png) top right no-repeat;
}
唯一的警告是,由於right.png將與li的背景重疊,因此您需要確保它沒有任何透明度。
同樣,出於完整性考慮,您可能需要為li和a設置一個高度(這可能需要使用display:inline-block或line-height來使之對齊),以使所有內容對齊。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.