Красиво меню с падащо подменю в CSS

Този урок ще ви покаже как да създадете красиво падащо меню с помощта на CSS.

Тази статия е продължение на това. Като добавим някакъв код, ще дадем на това меню допълнителна функционалност, а именно възможността да показва елементи от падащо подменю.

меню
падащо

Нека започнем с модифициранотоHTML маркиране:

Тук има малки разлики от предишното меню. Първо, имаме подменюта под Метал, Пластмаса и Услуги. Подреждаме ги като отделен неподреден списък. Второ, в менюто се появиха специални тагове, които работят само в Internet Explorer 6. Тези тагове помагат за правилното показване на това меню в този конкретен браузър.

Що се отнася доCSS, кодът тук е доста обемен и не виждам смисъл да го публикувам целия тук. Сложих го в отделен файл и го свързах с основния документ така:

След това ще имате страхотно меню с падащи подменюта. Не забравяйте, че тук се използва само 1 изображение.

Наслади се! Най-добри пожелания!

Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.jorenrapini.com Превод: Максим Шкурупий Урокът е създаден: 22 юни 2009 г. Преглеждания: 72622 Правила за препечатване

5 последни урока от категорията "CSS"

Забавни ефекти за букви

Малък ефект с интерактивна анимация на букви.

Изпълнение на забавни съвети

Малка концепция от забавни съвети, които са внедрени в SVG и anime.js. В допълнение към специален стил, примерът реализира анимация и трансформация на графични обекти.

Анимирани букви

Експеримент: анимирани SVG букви, базирани на библиотеката anime.js.

Слънчеви очила отПървият човек

Страхотен експеримент на уеб страница, която се показва „от първо лице“ през слънчеви очила.

Навигация в падащо меню

Експериментален навигационен скрипт за падащо меню.