Форма входа

mvcreative

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

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Забавное меню с помощью jQuery
Забавное меню с помощью jQuery
nDiviDДата: Суббота, 10.07.2010, 08:29 | Сообщение # 1
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн

В этом уроке мы создадим очень забавное меню, с помощью интересного jQuery патча от Захария Джонсона. Мы создадим меню с маленькими иконками, которые будут вращаться при наведении. Также мы сделаем так, чтобы элементы меню расширялись и показывали контент внутри.

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

Разметка

Для этого меню мы не будем создавать список, а будем создавать div. Все div с элементами меню мы поместим в общий div menu. Каждый элемент будет содержать иконку с ссылкой и div с заголовком и абзацем, куда мы будем добавлять содержимое.

Code
<div class="menu">
<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Contact us</h2>

<a href="#">eMail</a>
<a href="#">Twitter</a>
<a href="#">Facebook</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Help</h2>

<a href="#">FAQ</a>
<a href="#">Live Support</a>
<a href="#">Tickets</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Search</h2>

<input type="text"></input>
<a href="">Go</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Image Gallery</h2>

<a href="#">Categories</a>
<a href="#">Archives</a>
<a href="#">Featured</a>
</p>
</div>
</div>
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Start from here</h2>

<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Pricing</a>
</p>
</div>
</div>
</div>

Изначально div элемента будет под размер иконки, далее мы сделаем так, чтобы он расширялся и появлялся контент.

CSS

Общая настройки стилей для меню.

Code

.menu{
         width:800px;
         height:52px;
         position:relative;
         top:200px;
         left:100px;
         font-family: "Trebuchet MS", sans-serif;
         font-size: 16px;
         font-style: normal;
         font-weight: bold;
         text-transform: uppercase;
}

Элементы внутри меню будут выровнены вправо, поскольку мы хотим чтобы меню раскрывалось влево и вытолкнуло другие элементы.

Code

.item{
         position:relative;
         background-color:#f0f0f0;
         float:right;
         width:52px;
         margin:0px 5px;
         height:52px;
         border:2px solid #ddd;
         -moz-border-radius:30px;
         -webkit-border-radius:30px;
         border-radius:30px;
         -moz-box-shadow:1px 1px 3px #555;
         -webkit-box-shadow:1px 1px 3px #555;
         box-shadow:1px 1px 3px #555;
         cursor:pointer;
         overflow:hidden;
}

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

Code
.link{
         left:2px;
         top:2px;
         position:absolute;
         width:48px;
         height:48px;
}
.icon_home{
         background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
         background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
         background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
         background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
         background:transparent url(../images/photos.png) no-repeat top left;
}

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

Code
.item_content{
         position:absolute;
         height:52px;
         width:220px;
         overflow:hidden;
         left:56px;
         top:7px;
         background:transparent;
         display:none;
}
.item_content h2{
         color:#aaa;
         text-shadow: 1px 1px 1px #fff;
         background-color:transparent;
         font-size:14px;
}
.item_content a{
         background-color:transparent;
         float:left;
         margin-right:7px;
         margin-top:3px;
         color:#bbb;
         text-shadow: 1px 1px 1px #fff;
         text-decoration:none;
         font-size:12px;
}
.item_content a:hover{
         color:#0b965b;
}
.item_content p {
         background-color:transparent;
         display:none;
}
.item_content p input{
         border:1px solid #ccc;
         padding:1px;
         width:155px;
         float:left;
         margin-right:5px;
}

Теперь давайте добавим немного магии.

Javascript

Для начала нам необходимо подключить jQuery и патч Захария. После этого добавим следующее:

Code
$('.item').hover(
      function(){
       var $this = $(this);
       expand($this);
      },
      function(){
       var $this = $(this);
       collapse($this);
      }
);
function expand($elem){
      var angle = 0;
      var t = setInterval(function () {
       if(angle == 1440){
        clearInterval(t);
        return;
       }
       angle += 40;
       $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
      },10);
      $elem.stop().animate({width:'268px'}, 1000)
      .find('.item_content').fadeIn(400,function(){
       $(this).find('p').stop(true,true).fadeIn(600);
      });
}
function collapse($elem){
      var angle = 1440;
      var t = setInterval(function () {
       if(angle == 0){
        clearInterval(t);
        return;
       }
       angle -= 40;
       $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
      },10);
      $elem.stop().animate({width:'52px'}, 1000)
      .find('.item_content').stop(true,true).fadeOut()
               .find('p').stop(true,true).fadeOut();
}

Мы создали две функции - одна для расширения элемента и одна для возвращения в первоначальную позицию. Функция расширения заставит вращаться 4 иконки вокруг себя (360 умножить на 4 = 1440). Также мы сделаем расширение элемента анимируя ширину. Далее мы позволим появится контенту.

Функция возврата будет вращать иконку назад, уменьшать ширину элемента и контент весь исчезнет.



Прикрепления: jquery-animate-.zip(6.0 Kb)




Web-create пати uNiceGroup =) Порно бесплатно!


Сообщение отредактировал nDiviD - Суббота, 02.10.2010, 15:23
 
вверх
Angry4178Дата: Суббота, 10.07.2010, 12:14 | Сообщение # 2
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
nDiviD, ух ты!Прикольно выглядит!Зачетно!


 
вверх
saynovДата: Суббота, 10.07.2010, 16:53 | Сообщение # 3
Болтун
Группа: Пользователи
Пользователь №: 77
Сообщений: 75
Награды: 0
Репутация: 0
Статус: оффлайн
да, выглядит уж точно-необычно...такого не видел никогда.. smile
 
вверх
Angry4178Дата: Понедельник, 12.07.2010, 15:05 | Сообщение # 4
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
nDiviD, думаю лучше было бы отключить вращение...Без него как то солиднее что ли..


 
вверх
RedFoxДата: Понедельник, 12.07.2010, 15:13 | Сообщение # 5
Говорун
Группа: Пользователи
Пользователь №: 26
Сообщений: 52
Награды: 1
Репутация: 7
Статус: оффлайн
на демо не вращаеться меню cry
 
вверх
Angry4178Дата: Понедельник, 12.07.2010, 15:25 | Сообщение # 6
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
RedFox, все прекрасно вращается (у меня лиса 3,5)проверено и в Opere


 
вверх
RedFoxДата: Понедельник, 12.07.2010, 15:43 | Сообщение # 7
Говорун
Группа: Пользователи
Пользователь №: 26
Сообщений: 52
Награды: 1
Репутация: 7
Статус: оффлайн
У меня Opera... видимо я лох cry
 
вверх
Angry4178Дата: Понедельник, 12.07.2010, 16:12 | Сообщение # 8
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
$INFO$ Просьба не флудить!


 
вверх
nDiviDДата: Понедельник, 12.07.2010, 17:13 | Сообщение # 9
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
RedFox, поставь Firefox =) А если серьезно, то и в хроме норм. А в опере не стоит "ухудшение картинок" ?


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
SerjДата: Понедельник, 09.08.2010, 21:08 | Сообщение # 10
Молчун
Группа: Пользователи
Пользователь №: 152
Сообщений: 12
Награды: 0
Репутация: 0
Статус: оффлайн
nDiviD, Спасибо полезная вещь!!!
 
вверх
rybkasДата: Среда, 29.09.2010, 23:43 | Сообщение # 11
Шептун
Группа: Пользователи
Пользователь №: 22
Сообщений: 36
Награды: 0
Репутация: 0
Статус: оффлайн
Quote (nDiviD)
Теперь давайте добавим немного магии.

Мне не понятно что с этого места делать? Как бы все вставил и меню появилось но не работает - не крутится...
 
вверх
nDiviDДата: Четверг, 30.09.2010, 10:12 | Сообщение # 12
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
rybkas, правильно ли подключили джаваскрипт?


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
rybkasДата: Четверг, 30.09.2010, 21:38 | Сообщение # 13
Шептун
Группа: Пользователи
Пользователь №: 22
Сообщений: 36
Награды: 0
Репутация: 0
Статус: оффлайн
Короче подключил... Передвигается, но не прокручиваются кружочки...
,


Сообщение отредактировал rybkas - Пятница, 01.10.2010, 01:55
 
вверх
Angry4178Дата: Пятница, 01.10.2010, 18:21 | Сообщение # 14
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
$INFO$ Ссылка в спойлере битая! Истек срок хранения файлов.


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


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Забавное меню с помощью jQuery
  • Страница 1 из 1
  • 1
Поиск: