Анализ сайта: Проверка Траста

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

10 февраля, 2010

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

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

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

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

Меню для сайта на CSS в онлайн сервисе


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

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

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

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

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

Создание горизонтального или вертикального меню

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

  1. создавать новые пункты (как вложенные, так и не вложенные)
  2. удалять уже существующие пункты выпадающего меню
  3. удалить все пункты одновременно (очистка)
  4. задать надпись для каждого пункта
  5. повесить ссылку на каждый пункт
  6. прописать для этой ссылки атрибут Title (может пригодится, если в качестве анкора используется изображение)
  7. настроить способ открытия страницы при переходе по данному пункту (в этом же окне или в новом окне браузера)

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

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

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

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

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

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


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

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

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

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

Переносим стили оформления меню на свой сайт

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

<!-- Start PureCSSMenu.com STYLE -->
<style>
CSS свойства c онлайн сервиса PureCSSMenu
</style>
<!-- End PureCSSMenu.com STYLE -->

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

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

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

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

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

Было так:

а стало так:

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

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

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

<!-- Start PureCSSMenu.com MENU -->

Сам Html фрагмент
<!-- End PureCSSMenu.com MENU -->

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

<ul id="nav">
      <li   class="page_item"><a href="http://ktonanovenkogo.ru/" >Главная</a></li>
      <?php wp_list_pages('depth=1&exclude=2860,5172,5195&sort_column=menu_order&title_li=' . ('') . '' ); ?>
    </ul>

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

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

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

Как стать блоггером тысячником 3.0

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

Самое интересное и полезное из категории "Верстка сайта, Онлайн сервисы"
  1. HTML и CSS — зачем их нужно знать
  2. butstrap-setka
    Как задать смещение между колонками в Bootstrap
  3. butstrap
    Сеточная система в Bootstrap 3 и
  4. bootstrap
    Bootstrap 3 — отзывчивый фреймворк для быстрого создания
  5. oglavlenie
    Как сделать оглавление (содержание, меню) для статьи
  6. Красивые русские шрифты для сайта и компьютера

Комментарии
Инка

Просто шикарно, спасибо! Действительно, простой способ, особенно приятно, что это легко сделать для WP

AndroiDev.ru

Можно использовать Ваш код впадающего горизонтального или вертикального у себя на сайте?

flickr gallery

Wow, nice tutorial, thanks google translate ;)

Ян

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

Dims

Огромное спасибо за обзор. Очень полезно.

Веретено

Я так понял, что менять название страниц в админке менять не получится? Т.е. этот вариант без динамики? Для Joomla не имеет смысла этот способ создания выпадающих менюшек использовать? А встроить этот инструмент в сам WordPress не получится? Плагин прикрутить...

Андрей

А в IE эти выпадающие менюшки будут работать без дополнительного небольшого Java Script? Не проверяли?

Иван

Для динамической структуры сайта такое выпадающее меню пригодно? Или там жестко задаются значения?

Алексей

Спасибо за статью. Попробую...

Антоншка

Отметьте, что кнопка «Download» появляется только после регистрации на онлайн сервисе Pure CSS Menu.

Alex

Дмитрий здравствуйте.

А скажите навороченность и множества выпадающих меню

на странице как то влияют на ее скорость загрузки?

СПС заранее...

Анна

А мне не прислали файл с Html, а только лишь папку с картинками :(

ЧТО ДЕЛАТЬ?

Анна

Код Html взяла в исходном коде страницы, на которой было изображена моя менюшка (онлайн сервис PureCSSMenu мне его прислал).

Я все вставила как Вы написали. Получилось.

Но потом решила все подвинуть вправо, чтобы по центру было. И тогда у меня все выпадающие меню второго уровня вообще очень сильно вправо сместились и вниз.

так что я до них мышкой не могу достать. Когда начинаю двигать в их сторону мышкой, то они пропадают.

Что можно сделать?

mamay_p

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

Дмитрий

mamay_p: перед сохранение измененного файла шаблона попробуйте преобразовать текст в UTF-8 без Bom. В Notepadd это можно сделать в разделе «Кодировки».

mamay_p

Дмитрий: Спасибо. Всё получилось. Только с кодировкой просто в UTF-8. Ещё раз спасибо огромное.

mamay_p

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

Андрей

Спасибо! Вот бы еще созданное меню научиться таскать по экрану, т.е. в нужное место вставлять!!! ПОМОГИТЕ! В файле «cm-style.css» меняю «relative» на «absolute» с указанием «Top» и «Left» позиции и, не получается!

Andrey

Еще бы научиться изменять положение меню на дисплее. Где в css position вставлять. Подскажите пожалуста!!! Help!!!

valya

Добрый день, прошу помочь у меня не вышло все вставить куда надо.

первую часть просто поставила в конец ксс кода шаблона. а вот со второй частью проблемы.

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

Евгений

Доброго времени суток!

1.зарегистрировался http://purecssmenu.com/

2.Создал меню на сайте http://purecssmenu.com/

3.скачал архив, распаковал его.

4.скопировал код и...а в какую часть кода (в моей таблице стилей) вставлять скопированный код?

У меня то размещение менюшек скакать начинает, то вообще ничего не происходит :(((

Подскажите пожалуста.

Заранее благодарен.

Евгений

как найти нужное место вставки кода в файле style.css и куда вставлять html код???

Намик

у меня на опере меню сдвинулось на верх, а в FF и IE все пошло нормально, как поступить с оперой? Спасибо

Евгений

Намик: как найти нужное место вставки кода в файле style.css и куда вставлять html код???

Кирилл

Создал менюшку — скачал zip файл — распаковал.

Затем проделал все операции которые указаны для Joomla внизу статьи — указал правильное место модуля в шаблоне.

Но вместо выпадающего меню получил в шапке сайта весь код написанный на html (который я вставлял)

Как решить проблему ?

Tim

У меня такая же проблема как у Кирилл. Код вместо меню:(

moon

у меня никакое меню не отображается, только последняя строчка — CSS Drop Down Menu by PureCSSMenu.com. Что делать не знаю, замучилась уже с этими подкатегориями.В шаблоне, который установила на сайт, они не прописаны, сама сделать не могу((

Люба

Не могу поставить, отображается коряво постоянно, целый день сижу над ним, может кто-то помочь?

сергей

а с категориями такое получится?

Любовь

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

Наталья

Добрый день! Помогите пожалуйста. Я сделала выпадающее меню с помощью плагина Drop-down Menu, очень удобная вещь, но есть маленькая заминка. Шаблон сайта на вордпрессе выглядит следующим образом: название «Главная» находится по середине окна, а те странички для которых я создавала менюшку после установки плагина съехали на вторую строчку под название «Главная», да еще и прилепились с левой стороны окна сайта. Как только этот плагин убираешь, созданные странички возвращаются на свое место в строку где название «Главная». Для наглядности приведу пример:

(это так, как получается с плагином):

Главная

Коротко о сайте Это Интересно!

(а это так, как мне бы хотелось сделать):

Главная Коротко о сайте Это Интересно!

Я так поняла, что мне нужно покапаться в цсс самого плагина, но что только я уже не делала не получается сдвинуть это меню.

Добрые люди, может вы подскажете, какой код мне нужно поменять? Заранее спасибо!

Dezu

небольшая проблемка с purecssmenu... на главной странице менюшка отображается не полностью и при наведении не раскрывается. если перейти на любую другую страницу сайта, то меню полностью функционирует, но происходит смещение на строку вверх. подскажите как можно это исправить?

Юля

Огромное спасибо!!!!!!!!

выручили!

Серж

Андрей! Подскажи пожалуйста, как бы сделать все наоборот? Мне нужно как раз запретить показ в менюшке страниц второго уровня т.е. подстраниц. Я хочу сделать страницу новости на своем блоге и там размещать подстраницы с новостями, их будет много и выплывающее меню только мешает, как бы это запретить! Если нужно посмотреть как это выглядит вот сайт: http://1efimrealty.ru

Спасибо заранее!

Админ

Менюшка классная! Посмотрите еще один урок (ссылка ниже), очень прикольное меню!

Тут урок как сделать классное Анимированное меню с выскальзывающим текстом и иконкой — http://ileson.ru/lesson.php?rub=6&id=50

pri4ina.ru

Исправляй начало статьи.

...нужно в первую очередь там зарегистрироваться, а затем уже определяться с шаблоном выпадающего меню.

Пол часа делал менюшку, а потом оказалось, что там ещё и регистрироваться надо...

У меня просто нет хороших слов, предупреждать же надо, что необходима регистрация.

Димка

Посмотрите пожалуйста, Semant.ucoz.ru можно ли в отдельном блоке поменять дизйн шрифт, размер подскажите виджет может какой для блоков

Даниил

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

Виктор Ивановский

Читать код выравненный по центру ужасно (

Бабай

Подскажите почему сьезжают вниз сайдбар,...или виджеты

Роман

в IE8 меню отображается некорректно. В остальных браузерах все отлично. Подскажите как с этим бороться.

Дима

Ужасный урок!! Так запутанно, я уже три часа вмыкаю...

Екатерина

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

nikko

Описал прекрасный модуль Выпадающее меню joomla http://e-kzn.ru/rasshireniya/vipadaiuschee-meniu-joomla.html горизонтальное и вертикальное

Константин

Вот здесь я подробно расписал как создать выпадающее горизонтальное меню, которое создается через панель управления wordpress, используется технология java скриптов, но все расписано подробно, так что поймет любой новичок http://mnogoblog.ru/urok-26-sozdaem-vypadayushhee-gorizontalnoe-menyu-wordpress-podrobno

T’Anik

Я имею лишь первоначальные сведения о html и css, и то умудрилась только по статье сделать выпадающее меню. Предварительно перерыла тучу сайтов с инструкциями, как это сделать. Ничего не поняла, и, соответственно, ничего не получилось. А здесь ТАК ПОНЯТНО написано, что у меня вышло с первого раза! Честь и хвала автору!!

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

Тимирлан

Спасибо большое.У меня все получилось,но как сделать кнопки немного больше?

Заранее спасибо.

Юлия

Здравствуйте!

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

Константин

Для создания вертикального меню с древовидной структурой рубрик, при этом рубрики и подрубрики будут раскрываться (то есть это сможет заменить вам также плагин «Хлебные крошки»)есть отличный wordpress плагин — Collapsing Categories, о нем можете прочитать в моей статье: http://mnogoblog.ru/vertikalnoe-menyu-s-raskryvayushhimisya-rubrikami-plagin-collapsing-categories

Игорь

А на CMS Joomla 2.5 будет работать?

Denis

Спасибо за статью!

В общем все стало, стили подключил. Но есть пару проблем, менюшка ушла под блок, и в ней нет картинки (стрелочки). помогите пожалуйста

посмотреть можно тут: http://wotplayer.pro/

Константин

Есть один вопрос новичка. У меня на хостинге нет файла style.css. Куда в таком случае вставлять css-код? спасибо, если кто подскажет

Милана

У меня получился обычный список, а не раскрывающийся, и без фона и рамок, просто один текст...Как исправить — не знаю...

Set

здравствуйте, подскажите как исправить — у меня на сайте http://skachaj.net перестало выпадать меню?

Мария

Внизу в правом углу большой кнопки Download не было, после процесса регистрации появилась, но пришло совсем не то. Жалко, а так надеялась и почти поверила в успех :(

Виктор

Спасибо за статью. Всё сделал, всё работает, но есть одно но.

По умолчанию меню выпадает вправо, как можно изменить, чтоб например правые меню, выпадали влево. Где это прописывать и как?

Елена

Спасибо! Ваша помощь просто неоценима, если что не понятно всегда к вашим материалам обращаюсь.

Александр

Подскажите, пожалуйста, на ktonanovenkogo.ru верхнее меню поисковик видит или нет?

Ссылок в коде страницы на эти пункты не заметил нигде на сайте... так как они все-таки индексируются? за счет покупных ссылок?

Александр

Добавил «Оповещать о новых комментариях по почте»

Candycat

Огромное спасибо за столь полезную и подробную инструкцию)))

MrVigner

Очень большое спасибо за статью! Долго я промучился чтобы сделать выпадающее вертикальное меню в горизонтальном и так и не получилось то что хотел. А тут воспользовался этим сервисом и именно то что надо! Немного только стиль подкоректировал под дизайн сайта и все :-)

Максат из Чимкента

спасибо, огромное

Вячеслав

Дмитрий, подскажи пожалуйста

Как сделать открывающее меню при нажатие на кнопку.

К примеру, будет пункт меню — Выбрать другую услугу.

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

То есть, стандартное выпадающее меню на wp не подходит.

Написать

(обязательно)

(обязательно)

При вставке любого кода, пишите его между [php] и [/php]

Это не спам (обязательно)

Подписаться без комментирования