Создание простого горизонтального меню для сайта html

Простое динамические меню, отличается от всех типов меню своей простотой и хорошей индексацией поисковиков, а, используя современные методы CSS и JavaScript, можно придать своему меню красивый и респектабельный вид, что повлияет на посещаемость сайта, а следовательно и отобразится на вашем заработке в интернете. В этом разделе мы с вами разберём, как сделать простое горизонтальное меню для сайта html.

Все меню имеют примерно одинаковую html-разметку, будь то горизонтальное или вертикальное меню. Поэтому я буду использовать для обоих типов меню одну и туже разметку. Она выглядит примерно так:

посмотреть результат

 

Сделаем горизонтальное меню. Для того чтобы ссылки в меню обрели красивую форму, добавим код стиля CSS:

 

Между тегами (<head>…</head>) вставим наш css-файл со стилями.

посмотреть результат

 

Код в сборе имеет такой вид:

 

Также, для украшения меню, в качестве фона можно использовать картинку.
В начале с помощью программы Photoshop  создадим две картинки. Они будут выглядеть примерно так:

Безимени-199Безимени-200

 

 

 

 

Вы можете, приложив фантазию, сделать свои картинки.
Далее, в файле стилей поменяем background для элементов set a и set a:hover. Вот, что у нас получится:

посмотреть результат

 

Данный вид меню отображается во всех браузерах (Mozilla, Opera, IE).

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Оставить комментарий

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика