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

тел. +38 095 338 09 91

skype: djony_tovstik

Конвертор времени из Unix

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

Занимаясь разработкой сайтов, столкнулся со странным явлением. Вместо того что бы по человечески написать простую менюшку на 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
www.000webhost.com