CSS меню
Публикувана от smilev на January 17 2011 13:56:29
Разширена новина
Менюто не е нищо друго освен подредени елементи, на които може да се натиска. В урока ще направим хоризонтално меню, като имаме в предвид че вертикалното меню се основава на същите принципи.
Хоризонталното меню функционира по следния начин: единственото, което трябва да се направи е да се наредят елементи един до друг, вместо един над друг.
Техниката в урока се обуславя на 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-а.
Сега за завършек трябва да наредите елементите в хтмл кода: