В сегодняшнем уроке я покажу Вам как создать красивое меню для сайта с помощью HTML, CSS и jQuery.

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

HTML

<ul class="tabs">
      <li><a href="#">Dropdown 1</a>
      <ul class="dropdown">

      <li><a href="#">Menu item 1</a>
      <ul class="dropdown">
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 1</a></li>
      <li><a href="#">Submenu item 1</a></li>
      </ul>
      </li>
      <li><a href="#">Menu item 2</a></li>

      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>

      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      </ul>
      </li>
      <li><a href="#">Dropdown 2</a>
      <ul class="dropdown">
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      </ul>

      </li>
      <li><a href="#">Dropdown 3</a>
      <ul class="dropdown">
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      </ul>
      </li>

      </ul>

Заметьте, в данном меню используется только два класса tabs и dropdown.

Первый используется для создания меню по горизонтали, второй - для оформления выпадающих подменю.
CSS

/* tabs
      *************************/
      
      ul.tabs
      {
      display: table;
      margin: 0;
      padding: 0;
      list-style: none;
      position: relative;
      }
      
      ul.tabs li
      {
      margin: 0;
      padding: 0;

      list-style: none;
      display: table-cell;
      float: left;
      position: relative;
      }
      
      ul.tabs a
      {
      position: relative;
      display: block;
      }
      
      /* dropdowns
      *************************/
      
      ul.dropdown
      {
      margin: 0;
      padding: 0;
      display: block;
      position: absolute;
      z-index: 999;
      top: 100%;
      width: 250px;
      display: none;
      left: 0;
      }
      
      ul.dropdown ul.dropdown
      {
      top: 0;
      left: 95%;
      }
      
      ul.dropdown li
      {
      margin: 0;
      padding: 0;
      float: none;
      position: relative;
      list-style: none;
      display: block;
      }
      
      ul.dropdown li a
      {
      display: block;
      }

jQuery

$(function () {
      $('.dropdown').each(function () {
      $(this).parent().eq(0).hover(function () {
      $('.dropdown:eq(0)', this).show();
      }, function () {
      $('.dropdown:eq(0)', this).hide();
      });
      });
      });

Данный код просто уникальный. Он найдет любой элемент с классом dropdown и превратит его в рабочее меню.

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

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

Нам понадобится несколько изображений. Вот они:

Измененный HTML

- все меню обернули в слой #menu
- добавили элементы h4 для более сложной структуры
- добавили класс “hasmore” к элементам меню, содержащим выпадающие подменю
- добавили класс “last” к последнему элементу меню
- добавили элемент <span> вокруг элементов главного меню

<div id="menu">
      <ul class="tabs">
      <li><h4><a href="#">In the blog »</a></h4></li>
      <li class="hasmore"><a href="#"><span>Recent</span></a>
      <ul class="dropdown">
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li class="last"><a href="#">Menu item 6</a></li>
      </ul>
      </li>
      <li class="hasmore"><a href="#"><span>Topics</span></a>
      <ul class="dropdown">
      <li><a href="#">Topic 1</a></li>
      <li><a href="#">Topic 2</a></li>
      <li><a href="#">Topic 3</a></li>
      <li class="last"><a href="#">Topic 4</a></li>
      </ul>
      </li>
      <li><a href="#"><span><strong><img src="images/feed-icon-14x14.png" width="14" height="14" alt="RSS"> Subscribe to RSS</strong></span></a></li>
      <li><h4><a href="#">Elsewhere »</a></h4></li>
      <li><a href="#"><span>About</span></a></li>
      <li class="hasmore"><a href="/about/#networks"><span>Networks</span></a>
      <ul class="dropdown">
      <li><a href="#">Twitter</a></li>
      <li><a href="#">posterous</a></li>
      <li><a href="#">SpeakerSite</a></li>
      <li><a href="#">LinkedIn</a></li>
      <li class="last"><a href="#">See more…</a></li>
      </ul>
      </li>
      <li><a href="#"><span>Bookmarks</span></a></li>
      </ul>

      </div>

Измененный CSS

/* hack reset (for production, use Yahoo! reset CSS)
      *************************/
      
      .*
      {
      margin: 0;

      padding: 0;
      }
      
      /* body
      *************************/
      
      body
      {
      font: 14px/21px Georgia, serif;
      color: #370707;
      background: #e3d79b url(images/mainbg.jpg) left 40px repeat-x;
      }
      
      /* links

      *************************/
      
      a:link, a:visited, a:hover, a:active
      {
      text-decoration: none;
      }
      

      /* inline elements
      *************************/
      
      strong
      {
      font-weight: bold;
      }
      
      /* menu-specifc
      *************************/
      
      #menu
      {
      position: fixed;
      z-index: 5;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #ffb35a url(images/topbg.gif) repeat-x;
      border-bottom: 1px solid #000;
      }
      
      #menu ul
      {
      margin: 0 auto;
      }
      
      #menu ul li.hasmore
      {
      background: url(images/drophighlight.png) no-repeat center 27px;
      }
      
      #menu ul li h4
      {
      margin: 0;
      }
      
      #menu ul li h4 a
      {
      font-size: 14px;
      color: #000;
      font-weight: bold;
      padding: 0 15px;
      }
      
      #menu ul li a
      {
      color: #9b2021;
      padding-left: 4px;
      }
      
      #menu ul li a img
      {
      vertical-align: middle;
      }
      
      #menu ul li a:hover
      {
      background: url(images/topselectionleft.png) top left no-repeat;
     }
      
      #menu ul li a span
      {
      display: block;
      padding: 0 15px 0 11px;
      }
      
      #menu ul li a:hover span
      {
      background: url(images/topselectionright.png) top right;
      }

      
      #menu ul.dropdown
      {
      padding: 10px;
      background-image: url(images/dropdown.png);
      overflow:hidden;
      border-bottom: 1px solid #dc902f;
      width: 290px;
      }
      
      #menu ul.dropdown li a
      {
      border-bottom: 1px solid #e5cd8e;
      line-height: 30px;
      overflow: hidden;
      height: 30px;
      }
      
      #menu ul.dropdown li.last a
      {
      border-bottom-width: 0;
      }
      
      #menu ul.dropdown li a:hover
      {
      background: url(images/menuarrow.png) no-repeat left center;
      }
      
      #menu ul li h4 a:hover
      {
      background-image: none;
      }

Измененный jQuery

- использовали hoverIntent jQuery плагин для создания красивого эффекта при наведении мышки на меню
- использовали easing jQuery плагин для более плавных эффектов
- все изображения загружаются заранее
- поменяли функции show() и hide() на slideDown() и fadeOut()

$(function () {
      
      $('.dropdown').each(function () {
      $(this).parent().eq(0).hoverIntent({
      timeout: 100,
      over: function () {
      var current = $('.dropdown:eq(0)', this);
      current.slideDown(100);
      },
      out: function () {
      var current = $('.dropdown:eq(0)', this);
      current.fadeOut(200);
      }
      });
      });
      
      $('.dropdown a').hover(function () {

      $(this).stop(true).animate({paddingLeft: '35px'}, {speed: 100, easing: 'easeOutBack'});
      }, function () {
      $(this).stop(true).animate({paddingLeft: '0'}, {speed: 100, easing: 'easeOutBounce'});
      });
      
      pic1 = new Image(310, 672);
      pic1.src = "images/dropdown.png";

      
      pic2 = new Image(4, 40);
      pic2.src = "images/dropselectionleft.png";
      
      pic3 = new Image(394, 40);
      pic3.src = "images/dropselectionright.png";
      
      });

Меню готово. Пользуйтесь :)

Добавлено: 09 Мая 2018 09:53:05 Добавил: Андрей Ковальчук Нравится 0

Добавить