Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Меню для сайта — как сделать горизонтальное или вертикальное выпадающее меню на CSS и Html

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

С моей точки зрения, такой способ сделать выпадающее меню предпочтительней, т.к. у некоторых пользователей в браузере может быть отключена поддержка JavaScript и, следовательно, выпадающие меню на JavaScript отображаться не будет. Хотя, конечно же, встречается такая ситуация довольно редко, но тем не менее, горизонтальные и вертикальные выпадающее меню для сайта на CSS будут более универсальны.

Для создания выпадающего меню для сайта мы воспользуемся услугами онлайн сервиса PureCSSMenu. Наши действия по созданию горизонтального или вертикального выпадающего меню сведутся к выбору типа меню, настройке его внешнего вида (с помощью визуального редактора), созданию структуры выпадающего меню, наименованию его пунктов и привязки к ним адресов страниц своего сайта, на которые должны будут ввести эти пункты создаваемого нами горизонтального или вертикального выпадающего меню.

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

Меню для сайта — горизонтальное или вертикальное выпадающие меню на CSS

Зайдя на сайт онлайн сервиса PureCSSMenu вам нужно будет в первую очередь определиться с шаблоном выпадающего меню. Онлайн сервис предлагает выбор из пяти шаблонов горизонтальных выпадающих меню и трех шаблонов вертикальных выпадающих меню для вашего сайта. Для выбора вы должны перейти на страницу шаблонов выпадающих меню, нажав на вкладку «Templates» в левой колонке окна мастера создания нового меню для сайта на CSS:

Щелкните по любому из шаблонов и вы увидите в области «Preview» как будет выглядеть горизонтальное или вертикально выпадающее меню, созданное на основе данного шаблона с использованием одного лишь CSS (таблиц каскадных стилей).

Посмотрите как работают выпадающее меню на CSS и прикиньте, какой шаблон, на ваш взгляд, наилучшим образом подойдет к дизайну вашего сайта. Учтите, что цветовое оформление выпадающих меню, а так же размер, тип и начертание шрифта можно будет поменять на вкладке «Parameters» окна мастера создания выпадающих меню:

Нужный цвет для шрифтов или фона выпадающего меню вы можете ввести непосредственно в виде Html кода цвета (например, FFFFFF — белый цвет) либо выбрать из выпадающей палитры при щелчке по прямоугольнику с настраиваемым цветом.

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

Создание горизонтального или вертикального выпадающего меню для сайта на CSS

Теперь можно переходить к созданию структуры выпадающего меню для сайта, перейдя на вкладку «Items». В открывшемся окне мастера вам предоставится возможность:

• создавать новые пункты горизонтального или вертикального выпадающего меню (как вложенные, так и не вложенные)
• удалять уже существующие пункты выпадающего меню для сайта
• удалить все пункты меню на базе CSS одновременно (очистка)
• задать надпись для каждого пункта выпадающего меню для сайта
• повесить ссылку на каждый пункта меню
• прописать для этой ссылки атрибут Title
• настроить способ открытия страницы, при переходе по данному пункту выпадающего меню (в этом же окне или в новом окне браузера)

Для того, чтобы удалить все демонстрационные пункты выпадающего меню вы можете нажать на кнопку под названием «Clear» с изображением мусорного бака.

Для создания пункта выпадающего меню для сайта служит кнопка «Add Item» с изображение большого плюса. В этом случае, новый пункт выпадающего меню будет добавлен в самый конец уже имеющихся пунктов горизонтального или вертикального меню. Если вы нажмете на следующую кнопку под названием «Add Next Item», то новый пункт выпадающего меню будет добавлен сразу после выделенного в текущий момент пункта меню в окне мастера.

Для добавления вложенного пункта в выпадающее меню для сайта нажмите на кнопку под названием «Add Subitem», при этом должен быть выбран в окне мастера тот пункт меню, в котором вы хотите создать вложенный пункт. Ну, а кнопка под названием «Remove Item», служит для удаления выбранного в текущий момент пункта горизонтального или вертикального выпадающего меню в окне мастера.

Для каждого созданного пункта выпадающего меню на CSS вы должны заполнить поля в области «Item Parameters».

• в поле «Text» вы должны вписать текст пункта меню
• в поле «Link» вы должны вписать адрес страницы, на которую должен будет осуществиться переход, при нажатии на данный пункт меню для сайта
• в поле «Tip» вы можете, при желании, указать содержимое атрибута TITLE тега ссылки A. Содержимое тега TITLE будет видно, если подвести указатель мыши к ссылке (например, можете посмотреть в верхнем меню данного блога, где у пункта «Главная» прописан атрибут TITLE)
• в поле «Target» из выпадающего списка вы можете выбрать способ открытия страницы, ссылку на которую вы прописали для данного пункта горизонтального или вертикального меню для сайта. Если вы оставите значение по умолчанию «_self», то при выборе данного пункта выпадающего меню посетителем вашего сайта, страница откроется в этом же окне браузера. Если вы хотите, чтобы страница открывалась в новом окне браузера, то вам нужно будет выбрать из выпадающего списка пункт «_blank»

Вставка созданного на CSS выпадающего меню для сайта в шаблон

После того, как вы на онлайн сервисе PureCSSMenu полностью сделаете выпадающее меню и пропишите значения для всех его пунктов, вам нужно будет нажать на большую кнопку «Download» в нижнем правом углу страницы, для того, чтобы скачать код выпадающего меню.

Откроется диалог загрузки, в котором вы должны будете выбрать на своем компьютере место для сохранения файла архива purecssmenu-com.zip. После скачивания кода выпадающего горизонтального или вертикального меню распакуйте это архив.

Внутри будет папка images с картинками, которые используются в выбранном вами шаблоне меню. А так же там будет лежать файл purecssmenu.html, в котором находится код с описанием стилей меню (его нужно будет скопировать в файл CSS используемого вами шаблона оформления для вашего сайта) и код HTML с описанием пунктов созданного меню, который нужно будет вставить в нужное место файла шаблона вашего сайта.

Я вставлял горизонтальное выпадающее меню на данный блог (http://ktonanovenkogo.ru), который работает на WordPress, но оно будет прекрасно работать и на любом другом сайте. Нужно будет только правильно выбрать место для вставки выпадающего меню для сайта и прописать код стилей в файла CCS используемого вами шаблона оформления. Расскажу на примере темы оформления WordPress.

Вставляем код выпадающего меню для сайта в CSS файл шаблона

Откройте файл с кодом выпадающего меню purecssmenu.html и скопируйте код CSS стилей, который заключен между Html тегами Style (открывающий и закрывающий Html теги Style копировать не надо):

<!-- Start PureCSSMenu.com STYLE -->
<style>
код стилей для созданного вами на онлайн сервисе PureCSSMenu выпадающего горизонтального или вертикального меню
</style>
<!-- End PureCSSMenu.com STYLE -->

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

В случае с WordPress это будет файл /wp-content/themes/название-вашей-темы-оформления/style.css. Чтобы узнать путь к используемому у вас на сайте файлу каскадных таблиц стилей CSS, вы можете посмотреть исходный код страницы вашего сайта и найти в верхней его части (между открывающим и закрывающим Html тегом Head) строку:

<link rel="stylesheet" href="http://ktonanovenkogo.ru/путь к вашему файлу стилей/название-файла-стилей.css" type="text/css" media="screen" />

Посмотреть исходный код страницы сайта можно щелкнув правой кнопкой мыши по странице в вашем браузере и выбрав пункт контекстного меню «Исходный код» (Opera), либо «Исходный код страницы» (Firefox), либо «Просмотр кода страницы» (Google Chrome), либо «Просмотр HTML-кода» (IE). Код стилей, взятый из файла purecssmenu.html, можно вставить, например, в самый конец файла CSS вашего шаблона.

У сделанного выпадающего меню для сайта по умолчанию была белая рамка, которая не очень хорошо смотрелась у меня на блоге и так же я немного поменял цвет своего горизонтального выпадающего меню, для того, чтобы оно лучше вписывалось в дизайн блога. Для этого в первом блоке CSS свойств, созданном на онлайн сервисе PureCSSMenu, я удалил несколько строк и поменял код цвета выпадающего меню в строке background-color. Было так:

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#096891;
	background-repeat:repeat;
	border-color:#EEEEEE #AAAAAA #AAAAAA #FFFFFF;
	border-width:2px;
	border-style:groove;
}

а стало так:

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#02648E;
	background-repeat:repeat;
}

Размер и начертание шрифта вы можете подкорректировать в строках начинающихся с font. Посмотреть значения основных свойств, используемых в таблицах каскадных стилей CSS, вы можете здесь: CSS свойства (свойства стилей), параметры CSS.

Вставка кода выпадающего меню в шаблон сайта

Далее, вам нужно будет скопировать из того же файла purecssmenu.html код вставки выпадающего меню в шаблон сайта. Данный участок кода находится в нижней части файла purecssmenu.html и заключен между комментариями:

<!-- Start PureCSSMenu.com MENU -->
HTML код созданного вами на онлайн сервисе PureCSSMenu горизонтального или вертикального выпадающего меню для сайта
<!-- End PureCSSMenu.com MENU -->

Я вставлял этот код в файл /wp-content/themes/текущая-тема-оформления/header.php, в то место, где у меня уже имелся код верхнего, но не выпадающего меню, идущий по умолчанию в моей теме оформления WordPress:

<ul id="nav">
      <li   class="page_item"><a href="http://ktonanovenkogo.ru/" title="KtoNaNovenkogo.ru - в помощь начинающим вебмастерам | Создание и продвижение сайтов на Joomla, блогов на WordPress, форумов на SMF, интернет-магазинов на VirtueMart, заработок на сайте">Главная</a></li>
      <?php wp_list_pages('depth=1&exclude=2860,5172,5195&sort_column=menu_order&title_li=' . ('') . '' ); ?>
    </ul>

Я заменил его соответственно на код из файла purecssmenu.html:

<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/" target="_parent" title="KtoNaNovenkogo.ru - в помощь начинающим вебмастерам | Создание и продвижение сайтов на Joomla, блогов на WordPress, форумов на SMF, интернет-магазинов на VirtueMart, заработок на сайте">Главная</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/rubriki"><span>Рубрики</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/joomla">Joomla — создание сайтов<![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

			<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/joomla/virtuemart-joomla">VirtueMart — создание интернет-магазинов</a></li>
			<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/joomla/rasshireniy">Расширения для Joomla</a></li>

		<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/seo">SEO и SMO — продвижение сайтов</a></li>
		<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/smf">SMF — создание форумов<![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

			<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/smf/mod_smf">Модификации (моды) для форума на SMF</a></li>

		<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/wordpress">WordPress — создание блогов<![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

			<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/wordpress/plagini_wordpress">Плагины для WordPress</a></li>

		<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/web-obzory">Обзоры полезных онлайн сервисов для вебмастеров</a></li>
		<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/html">Верстка —  HTML, CSS, PHP, MySql<![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

			<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/html/html-new">HTML для начинающих</a></li>

		<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/zarabotok_na_saite">Заработок на сайте</a></li>
		<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/vokrug-da-okolo">Инструменты вебмастера<![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

			<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/vokrug-da-okolo/programs">Нужные программы</a></li>
			<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://ktonanovenkogo.ru/category/vokrug-da-okolo/hosting">Хостинг и домены</a></li>

	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/about">О блоге</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/karta-sajta">Содержание</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/obratnay-svyz">Контакты</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/podpiska">Подписка</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/videokursy">Курсы</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/faq">FAQ</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://ktonanovenkogo.ru/reklama-na-bloge">Реклама</a></li>
</ul>

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

Если у вас сайт на Joomla, то вы можете вставить этот код выпадающего горизонтального или вертикального меню в любое место вашего шаблона, предназначенное для вставки модуля (Модули Джумла). Вам нужно будет зайти в админку Joomla и выбрать из верхней строки «Расширения» — «Менеджер модулей».

В верхнем правом углу открывшейся страницы нажмите на кнопку «Создать» и выберите из предлагаемых вариантов модулей «Произвольный HTML-код». Вставьте HTML код созданного на онлайн сервисе PureCSSMenu горизонтального или вертикального выпадающего меню для сайта из файла purecssmenu.html в область «Пользовательский текст», а затем нажмите на кнопку «Сохранить» в верхнем правом углу окна.

Можете также посмотреть видео «Меню для сайта»:

У Евгения Попова вышел новый видекурс Все Технические Моменты Онлайн Бизнеса в Видеоформате, который стоит того, чтобы с ним ознакомиться.

Вы так же можете ознакомиться с другими обзорами полезных онлайн (online) сервисов для вебмастеров.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• Красивые шрифты для сайта онлайн — как добавить в Html и CSS web шрифты через Google Font API
• Фавикон для сайта: как сделать Favicon ico нужного размера, создать фавикон в online generator или скачать коллекцию Favicon ico из галереи, как установить фавикон в Joomla и WordPress
• Background в CSS (color, position, image, repeat, attachment) для задания цвета фона или фоновой картинки Html элементов
• Что такое гиперссылка и Html якорь (anchor), как создать ссылку на сайте (Html тег А, href, target blank), как сделать картинку ссылкой и открыть ее в новом окне
• HTML, CSS, PHP, MySQL — зачем нужно знать языки HTML, PHP, MySQL и свойства CSS при работе над сайтом
• Html коды и таблица RGB цветов для сайтов, как можно подобрать и задать цвета текста в Html и CSS, Яндекс.Цвета и другие программы палитр
• Меню в Joomla — добавление нового меню в Joomla 1.5, создание и настройка модуля для меню