Заоблено хоризонтално меню с нефиксирана ширина
28-07-2010
Менюто което ще покажа, работи под всички бразъри, направено е с картинки, знам че може и с 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;
}



Най-добре се вижда от демото.

СВАЛИ ДЕМО














/ Трябва да сте регистриран за да напишете коментар /
От: emagi
0:18 29-07-2010
Браво, добър и ценен урок!
От: sharky_design
21:21 05-08-2010
Както каза emagi едно голямо браво ! Харесва ми менюто :)
От: afsh
12:15 07-09-2010
По всички правила! Поздравления за полезното уроче!
От: bugi_gogo
21:07 12-09-2010
Браво Супер Урок
От: lam3r4370
14:28 30-12-2010
Изключително добър урок!
От: batmanabg
13:16 22-07-2011
Полезен урок.
От: pikefisher
19:02 30-07-2011
Урочето е добро, но може ли някой да каже как да центрирам менюто?
Благодаря предварително!
От: pikefisher
19:41 30-07-2011
Урочето е добро, но може ли някой да каже как да центрирам менюто?
Благодаря предварително!
От: shterev
23:56 30-07-2011
Еми как, задаваш ширина на ул-а и margin:0 auto; и готово.
От: pikefisher
12:19 31-07-2011
Благодаря! Така става, но ако искам да добавя още елементи към менюто, ще трябва да преоразмерявам ul. Какво ще кажете за display: inline, вместо float?
Начинаещ съм и много не ги разбирам тия работи, така, че благодаря предварително!
От: shterev
15:27 31-07-2011
Ами да - при добавяне на други линкове, ще трябва да задаваш и друга ширина на . Това може да го направиш с javascript, който ти брои тата взима ширианта и я задава на . Това ако искаш да е по динамично менюто. Вариянта с инлайн тук не става, защото имаш зададени блокови елементи.
1