Меню для сайта



Любой сайт обязательно имеет свое меню. Оно может быть вертикальным или горизонтальным. Кроме этого меню может быть простым, выпадающим, в стиле аккордеона, анимационное и т.д.

Любому новичку вначале тяжело разобраться в создании меню, хотя очень нужно. И знание HTML и CSS обязательно. Как самому создать меню или научиться видоизменять его, можно посмотреть уроки.

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

Изображение галочкаКлассическое вертикальное меню для сайта на css

Для создания меню используется сдвоенное изображение и список, вложенный в div. Эффект затемнения получится при использовании нижней части картинки. Картинки можно поменять (в архиве 11 видов).

Первое создаем код HTML самого меню. Заменяем # на свои ссылки. Можете изменить имя идентификатора, после чего произведите изменения в CSS, правильно выставьте путь к изображениям. Для наглядности элементу li присвоен идентификатор rencur.

Классическое вертикальное меню

Стрелка    ПРИМЕР   Стрелка   СКАЧАТЬ ИСХОДНИК

Изображение галочкаРаздвигающееся вертикальное меню на CSS

Весь код имеет подробные комментарии, каждый селектор и каждое свойство. Чтобы все работало, скопируйте весь код, создайте файл с расширением html и вставьте этот код в файл. При редактировании, для удобства, лучше текстовый редактор Notepad++ и в нем поставьте синтаксис CSS и у вас все комментарии станут подсвечиваться. Если комментарии не потребуются, то просто удалите их.

Первое создаем код HTML самого меню. Заменяем # на свои ссылки. Источник: http://info-comp.ru/

Раздвигающееся вертикальное меню

Стрелка    ПРИМЕР   Стрелка   СКАЧАТЬ ИСХОДНИК

Изображение галочкаВертикальное меню с эффектами

Меню будет использовать единственный список, вложенный в блок с идентификатором content. Само меню можете расположить где угодно. Эффект при наведении курсора - смещение пунктов меню и изменение внутренней и внешней тени для заливки пунктов. Это позволяет проявить безграничную фантазию для оформления пунктов меню. Поэкспериментируйте и Вы увидите, что можно использовать только CSS3 без изображений. Проявите фантазию.

Далее создаем код HTML самого меню, он будет у нас в виде списка, вложенного в блок с идентификатором content. Замените # на свои ссылки, можете сменить имя идентификатора, сменив его и в коде CSS. Не забывайте следить за кодировкой. Источник: http://www.menuforsite.ru/index.php

Вертикальное меню с эффектами

Стрелка    ПРИМЕР   Стрелка   СКАЧАТЬ ИСХОДНИК





Далее рассмотрим: Форма обратной связи для сайта HTML