Очень красивое меню для сайта

Очень красивое меню для сайта


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

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

<ul class="tabs">
      <li>[url=#">Dropdown 1</a>
      <ul class=]

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

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

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

      </li>
      <li><a href=]Dropdown 3[/url]
      <ul class="dropdown">
      <li>[url=#">Menu item 1</a></li>
      <li><a href=]Menu item 2[/url]</li>
      <li>[url=#">Menu item 3</a></li>
      <li><a href=]Menu item 4[/url]</li>
      <li>[url=#">Menu item 5</a></li>
      <li><a href=]Menu item 6[/url]</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” к последнему элементу меню
- добавили элемент вокруг элементов главного меню

<div id="menu">
      <ul class="tabs">
      <li><h4>[url=#">In the blog »</a></h4></li>
      <li class=]<a href="#"><span>Recent</span>[/url]
      <ul class="dropdown">
      <li>[url=#">Menu item 1</a></li>
      <li><a href=]Menu item 2[/url]</li>
      <li>[url=#">Menu item 3</a></li>
      <li><a href=]Menu item 4[/url]</li>
      <li>[url=#">Menu item 5</a></li>
      <li class=]<a href="#">Menu item 6[/url]</li>
      </ul>
      </li>
      <li class="hasmore">[url=#"><span>Topics</span></a>
      <ul class=]
      <li><a href="#">Topic 1[/url]</li>
      <li>[url=#">Topic 2</a></li>
      <li><a href=]Topic 3[/url]</li>
      <li class="last">[url=#">Topic 4</a></li>
      </ul>
      </li>
      <li><a href=]<span><strong>[img=|RSS]images/feed-icon-14x14.png[/img] Subscribe to RSS</strong></span>[/url]</li>
      <li><h4>[url=#">Elsewhere »</a></h4></li>
      <li><a href=]<span>About</span>[/url]</li>
      <li class="hasmore">[url=/about/#networks]<span>Networks</span>[/url]
      <ul class="dropdown">
      <li>[url=#">Twitter</a></li>
      <li><a href=]posterous[/url]</li>
      <li>[url=#">SpeakerSite</a></li>
      <li><a href=]LinkedIn[/url]</li>
      <li class="last">[url=#">See more…</a></li>
      </ul>
      </li>
      <li><a href=]<span>Bookmarks</span>[/url]</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";
      
      });
Другие новости по теме:

Категория: Другие Скрипты ----- Просмотров: 4174 ----- Комментариев: 10

Вернуться

  • 5Nizza

  • 21 ноября 2009 00:02
  • Группа: User
  • ICQ: 7398444
  • Регистрация: 28.07.2009
  • Комментариев: 101
  • Публикаций: 11
^
конечно не сказал бы что супер красивое меню) но все же не плохое fellow думаю кому нить пригодится) спс за урок. ставлю + ато у кого то есть привычка ставить минус не объяснив причину ...

--------------------
Я по натуре оптимист. Все будет хорошо, а дату лучше не уточнять. (Земфира)
  • Группа: User
  • ICQ: 817135
  • Регистрация: 12.12.2008
  • Комментариев: 321
  • Публикаций: 0
^
Это олдскулл, цвета плохо подобраны и ничего особенного в это меню нет, зато кода напичкали немеряно!
lucefeel, почему автор не указан ?

--------------------
Человек растет и развивается только тогда, когда он один.

  • 5Nizza

  • 21 ноября 2009 01:01
  • Группа: User
  • ICQ: 7398444
  • Регистрация: 28.07.2009
  • Комментариев: 101
  • Публикаций: 11
^
ALTERNATE, согласен коду тут пипец скок wink

--------------------
Я по натуре оптимист. Все будет хорошо, а дату лучше не уточнять. (Земфира)
  • Группа: User
  • ICQ: --
  • Регистрация: 17.10.2009
  • Комментариев: 24
  • Публикаций: 6
^
это же копипаст с одного сайта. и это уже не первый урок, тупо скопирован))

  • SACYRA

  • 21 ноября 2009 12:49
  • Группа: User
  • ICQ: --
  • Регистрация: 4.02.2009
  • Комментариев: 14
  • Публикаций: 0
^
Норма, только я соглашусь с ALTERNATE,

  • tumoxa

  • 21 ноября 2009 12:53
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Данный урок подготовлен для Вас командой сайта ruseller.com
Источник урока: www.webdesigndev.com fellow
  • Группа: User
  • ICQ: --
  • Регистрация: 16.08.2008
  • Комментариев: 156
  • Публикаций: 2
^
дле ин начал {пи*дить} уроки с руселера?))

  • killer2

  • 21 ноября 2009 16:39
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Ставлю - задумка норм но чесно говоря дизайн Г
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
тупой копипаст с русселлера слово в слово, афтар баянщег и нуп
  • Группа: User
  • ICQ: 557572849
  • Регистрация: 22.04.2009
  • Комментариев: 62
  • Публикаций: 14
^
micsoft1,

Ты так говоришь как будто я себе права присвоил, или ихнюю задумку)
Просто искал себе менюху, нашёл, решил подкинуть людишкам, если норм, пусть берут, я то за это лавэ не беру! Автора действительно не знаю, знал бы, написал, и Н...Й базарить своей метлой! Да скопировал, и что? бабушкам басни разсказывай
* На самую главную
* На главную

* Релизы CMS DLE
* Шаблоны для DLE
* Модули для DLE
* Хаки
* Платные DLE шаблоны & модули
* Баги
* Скрипты для сайта
* Вебмастеру
* Для фотошопа
* Все последние новости