CSSの水平ナビゲーションメニューを作成するには？

Question

私は次のスタイルに応じて、CSSのナビゲーションを行う必要があります。

以下目的の外観

は、私が行っているデザインです： -

1）展示A - スプライトで作成

注：メニュー項目

専門家の配置無視：うまく機能し、目的の外観

短所がある：別のメニュー項目を追加する必要がある場合を、別のその特定のメニュー項目の画像を手動で作成する必要があります。すなわち、拡張可能ではない

2）別紙B

長所：非常に拡張可能。別のメニュー項目を追加する必要がある場合は、新しい余分な画像を作成する必要はありません。 HTMLコードにはメニュー名だけを入力する必要があります。

短所：ホバー効果は希望の外観と同じではありません。

マイ要件

は、メニュー項目が作成されたときに、余分な画像を追加することなし展示が、からホバー効果とともに、別紙Bを使用することです（これは何ですで表示されます。表示A、希望のホバー効果があります）。

私のアプローチ：

1. スタート3枚の画像

a）の最も左側の1つのメニュー項目を使用した場合のホバー効果について別紙B

での作業エッジ

b）中間aのスライスレア

c）の右端のエッジ

は、これは正しいですか？

これは可能ですか？

良い方法がありますか？ tuteへのリンクは問題ありません。展示用

おかげ

---

1] CSSコード展示B用

@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] 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; 
} 

Answer 1

さてあなたは、技術的には2つだけを必要としますスプライト、ワイドレフトt +本体と右側。ワイドでは、400ピクセル、または任意のワイド・サイズで、打つことを予想しません。あなたは使いやすいようにkbを取引しています。 CSSで

<ul class="list"> 
    <li><a href="#">Text</a></li> 
</ul> 

のような：あなたは次のようなマークアップを持っていることによって、これを達成することができます

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に高さを適用する必要があります（表示を必要とする可能性があります：インラインブロックまたは線の高さ）。