Простое динамические меню, отличается от всех типов меню своей простотой и хорошей индексацией поисковиков, а, используя современные методы CSS и JavaScript, можно придать своему меню красивый и респектабельный вид, что повлияет на посещаемость сайта, а следовательно и отобразится на вашем заработке в интернете. В этом разделе мы с вами разберём, как сделать простое горизонтальное меню для сайта html.
Все меню имеют примерно одинаковую html-разметку, будь то горизонтальное или вертикальное меню. Поэтому я буду использовать для обоих типов меню одну и туже разметку. Она выглядит примерно так:
посмотреть результат
Сделаем горизонтальное меню. Для того чтобы ссылки в меню обрели красивую форму, добавим код стиля CSS:
Между тегами (…) вставим наш css-файл со стилями.
посмотреть результат
Код в сборе имеет такой вид:
Также, для украшения меню, в качестве фона можно использовать картинку.
В начале с помощью программы Photoshop создадим две картинки. Они будут выглядеть примерно так:
Вы можете, приложив фантазию, сделать свои картинки.
Далее, в файле стилей поменяем background для элементов set a и set a:hover. Вот, что у нас получится:
посмотреть результат
Данный вид меню отображается во всех браузерах (Mozilla, Opera, IE).