Добро Пожаловать на сайт Clana C.S.R.IP Role Play: 46.174.48.27:27275 IP DM: 212.76.130.197:27281

Главная Файлы Форум Чат Новости Регистрация Вход

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Всё для Ucoz » Меню для Ucoz » Выезжающее меню с помощью jQuery (Выезжающее меню с помощью jQuery)
Выезжающее меню с помощью jQuery
PriboyДата: Пятница, 22.06.2012, 13:25 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 142
Награды: 1
Репутация: 953
Статус:


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

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

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

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

Разметка

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

[green]<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>[/green]

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

CSS

Давайте начнем с стилей окружающего контейнера. Контейнер будет иметь относительное положение, так как само меню - абсолютное. Нам необходимо будет спрятать часть с описанием с помощью overflow:hidden.
[green]
.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;
}

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

[green].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;
}

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

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


[green].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;
}
[/green]

CSS для названия и описания имеют такой вид

[green]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;
}

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

[green]ul#menu a:hover span.description{
background-color:#54504F;
}
ul#menu a:hover span.title{
color:#54504F;
}
[/green]

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

Javascript

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

[green]$(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);
}
);
});

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

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

[green]Скачать[/green]


 
Форум » Всё для Ucoz » Меню для Ucoz » Выезжающее меню с помощью jQuery (Выезжающее меню с помощью jQuery)
Страница 1 из 11
Поиск:

Мини-чат
200
Облако тегов
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
  • Shock-World (0)
  • hi (0)
  • КВ (2)
  • Скрипт вид фотографий Под ЗП (2)
  • Новая лига RUSHCENS.RU (0)
  • Круглое меню на CSS (0)
  • Крутая Менюшка для тёмных дизайнов для Ucoz (0)
  • Горизонтальное меню для uCoz на тему Windows (0)
  • Темное горизонтальное меню с подкатегориями (0)
  • Мега панель (0)
  • заявка в вступление в клан (3)
  • банерообмен (3)
  • КВ (2)
  • Скрипт вид фотографий Под ЗП (2)
  • Цветные шкурки с зонами пробития (1)
  • Arhangel (1)
  • Заявки на дружбу (1)
  • Правила cw (1)
  • JorDaN_____/-5k/ (1)
  • Вступление в клан! SorrY :D (1)
  • Priboy
  • KReeD
  • hrushkaaaaa
  • Кл
  • vlad
  • DEX
  • levarub
  • [Limper]
  • БАБУСЯ
  • John_doe
  • li-wong-sho12:16
    forbetalzzz212:07
    shakirovazat7223:09
    shramogin1515:59
    yrakhorev9615:05
    snapkovsasha17:56
    rayxxs17:33
    strike177rus04:27
    temawild9917:26
    Snap18:49


    Clan.::[C.[S].R.]::. © 2017

    CSR-TEAM