Помогни ни да направим Uroci.net по - богат! Добави урок

CSS меню

fix3d   трудност:    видян: 16530


Менюто не е нищо друго освен подредени елементи, на които може да се натиска. В урока ще направим хоризонтално меню, като имаме в предвид че вертикалното меню се основава на същите принципи.

Хоризонталното меню функционира по следния начин: единственото, което трябва да се направи е да се наредят елементи един до друг, вместо един над друг.

Техниката в урока се обуславя на css атрибута "float: left", което кара елементите да са подредени в ляво.

Конструкция на просто хоризонтално меню:

CSS кода:

body {font: 14px Verdana, Arial, sans-serif;}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}

li { float: left;} /* lists aligned to the left */
.menu a {
margin: 0 2px;
width: 100px; /* definition of menu button size */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray;
}

.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;} 

Това е CSS-а.

Сега за завършек трябва да наредите елементите в хтмл кода:






Коментари (8)

eboyanov на 16.11 2006 в 12:26ч.
Не съм експерт в CSS но имам елементарна представа.Въпроса ми е следния опитвам се да задам стойност 100% вместо 100px на правилото width от класа (.menu a) и когато пробвам да напиша по дълга дума дадена клетка от менюто тя се разширява но не в хоризонтална посока както очаквах а във вертикална
ivo_minchev на 09.02 2007 в 05:21ч.
А какво се прави после за да видим резултата?
Веселин на 26.08 2007 в 22:24ч.
Имаш грешка в скрипта но за съжаление не можах да я локализирам и отстраня. Когато отворя скрипта с мозила показва кода върху страницата.
InsectEater на 09.10 2007 в 15:16ч.
Не е ли по-компактно и семантично по-правилно, да се избегне списъка и да се замени с параграф?

Menu 1
Menu 2
Menu 3
Menu 4


Със съответните леки промени в css-а разбира се.
body {font: 14px Verdana, Arial, sans-serif;}

.menu a {
margin: 0 2px;
width: 100px; /* definition of menu button size */
height: 20px;
float: left;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray;
}

.menu a:active {
background: gray;
border: 1px solid gray;
color: #fff;
}
InsectEater на 09.10 2007 в 15:19ч.
Уф, извинявам се, това е първият ми пост на този сайт и не знаех, че коментарите са толкова орязани откъм опции и възможности за последващо редактиране.


Menu 1
Menu 2
Menu 3
Menu 4
lolibi на 28.12 2007 в 12:30ч.
защо не дадеш няква картинка за завършека на менюто ле
TRICK [MPT] на 11.01 2008 в 16:30ч.
гаф:) : Веселин:
Имаш грешка в скрипта но за съжаление не можах да я локализирам и отстраня. Когато отворя скрипта с мозила показва кода върху страницата.
>Аз не разбирам много от ЦСС,но като напишеш:


(pi6e6 koda)
body {font: 14px Verdana, Arial, sans-serif;}



ul {

list-style-type: none; /* suppression of useless elements */

width: 100%; /* precision for Opera */

}

li { float: left;} /* lists aligned to the left */



.menu a {

margin: 0 2px;

width: 100px; /* definition of menu button size */

height: 20px;

float: left;

display: block;

text-align: center;

border: 1px solid gray;

text-decoration: none;

color: #000;

background: #fff;

}



.menu a:hover {

background: #ccc;

border: 1px solid gray;

}



.menu a:active {

background: gray;

border: 1px solid gray;

color: #fff;

}

След това пишеш и ХТМЛ кода за менюто и стана...при мен стана..Дано да съм бил в полза! :Д
TRICK [MPT] на 11.01 2008 в 16:33ч.
Извинявам се,че пиша втори път,но много дълъг се получи комента..
Пишеше ЦСС кода в

__CSS code__

And the HTML code put in section :)

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com