Главные новости

Создание горизонтального меню сайта, с нуля , для начинающих

Создание горизонтального меню сайта, с нуля , для начинающих
p>Данный урок будет посвящен созданию горизонтального меню с подробным описанием каждых элементов html и стилей css

Меню сайта представляет собой такой код

<ul id="menushka">
<li><a href="http://адрес ссылки">Cms cmscode</a></li>
<li><a href="https://адрес ссылки">HTML и CSS уроки</a></li>
<li><a href="http://адрес ссылки">Php</a></li>
<li><a href="http://адрес ссылки">Модули</a></li>
<li style="float:right;"><a href="http://адрес ссылки">Обратная связь</a></li>
<li><a href="http://адрес ссылки">Нужные статьи</a></li>
<li><a href="http://адрес ссылки"'>DOTA 2</a></li>
</ul>

Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.

 

<a href="" отвечает за ввод адресса ссылки и может иметь как полный путь начинающийся c http, https так и относительный

а) "./"и"/" это одно и тоже если идет в начале ссылки

б) ../

Указывает на путь внутри данного документа к примеру я хочу казать путь на статью урока по ссылка внутри данной категори, то пропишу так

<a href="../html_css_uroki/13.html">html ссылки их разновидности и приемущества</a>

Результат:

html ссылки их разновидности и приемущества

 

Ну о ссылках мы узнали, теперь нам надо подробнее углубиться как же зделать горизонтальное меню

Вопервых мы присвоили id тегу
<ul id="menushka">

и теперь можем обращаться к данному id в css

css код примера менюшки

#menushka { background:#DE2A0B;display: block; margin: 5px 0 0 0px; padding: 0; clear: both; float: left; width: 1265px; height: 53px; font-size: 16px; text-transform: none; list-style: none; line-height:normal;font-family:'Times New Roman',Areal, Times, serif; font-style: normal; z-index: 1000;}

#menushka li { display: block; float: left; padding: 13px 0 14px; margin: 0px; position: relative; } #menushka li a {color:#ffffff;text-transform: uppercase; font-weight:700; display: block; float: left; text-decoration: none; height: 26px; line-height: 26px; padding: 0 11px; /*background: #fbe6e7;*/ border-right: 0px solid #dedede;}

#menushka li:hover { background-image:url(./image/shd2.jpg); border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-right: none; padding-right:1px; }

#menushka li:hover, #menushka ul { -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); /* FF */ -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); /* Webkit */ box-shadow: 0 0 5px rgba(0,0,0,0.5); /* All */ } #menushka li:hover a { color:#ffffff; border-right: none; }

#menushka li.sale a { border-right: none !important; }

#menushka li.sale { border-right: none; padding: 0 0 0 0px; }

#menushka li.sale:hover { background: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } #menushka li.sale a { color: #f00 !important; border-right: none; line-height: 53px; padding: 0 0 0 11px; } #menushka li.sale a:hover { color: #FFF !important; border-right: none; line-height: 53px; }

#menushka ul { display: none; list-style:none; position:absolute; /*left:-9999px;*/ top:52px; /*opacity:0;*/ min-width: 100%; padding: 10px 0 0; margin: 0; background-image:url(image/shd3.jpg); color: blue; text-transform: none; font-weight: normal; font-size: 11px; border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-top: 1px solid #303030; z-index: 10000; }

#menushka li:hover ul a { color: #FBF2FF; line-height: 120%;font-family: 'Times New Roman',Areal, Times, serif; font-style: normal;}

#menushka li:hover ul a:hover { color:#fff; text-decoration: none;}

#menushka li:hover ul li { background: none; padding-right: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}

#menushka li:hover ul { /*left:0; opacity:1;*/ display: block; }

Данный css код надо вставлять в css файл и подклбчить его в нутри страницы отображаемой или шаблоне, либо непосредственно в странице через теги <style></style>

Создайте тектсовый файл к примеру index.txt и переименуйте его в index.html

если незнаете как txt переименовать в html то читаем эту статью

Вам надо сохранить полный код в index.html и октрыть в вашем браузере и вы увидите результат в действии.

Полный код примера:

<style>

#menushka { background:#DE2A0B;display: block; margin: 5px 0 0 0px; padding: 0; clear: both; float: left; width: 1265px; height: 53px; font-size: 16px; text-transform: none; list-style: none; line-height:normal;font-family:'Times New Roman',Areal, Times, serif; font-style: normal; z-index: 1000;}

#menushka li { display: block; float: left; padding: 13px 0 14px; margin: 0px; position: relative; } 
#menushka li a {color:#ffffff;text-transform: uppercase; font-weight:700; display: block; float: left; text-decoration: none; height: 26px; line-height: 26px; padding: 0 11px; /*background: #fbe6e7;*/ border-right: 0px solid #dedede;}

#menushka li:hover { background-image:url(./image/shd2.jpg); border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-right: none; padding-right:1px; }

#menushka li:hover, #menushka ul { -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); /* FF */ -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); /* Webkit */ box-shadow: 0 0 5px rgba(0,0,0,0.5); /* All */ } 
#menushka li:hover a { color:#ffffff; border-right: none; }

#menushka li.sale a { border-right: none !important; }

#menushka li.sale { border-right: none; padding: 0 0 0 0px; }

#menushka li.sale:hover { background: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } 
#menushka li.sale a { color: #f00 !important; border-right: none; line-height: 53px; padding: 0 0 0 11px; } 
#menushka li.sale a:hover { color: #FFF !important; border-right: none; line-height: 53px; }

#menushka ul { display: none; list-style:none; position:absolute; /*left:-9999px;*/ top:52px; /*opacity:0;*/ min-width: 100%; padding: 10px 0 0; margin: 0; background-image:url(image/shd3.jpg); color: blue; text-transform: none; font-weight: normal; font-size: 11px; border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-top: 1px solid #303030; z-index: 10000; }

#menushka li:hover ul a { color: #FBF2FF; line-height: 120%;font-family: 'Times New Roman',Areal, Times, serif; font-style: normal;}

#menushka li:hover ul a:hover { color:#fff; text-decoration: none;}

#menushka li:hover ul li { background: none; padding-right: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}

#menushka li:hover ul { /*left:0; opacity:1;*/ display: block; }

</style>

<ul id="menushka">

<li><a href="http://адрес ссылки">Cms cmscode</a></li>

<li><a href="https://адрес ссылки">HTML и CSS уроки</a></li>

<li><a href="http://адрес ссылки">Php</a></li>

<li><a href="http://адрес ссылки">Модули</a></li>

<li style="float:right;"><a href="http://адрес ссылки">Обратная связь</a></li>

<li><a href="http://адрес ссылки">Нужные статьи</a></li>

<li><a href="http://адрес ссылки"'>DOTA 2</a></li>

</ul>

Как добавить подменю к примеру к Cms cmscode. Для этого строчку

<li><a href="http://адрес ссылки">Cms cmscode</a></li>

надо заменить на такую

<li><a href="http://адрес ссылки">Cms cmscode</a><ul><li><a href="http://адрес ссылки">php</a></li></ul></li>


а теперь пройдемся по css менюшки данной

 

#menushka { background:#DE2A0B;display: block; margin: 5px 0 0 0px; padding: 0; clear: both; float: left; width: 1265px; height: 53px; font-size: 16px; text-transform: none; list-style: none; line-height:normal;font-family:'Times New Roman',Areal, Times, serif; font-style: normal; z-index: 1000;} 

 


менюшка заливается красным цветом background:#DE2A0B;
имеет блочную структуру display: block;, выставлен отступ сверху в 5 пикселей margin: 5px 0 0 0px;внутренний отступ выставлен в 0 то есть его вообще нет padding: 0;
clear: both; необходим чтобы востановить высоту блоков идущих за менюшкой это связано из за свойства float:left; и float:right; они теряют высоту.
ширина менюшки 1265пикселей width: 1265px;
высота height: 53px;
font-size: 16px; размер шрифта
ну и остальные стили о них выможете узнать в справочнике css в любом в интернете. забиваете название css до двоиточия к примеру line-height:normal; то вбивать надо line-height и у вас сразу выведется нужная страница в поисковике.
Главное на что стоит обратить внимание это  #menushka li и #menushka li:hover, #menushka ul и #menushka ul
#menushka ul по умолчанию у нее стоит display:none; (и только при hover а для начинающих при наведении мышки на элемент #menushka li:hover отрабатывает и делает display:block; аналогично и для подменю которые происаны чуть ниже основных. #menushka li:hover ul)
Если вы изучали свойства ссылок, то должны понять что такое hover 
К примеру, вы можете создать <div> и придать диву класс. К данному классу прописать чтобы при наведении на этот div он сркывался и исчезал, вот простой пример
<style>
.divhide{display:block; color:red;}
.divhide:hover{display:none;}
</style>
<div class="divhide">простой текст покрашенный красным цветом исчезнет у вас при наведении мышки</div>

Резултат


простой текст покрашенный красным цветом исчезнет у вас при наведении мышки

Вот видите,а в менюшках подобный эфект реализуется наоборот, скрытый текст или раздел меню показывается вам и скрывается при убирании с него мышки. А побочные стили отвечают за оформление отступы и прочие мелочи которые можно посмотреть и в инете.
Недостаток моего примера с дивом в том что когда он исчезает то сразуже появляется это связано с тем что при исчезновении курсор мышки на него не наведенным становится и получается моргание. Да и в примере указаны несколько лишних стилей, они ни на что не влияют, ну просто чтобы вы сами могли найти их и убрать