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

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

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

http://cssmenumaker.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

6. CSS3 Menus – 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 и скопировать код:

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

Например,  давайте возьмем стандартную тему 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 код:

После чего переходим в панель управления сайтом, в левом меню опять выбираем пункт “Внешний вид” и его подпункт “Редактор”, но теперь справа в списке шаблонов выбираем уже не файл 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.
С помощью данной инструкции можно подключить многоуровневоем меню, которое можно будет редактировать не в коде сайта, а в панели управления в пункте “Меню”.