Заоблено хоризонтално меню с нефиксирана ширина

Автор: shterev

Менюто което ще покажа, работи под всички бразъри, направено е с картинки, знам че може и с CSS3, но съм избрал този начин, понеже работи и в IE6.

Необходими са ни 4 картинки, като 2 за нормално състояние и 2 при посочване. Могат да се направаят картинките и в спарай, т.е. да са 2 или дори 1 картинка, но не го направих така, за да се схване идеята, а е по-лесно за арзбиране.За менюто ще използваме списък със линк и елемент <strong>

Създаваме си един <ul>списък. <li>елементите се float-ват, за да могат да са в горизонтална позиция.Задаваме съшо и padding-right , за да има разстояние между самите бутони.Създаваме си <а>таговете, като в тях има по един <strong>. Тук идеята е да зададем едната картинка на <а>тага, а другата на самия <strong>, за да може колкото и дълга да е думата картинката един вид да се разтяга.Така, на <a>такага задаваме да е блоков елемент, flot-ваме , но не ми задаваме ширина.По този начин <а> тага заема ширината на текста, който е в него. Задаваме лявата част на картинката , която е винаги в лявата част.

Елемента <strong>

също го задаваме да е блоков елемент, флоатнат също няма ширина, а само височина.Дясната част на картинката се задава с позиция right top, като тази картинка се прави по-удължена, за да моеже при повече текст да се ‘разпъне’, като винаги дясната част( заобленото ) стои в дясно.Задаваме cursor:pointer; понеже в ИЕ6 курсора не е ‘ръчичка/пойнтер’;
Не съм споменал за падингите, които мисля, че са ясни и всеки може да си ги настройва.

След списъка<ul>

съм сложил див с клас .clear , който изчиства флоатинга.Това се прави с цел следващия елемент да не се залепи до менюто, а и често забелязвам такава греша да се прави и да се чудят после хората защо така се бъгва.

Примера може да се доразвие, като се сложи и някакъв орнамет, стрелкичка, кото да е центрирана според ширината на текста.

Ето и html:

<ul id="nav">
<li><a href="#"><strong>Начало</strong></a></li>
<li><a href="#"><strong>За нас</strong></a></li>
<li><a href="#"><strong>Продукти</strong></a></li>
<li><a href="#"><strong>Клиенти</strong></a></li>
<li><a href="#"><strong>Контакти</strong></a></li>
<li><a href="#"><strong>Клиентите за нас</strong></a></li>
</ul>

Това е CSS:

body{
padding:30px 0 0 0; margin:0;
background:#908f8f;
}
.clear{
clear:both; height:0px; font-size:0px; line-height:0px;
}
#nav{
margin:0;
padding:0;
list-style-type:none;
}

#nav li{
padding-right:4px;
float:left;
}

#nav a{
padding-left:9px;
display:block;
float:left;
height:21px;
color:#ff0000;
float:left;
font:bold 12px Tahoma;
text-decoration:none;
background: url(left.png) no-repeat;
}

#nav a strong{
padding:3px 9px 0 0;
height:19px;
float:left;
display:block;
cursor:pointer;
background: url(right.png) no-repeat right top;
}

#nav a:hover{
color:#ffffff;
background: url(left_green.png) no-repeat;
}

#nav a:hover strong{
background: url(right_green.png) no-repeat right top;
}