Studio AD : Анимированое навигационное меню

Страница 1 из 1
1

Анимированое навигационное меню

Skarul

Дата: Понедельник, 02.11.2009, 10:18 | Сообщение # 1

молчун

Группа: Пользователи

Пользователь №: 219

Сообщений: 17

Карма: 1

Замечания: 0%

Как я проверял некоторые Flash сайты для вдохновения, я побежал через пару веб-сайты, что были некоторые интересные эффекты, навигации. Я не являюсь большим фанатом дико анимированный Navs, но это были простые и элегантные пролонгировать эффект, что мне понравилось. Я решил для имитации эффекта с CSS и JQuery, и хотел бы поделиться этой техники сегодня.

Шаг 1 : Черно-белые - HTML
Эта часть очень проста. Типичный неупорядоченный список со ссылками.

Code

<ul id="topnav">
     <li><a href="#">Home</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
</ul>

Шаг 2 : Стайлинг - CSS
Только специальная вещь о свойствах ниже будет то, что каждый элемент списка имеет переполнение скрытой подражать маскировки техники. Отъезд на изображении ниже, чтобы увидеть то, что я имею в виду.

О нас не было дубликатов <span> тегов в разметке в шаге 1. Мы будем добавив, что позднее с несколькими линиями Jquery.

Code

ul#topnav {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font-size: 1.1em;
}
ul#topnav li{
  margin: 0;
  padding: 0;
  overflow: hidden;  /*--Important - Masking out the hover state by default--*/
  float: left;
  height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
  padding: 10px 20px;
  float: left;
  text-decoration: none;
  color: #fff;
  background: url(a_bg.gif) repeat-x;
  text-transform: uppercase;
  clear: both;
  width: 100%;
  height: 20px;
  line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
  color: #555;
  background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
  background-position: left top;
}

Прикрепления: 6705818.gif (11.8 Kb) · 1944568.gif (9.5 Kb)

В этом вашем интернете хрен поймешь, кто прикалывается, а кто реально дебил.

Skarul

Дата: Понедельник, 02.11.2009, 10:23 | Сообщение # 2

молчун

Группа: Пользователи

Пользователь №: 219

Сообщений: 17

Карма: 1

Замечания: 0%

Шаг 3 : Анимация - Jquery
Для тех, кто не знаком с JQuery, заходите на их сайт и получить первый обзор того, как она работает. Я разделял несколько трюков, которые я подобрал по [/c]дороге, вы можете проверить эти вне также.
Первый шаг - вызов файла Jquery
Вы можете скачать файл с JQuery сайта, или вы можете использовать это одно размещение на Google.

Code

Как вы можете видеть ниже, мы дублирования span тегов, то их анимации-40px к началу переложить навигации.

Следующий сценарий содержит комментарии, объясняющие, какие действия Jquery подготовительные работы.

Code

$(document).ready(function() {

  $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

  $("#topnav li").each(function() { //For each list item...
   var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
   $(this).find("span").show().html(linkText); //Add the text in the <span> tag
  });

  $("#topnav li").hover(function() {    //On hover...
   $(this).find("span").stop().animate({
    marginTop: "-40" //Find the <span> tag and move it up 40 pixels
   }, 250);
  } , function() { //On hover out...
   $(this).find("span").stop().animate({
    marginTop: "0"  //Move the <span> back to its original state (0px)
   }, 250);
  });

});

Ну вот что получилось

Автор: Sohtanaka
Перевод: skarul (XylustaR)

Прикрепления: 6401483.gif (13.2 Kb) · 4949203.gif (11.8 Kb)

В этом вашем интернете хрен поймешь, кто прикалывается, а кто реально дебил.

Анимированое навигационное меню

Страница 1 из 1
1