Главная » HTML & CSS » Вертикальное меню для сайта на CSS

Вертикальное меню для сайта на CSS

В очередной раз, с завидным упорством хочу обратить Ваше внимание на решение по изготовлению навигационного на страницах сайта.
Как мы не раз уже убеждались, способов создания, различных методик да и уже готовых к использованию менюшек, существует огромное количество. Предложить что-нибудь этакое довольно сложно, так что обратимся к проверенному и уже нам знакомому решению создания блока меню с помощью каскадных таблиц стилей (CSS).
Всегда хочется, чтобы меню было не только функциональным, но и выглядело красиво и поменьше мороки с кодом на страницах HTML.
 
Давайте рассмотрим весь процесс изготовления интересного, вертикального меню для сайта, построенного полностью на использовании и небольшого файла изображения, которое Вы с легкостью сможете отредактировать под свои нужды.
 

Вертикальное меню для сайта

 
Переходим от слов к делу и по накатанной смотрим пример меню в действии:

Теперь, разложим на составляющие само меню и узнаем что к чему.
Чтобы у Вас получилось то что вы видели в примере, вам понадобиться в первую очередь прописать в файле стилей (ели нет то создать и обозвать: styles.css) следующий код:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
/* Стили оформления меню */ 
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
 
img {
	border: none;
	}
 
#menu {
	width: 200px;
	margin: 10px;
	}
 
#menu li a {
	height: 32px;
  	height: 24px;
	text-decoration: none;
	}	
 
#menu li a:link, #menu li a:visited {
	color: #FFF;
	display: block;
	background:  url(menu.gif);
	padding: 8px 0 0 35px;
	}
 
#menu li a:hover {
	color: #FFF;
	background:  url(menu.gif) 0 -32px;
	padding: 8px 0 0 35px;
	}

Можно разместить этот код непосредственно на странице HTML перед тегом /head. Но все же предпочтительнее использовать отдельный файл стилей для оформления страниц сайта.

Вторым шагом будет подключение к работе этого самого файла,делаем это просто с помощью такой строки:

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

Прописывать эту строку следует в начале html страницы между тегами head и /head
Для оформления внешнего вида меню, понадобится графическое изображение, в данном случае использован файл в формате gif. Найдете его в архиве с исходниками. Использовать можно свое изображение, на свой вкус и цвет, это уж кому как нравится.

Заключительным этапом, будет вывод меню на страницы вашего сайта, для этого там где вам необходимо вписываете что-то типа этого:

<div id="menu">
  <ul>
    <li><a title="заголовок" href="http://dbmast.ru/">Пункт меню 1</a></li>
    <li><a title="заголовок" href="ваша ссылка">Пункт меню 2</a></li>
    <li><a title="заголовок" href="ваша ссылка">Пункт меню 3</a></li>
    <li><a title="заголовок" href="ваша ссылка">Пункт меню 4</a></li>
    <li><a title="заголовок" href="ваша ссылка">Пункт меню 5</a></li>
    <li><a title="заголовок" href="ваша ссылка">Пункт меню 6</a></li>
    <li><a title="заголовок" href="ваша ссылка">Пункт меню 7</a></li>
  </ul>
</div>

Видите друзья, код html минимален, вся структура меню это привычный список и все. Соответственно обзывайте пункты меню по своему и прописывайте свои ссылки для каждого пункта, да и не лишним будет в атрибуте ссылок title="" разместить краткое описание, тем самым при наведении на определенный пункт, стандартными средствами браузеров, будут выводится подсказки, куда ведет данная ссылка, что уже само по себе очень удобно для ваших пользователей.

Вот и все. Красивое и полностью функциональное меню навигации для сайта готово, а понадобилось нам для этого всего ничего, один небольшой файл картинки и еще меньший код для файла стилей. Просто и со вкусом.

PS: После написания статьи появились вопросы по созданию такого меню с вложенными подпунктами. Раз возникла такая потребность у читателей, почему бы и нет, немного поработав над CSS и совсем чуточку преобразовав html каркас, получилось Вертикальное меню навигации CSS с подменю :
 

Меню с подменю

 

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

15 комментариев
  1. truten:

    Воспользовался данной статьей при размещении меню на своем сайте,

    встало как влитое.Спасибо

    Ответить
  2. ontontirl:

    спасибо за интересный блог

    Ответить
  3. J()KER:

    вариант с вложенными подпунктами не был бы лишним...

    Ответить
    • driver:

      J () KER

      Немного поработать со стилем, ткнуть носом IE6 и будет меню с подпунктами, подробнее напишу в самое ближайшее время...

      Ответить
  4. Вроде немного разобрался сам. Первые три кода, как я попнимаю, к меню никакого тношения не имеют, меню начинается с

    ul {

    list-style: none;

    margin: 0;

    padding: 0;

    }

    #menu {

    width: 200px;

    margin: 10px;

    Здесь 200 — это длина меню? А 10 для чего?

    И вот это поясните пожалуйста

    padding: 8px 0 0 35px;

    Ответить
  5. Не понил, а какое место адрес картинки кнопки надо прописывать?

    Ответить
    • driver:

      Константин, прописывать адрес картинки menu.gif нужно в файле styles.css. В статье специально вынесен пример кода CSS. В свойствах фона пунктов меню и следует указать путь до картинки: background: url (menu.gif); Для пунктов меню при наведении указателя мыши, значение будет другим: background: url (menu.gif) 0 -32px;.

      У вас адрес картинки может отличаться, куда вы ее закинули вот от туда и пляшите)))

      Удачи!

      Ответить
  6. Спасибо получилось! Только не получается в html коде страницы прописать, вставляю содержимое папки styles.css перед закрывающимя тёгом /head меню перестаёт быть с картинкой, а с верху страницы виден HTML код, строчки

    добавлены. Просто хотелось бы меню поставить долько для одной страницы.

    Ответить
    • driver:

      Константин, посмотрите может вы в запарке код .css не обнесли тегами <style> и </style>.

      На счет картинки, если не появится, то смотрите в стилях путь до картинки. И еще не нужно копировать весь код файла style.css, так как в нем присутствуют базовые стили оформления демо-страницы, берется начало от ul и далее уже id #menu. Для большего понимания вставлю пояснения к коду в статье, мое упущение, думал понятно и так.

      Ответить
  7. О большое спасибо,Не знал просто, что тегами надо обнести — всё заработало.

    Ответить
  8. Николай:

    Какойнить бы примерчик более компанктного меню

    Ответить
    • driver:

      Компактней только в виде текстовых ссылок, как у вас на сайте)))

      Ответить
  9. Виталий:

    Здравствуйте. Подскажите пожалуйста ответ:Такое меню как здесь, как можно поставить на сайт sofmach.com. Очень буду благодарен при помощи установки)))))

    Ответить
    • driver:

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

      Напишите мне через контакты, где вы хотите видеть меню, какое, и т.д.

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru