Создаем меню с бесплатным сервисом cssmenumaker.com

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

Скачать исходники для статьи можно ниже

Переходим на сайт:

http://cssmenumaker.com/

Сайт англоязычный, так что переводчик от Google или Яндекса не помешает.

создаем любой вид меню с бесплатным онлайн сервисом cssmenumaker

Нажимаем на пункт верхнего меню под названием «Menu», после чего откроется окошко, в котором можно выбрать меню по цвету и виду:

выбор вида меню на сайте cssmenumaker.com

Всего видов меню, которые мы можем выбрать, пять:

создаем любое меню с помощью онлайн сервиса

Однако, если просто навести в верхнем меню на пункт «Menu», то нам предоставят возможность выбрать из 6 видов меню, так как добавиться еще «CSS3 меню» (это просто создание меню с помощью языка CSS3, позволяющему добавлять к меню различные эффекты: закругленные углы, тени, градиенты) — и данный тип меню будет представлен во всех предыдущих видах меню.

виды меню которые можно создать с cssmenumaker

Всего же различных менюшек, которые представлены на данном сайте  около 120 на момент написания данной статьи.

Давайте же пробежимся по их видам:

1. Drop Down Menu — выпадающее меню

выпадающее меню

Здесь стоит обратить внимание на то, сколько данное меню имеет уровней (Submenu), на скриншоте выше отмечено синей стрелочкой.

2. Flyout Menus — выскальзывающее меню

выскальзывающее меню

3. Horizontal Menus — простое горизонтальное меню

простое горизонтальное меню

У данного вида меню нет подуровней.

4. Vertical Menus — простое вертикальное меню

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

5. Tab Menus — таб меню (меню закладки)

меню в виде табов

6. CSS3 Menus — CSS3 меню

CSS3 меню

 
 
Допустим вы выбрали вид и цвет менюшки, для примера возьмем вот это меню:

создаем меню для сайта

Нажимаем на него и переходим в следующее окошко:

редактируем меню

Здесь вы сможете увидеть как будет выглядеть и работать выбранное нами меню, здесь же расположены 4 кнопки:

1. Customize — настроить меню.

2. Dreamweaver Extensions — платное расширения для программы Dreamweaver стоит 29 $.

3. Download Source — кнопка загрузить файлы меню (html и css файл, так сказать рабочий пример)

4. Guides — инструкция для движков: WordPress  и Blogger — универсальная  для всех видов меню.

 
Давайте же рассмотрим кнопку Customize (настройка меню), нажимаем на нее:

онлайн редактор меню

Под стрелочкой 1 (скриншота выше) представлена схема вашего меню — здесь можно удалять ненужные пункты (нажав на крестик), перетаскивать пункты (с помощью мышки), добавлять пункты, нажав на кнопку  (указанна стрелочкой 2), а также изменить имя и ссылку каждого пункта меню — достаточно щелкнуть на нужный и изменить его параметры (стрелка 3) — здесь же есть 2 параметра, которые можно поставить: «make active» — сделать пункт активным, то есть с ссылкой или можете снять галочку, тогда при нажатии на данный пункт ссылка работать не будет и «Open in new window» - открыть данный пункт в новом окне.

Под стрелочкой 4 — представлены вкладки:

Preview — предпросмотр.

HTML — код меню.

CSS — код стилей меню.

Также  в некоторых менюшках будет дополнительная вкладка Images — изображения, в которых вы можете скачать картинки, которые используются для оформления данной менюшки.

 
 

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

Для этого вам нужно перейти на вкладку HTML и скопировать код:

копируем html код меню

И вставляем его в нужном месте на вашем сайте.

Например,  давайте возьмем стандартную тему wordpress - Twenty Eleven и удалим старое меню, а на его место вставим свое новое меню, созданное с помощью онлайн сервиса cssmenumaker.com.

Для этого заходим в панель управления сайтом, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл header.php (шаблон шапки сайта):

вставляем меню к себе на сайт

Ищем в данном файле (header.php) код вывода меню — он находится в самом конце и выглядит следующим образом:

<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->

Удаляем его и на его место вставляем код меню, созданного нами на сайте cssmenumaker.com, в моем примере он следующий:

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Далее нам нужно на сайте cssmenumaker.com скопировать у создаваемого нами меню еще и его CSS код:

копируем CSS код создаваемого нами меню

После чего переходим в панель управления сайтом, в левом меню опять выбираем пункт «Внешний вид» и его подпункт «Редактор», но теперь справа в списке шаблонов выбираем уже не файл header.php, а файл стилей style.css и в самом конце вставляем скопированный нами CSS код:

файл стилей

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

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}
...

Сохраняем изменения файла стилей (style.css) и переходим на сайт и видим, что наше меню удачно вставилось на сайт:

созданное нами меню

Таким способом можно вставить меню на любой сайт.

 
PS: Также советую прочитать инструкцию, которую предлагает сайт cssmenumaker.com для создания меню на движке WordPress:

http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial

Данная инструкция использует Custom Walker Class в файле functions.php.
С помощью данной инструкции можно подключить многоуровневоем меню, которое можно будет редактировать не в коде сайта, а в панели управления в пункте «Меню».

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>