CSS меню

fix3d трудност:

видян: 17713

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

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

Техниката в урока се обуславя на 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 :)

CSS меню

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

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