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

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

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

<ul id="set-v">
<li><a href=" сылка на страницу сайта">меню</a></li>
<li><a href=" сылка на страницу сайта">меню</a></li>      
<li><a href=" сылка на страницу сайта">меню</a></li>
</ul>

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

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

#set, #set ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #669999;
background: #CCFFFF;
float: left;
width: 45%;
}
#set li {
float: left;
position: relative;
background: #CCFFFF;
background: #CCFFFF;
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
}
#set a {
color:#660033;
text-indent:5px;
display: block;
width: 125px;
padding: 2px 10px;
background: #00FFFF;
}
#set a:hover {
color: #FFFFCC;
background: #009999;

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

<link rel="stylesheet" href="examples.css" type="text/css">  

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

Посмотреть полный код в сборе можно здесь.

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

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

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

#set, #set ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #669999;
background: #CCFFFF;
float: left;
width: 45%;
}
#set li {
float: left;
position: relative;
background: #CCFFFF;
background: #CCFFFF;
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
}
#set a {
color:#FFFFCC;
text-indent:5px;
display: block;
width: 125px;
padding: 2px 10px;
background: url(http://rabotalegko.com/wp-content/uploads/2014/08/foto-231.gif);
}
#set a:hover {
color: #660033;
background: url(http://rabotalegko.com/wp-content/uploads/2014/08/foto-232.gif);

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

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

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

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

Похожие записи

  • Полный код горизонтального выпадающего меню На этой странице размещен полный код горизонтального выпадающего меню для вашего сайта. Вы можете, по своему желанию, внеся некоторые изменения в код, создать свое меню. Все зависит от […]
  • Полный код простого горизонтального меню. На этой странице размещен полный код для создания простого горизонтального меню для сайта. Вы можете внести некоторые изменения в код меню, создав свое меню, по своему […]
  • Полный код вертикального выпадающего меню. На этой странице размещен полный код вертикального выпадающего меню для вашего сайта. Вы можете, по своему желанию, внеся некоторые изменения в код, создать свое меню. Все зависит от […]
  • Простое вертикальное меню для сайта Как я уже говорил в предыдущем разделе простое горизонтальное меню все меню имеют примерно одинаковую html-разметку. Поэтому, для создания простого вертикального меню мы будем использовать […]
  • Полный код простого вертикального меню. На этой странице размещен полный код простого вертикального меню для вашего сайта. Вы можете воспользоваться этой версией, а можете, при внесении некоторых настроек в коде, сделать […]
  • Плагин Header and Footer Итак, сейчас поговорим о том, что представляет собой плагин под названием Header and Footer, а также для чего он нужен, какие функции может выполнять и т.д. Необходимо отметить, что это […]

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

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

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