Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Выезжающее меню с помощью jQuery
Выезжающее меню с помощью jQuery
JackДата: Понедельник, 21.06.2010, 22:06 | Сообщение # 1
Шептун
Группа: Пользователи
Пользователь №: 9
Сообщений: 32
Награды: 0
Репутация: 2
Статус: оффлайн

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

Это большое меню будет содержать название и описание каждого элемента меню. Оно будет выезжать снизу, показывая при этом иконку и текст описания. Мы будем использовать CSS3 свойства для красивых эффектов тени и jQuery для интерактивности.

Иконки для меню взяты из набора Luna Grey - http://dryicons.com/free-icons/preview/luna-grey-icons/

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

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

Разметка

Меню будет находится внутри контейнера. Меню будет состоять из неупорядоченного списка с элементами ссылок внутри. Элементы ссылок будут содержать два span: один для названия, второй для описания. У нас также будет использован элемент "i" для иконки

Code
<div class="container">
    <ul id="menu">
     <li>
      <a>
       <i class="icon_about"></i>
       <span class="title">About</span>
       <span class="description">
        Learn about us and our services
       </span>
      </a>
     </li>
      <li>
      <a>
       <i class="icon_work"></i>
       <span class="title">Work</span>
       <span class="description">
        See our work and portfolio
       </span>
      </a>
     </li>
     <li>
      <a>
       <i class="icon_help"></i>
       <span class="title">Help</span>
       <span class="description">
        Talk to our support
       </span>
      </a>
     </li>
      <li>
      <a>
       <i class="icon_search"></i>
       <span class="title">Search</span>
       <span class="description">
        Search our website
       </span>
      </a>
     </li>
    </ul>
</div>

Не забудьте исправить ссылки на свои.

CSS

Давайте начнем с стилей окружающего контейнера. Контейнер будет иметь относительное положение, так как само меню - абсолютное. Нам необходимо будет спрятать часть с описанием с помощью overflow:hidden.

Code
.container{
       width:900px;
       height:130px;
       margin:0 auto;
       position:relative;
       overflow:hidden;
       border:3px solid #fff;
    background-color:#fff;
       -moz-box-shadow:1px 1px 6px #000;
       -webkit-box-shadow:1px 1px 6px #000;
       -moz-border-radius:0px 0px 20px 20px;
       -webkit-border-bottom-left-radius:20px;
       -webkit-border-bottom-right-radius:20px;
       border-radius:0px 0px 20px 20px;
}

Мы создаем красивые тени и закругленные углы с помощью CSS3 свойств. Помните, что они будут работать только в современных браузерах. Список будет иметь следующие стили:

Code
.container{
       width:900px;
       height:130px;
       margin:0 auto;
       position:relative;
       overflow:hidden;
       border:3px solid #fff;
    background-color:#fff;
       -moz-box-shadow:1px 1px 6px #000;
       -webkit-box-shadow:1px 1px 6px #000;
       -moz-border-radius:0px 0px 20px 20px;
       -webkit-border-bottom-left-radius:20px;
       -webkit-border-bottom-right-radius:20px;
       border-radius:0px 0px 20px 20px;
}

Как Вы можете увидеть, мы прячем элемент нажатия на ссылку практически полностью. Мы делаем это с помощью отрицательно bottom позиции. Можете поиграть с этим значением и немного видоизменить меню.

Теперь давайте взглянем на классы для иконок:

Code
.icon_about,
.icon_work,
.icon_help,
.icon_search{
       width:64px;
       height:64px;
       display:block;
       left:140px;
       top:50px;
       position:absolute;
}
.icon_about{
       background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
       background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
       background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
       background:transparent url(../images/find.png) no-repeat top left;
}

CSS для названия и описания имеют такой вид
Code
ul#menu span.title{
       display:block;
       height:26px;
       text-shadow:1px 1px 1px #000;
       color:#B7B7B6;
       text-indent:10px;
}
ul#menu span.description{
       width:140px;
       height:80px;
       background-color:#B7B7B6;
       border:3px solid #fff;
       color:#fff;
       display:block;
       font-size:24px;
       padding:10px;
       -moz-box-shadow:1px 1px 6px #000;
       -webkit-box-shadow:1px 1px 6px #000;
       box-shadow:1px 1px 6px #000;
       -moz-border-radius:10px;
       -webkit-border-radius:10px;
       border-radius:10px;
}

Мы также хотим, чтобы 2 span меняли цвет фона и текста, так что мы также определим классы для ссылок при наведении

Code
ul#menu a:hover span.description{
       background-color:#54504F;
}
ul#menu a:hover span.title{
       color:#54504F;
}

Вот со стилями и покончено. Давайте добавим немного красивых эффектов с помощью jQuery.

Javascript

Код Javascript будет очень простым, так как мы делаем только две вещи: выезжают элемент ссылки и иконка. Все происходит при наведении мышки.

Code
$(function() {
       $('#menu > li').hover(
           function () {
               var $this = $(this);
               $('a',$this).stop(true,true).animate({
                       'bottom':'-15px'
                   }, 300);
               $('i',$this).stop(true,true).animate({
                       'top':'-10px'
                   }, 400);
           },
           function () {
               var $this = $(this);
               $('a',$this).stop(true,true).animate({
                       'bottom':'-95px'
                   }, 300);
               $('i',$this).stop(true,true).animate({
                       'top':'50px'
                   }, 400);
           }
       );
});

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

Вот и все готово!

Сообщение отредактировал Jack - Понедельник, 21.06.2010, 22:06
 
вверх
Angry4178Дата: Суббота, 10.07.2010, 00:57 | Сообщение # 2
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
Jack, выглядит просто отлично.Прекрасно подойдет для сайтов которые экономят место.Спасибо чуть позже и себе установлю!


 
вверх
cechДата: Суббота, 10.07.2010, 19:20 | Сообщение # 3
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Это меню не для всех браузеров smile


 
вверх
Angry4178Дата: Суббота, 10.07.2010, 19:59 | Сообщение # 4
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, наверное в IE не пашет, в Mozile все норм , а в Oper'е что-то не так отображается?)


 
вверх
nDiviDДата: Суббота, 10.07.2010, 21:22 | Сообщение # 5
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
В хроме норм


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
Angry4178Дата: Воскресенье, 11.07.2010, 10:51 | Сообщение # 6
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
nDiviD, ты смотрел ДЕМО через хром? Или установил на сайт и смотрел?


 
вверх
nDiviDДата: Понедельник, 12.07.2010, 05:58 | Сообщение # 7
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
Zloi, и демо, и на пробном сайте устанавливал, а что?


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
Angry4178Дата: Понедельник, 12.07.2010, 15:03 | Сообщение # 8
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
nDiviD, просто у людей по разному получается устанавливать..у кого-то коряво у кого-то вообще не пашет.Вот я и хотел спросить..установил и проверил ..или просто в демке смотрел)


 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Выезжающее меню с помощью jQuery
  • Страница 1 из 1
  • 1
Поиск: