Как я начал программировать

тел. +38 095 338 09 91

skype: djony_tovstik

Как сделать простое меню

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

Ведь меню написать так просто. Для этого достаточно составить список пунктов "ul li"

Пример кода:


<ul class="list_menu">
	<li>Пункт меню 1</li>
	<li>Пункт меню 2</li>
	<li>Пункт меню 3</li>
</ul>

В итоге получим простой, не нумерованый список, такого вида:

  • Пункт меню 1
  • Пункт меню 2
  • Пункт меню 3

Для того что бы прописать вложенные пункты, достаточно в тег li вставить еще один список

В итоге код html будет выглядеть так:


<ul class="list_menu">
	<li>Пункт меню 1
		<ul>
			<li>Вложенный пункт 1</li>
		</ul>
	</li>	
	<li>Пункт меню 2</li>
	<li>Пункт меню 3</li>
</ul>

более подробно о списках можно прочитать здесь

И нам осталось только украсить наше меню. Ето можно сделать с помощью так называемой "таблицы стилей", попросту говоря css. Стили лучше прописывать отдельным файлом и уже потом подключать к нашей страничке. Сделать это можно с помощью такой строчки:

<link href="сайт/путь к файлу/файл со стилями.css" rel="stylesheet" type="text/css">
Но есть возможность разместить их и непосредственно в документе. Для этого нужно прописать тег style и уже внутри тега прописать стили.

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

Для работы со стилями, необходимо изучить, что такое селекторы и как с ними работать. Мы в качестве селектора будем использовать класс list_menu. Первое что нам нужно сделать, это выстроить пункты меню в одну строку. Для этого к пунктам меню применяем свойство "display: inline;". Отступы регулируем с помощью свойства "padding". Фоновый цвет задаем свойством "background-color". Если нужно подсветить пункт меню, который находиться сейчас под указателем мышки, задаем другой цвет фона для псевдоселектора "hover"

В результате получим такие стили:

<style>
	.list_menu {
		background-color: #faebd6;
		padding: 10px;
	}
	.list_menu > li{
		display: inline;
		padding: 10px;
	}
	.list_menu > li:hover{
		background-color: #ffdc00;
	}
</style>

И наше меню будет выглядеть так:

  • Пункт меню 1
  • Пункт меню 2
  • Пункт меню 3

Как видим, для того что бы создать меню, не нужны никакие модули. И это тот случай, когда написать новое меню легче, чем подбирать, а потом править плагин.

prodact by Tolstij ink