Създаване на менюта с CSS и JavaScript
Отзиви за книги
Стандарти W3C
Просто хоризонтално меню
Това е просто хоризонтално меню, с много кратък и прост код.
Възможности
Опростена, удобна и красива навигация в сайта с малък брой секции.
Принцип на действие
2. Сега трябва да го подредим и в същото време да премахнем маркера, за това ще напишем следните стилове:
3. Тъй като не можем да използваме свойствата на блоковия стил за вградени елементи, ще направим блоков елемент от етикета и така, че те да се подредят на един ред, добавяме свойството float: left:
4. Това е всичко, остава да внесем красота.
4.1 описваме стиловете за текста на връзките:
4.2 добавете подложка и фон за връзката:
4.3 описваме псевдокласа на задържане:
Съвместимост на различни браузъри
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
Какво да имате предвид
Не забравяйте да добавите ясното: и двете свойства към следващия блок елемент след менюто, за да спрете опаковането.
Използвайки графичен фон, можете да постигнете много красиви ефекти.
Вертикално падащо меню
Това е вертикално падащо меню, което ви позволява да поставите голям брой връзки в ограничена област. Заимствах идеята за това меню от г-н Ник Ригби, като финализирах менюто за собствени цели.
Възможности
Опростена, удобна и красива навигация в сайта с голям брой секции.
Принцип на действие
1. Нека създадем тялото на нашето меню:
2. Премахнете подменюто, като използвате стилове:
3. Използвайки псевдокласа на hover, направете подменюто видимо при мишката:
5. Това е всичко, остава да внесем красота:
Съвместимост на различни браузъри
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
Какво да имате предвид
Това меню има два много сериозни недостатъка: ако списъкът с раздели или подраздели е много голям, тогава когато отворите подменю, се появява лента за превъртане и когато искате да превъртите страницата, менюто се затваря; ако потребителят на стария браузър не работи с това меню, той изобщо няма да може да навигира във вашия сайт.