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

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

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

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

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

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

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

Создание структуры выпадающего меню на сервисе PureCSSMenu

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У созданного на сервисе PureCSSMenu меню по умолчанию была белая рамка, которая не очень хорошо смотрелась у меня на блоге и так же я немного поменял цвет меню, для того, чтобы оно лучше вписывалось в дизайн блога. Для этого в первом блоке 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 в нужное место шаблона сайта

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

<!-- Start PureCSSMenu.com MENU -->
HTML код созданного вами на сервисе PureCSSMenu меню
<!-- End PureCSSMenu.com MENU -->

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

<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 — модули). Вам нужно будет зайти в админку Joomla и выбрать из верхнего меню "Расширения" - "Менеджер модулей". В верхнем правом углу открывшейся страницы нажмите на кнопку "Создать" и выберите из предлагаемых вариантов модулей "Произвольный HTML-код". Вставьте HTML код созданного на сервисе PureCSSMenu меню из файла purecssmenu.html в область "Пользовательский текст", а затем нажмите на кнопку "Сохранить" в верхнем правом углу окна.

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

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

Постовой (обмен постовыми): “Зайка моя я твой зайчик” или введение в CSS - CSS, HTML для новичков