Хаки и Скрипты Next Generation CMS

Выскальзывающие пункты меню на jQuery

irbees2008 irbees2008 Опубликовано - 3 - июля Меню и навигация
3251 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

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

Код:
<div class="container">
<ul id="menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">Выход</span>
<span class="description">Learn about us and our services</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Работы</span>
<span class="description">See our work and portfolio</span>
</a>
</li>
<li>
<a>
<i class="icon_help"></i>
<span class="title">Помощь</span>
<span class="description">Talk to our support</span>
</a>
</li>
<li>
<a>
<i class="icon_search"></i>
<span class="title">Поиск</span>
<span class="description">Поиск по сайту</span>
</a>
</li>
</ul>
</div>
3.В файл стилей добавляем стили для меню
Код:
.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;
}
ul#menu{
list-style:none;
position:absolute;
bottom:0px;
left:20px;
font-size:36px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:#999;
letter-spacing:-2px;
}
ul#menu li{
float:left;
margin:0px 10px 0px 0px;
}
ul#menu a{
cursor:pointer;
position:relative;
float:left;
bottom:-95px;
line-height:20px;
width:210px;
}
.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;
}
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;
}
ul#menu a:hover span.description{
background-color:#54504F;
}
ul#menu a:hover span.title{
color:#54504F;
}
4.В хеад подключаем jQuery( если уже подключено то второй раз подключать не надо) и подключаем скрипт самого меню
Код:
<script type="text/javascript" src="{{ tpl_url }}/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(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);
}
);
});
</script>
5.Вот и все ,если что не понятно пишем комменты

Можешь почитать и вот эту статейку "Красивый слайдер на флеш анимации"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Обновленное

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4736 дней
  • Новостей: 603
  • Комменты: 257
  • Зарегистрированно : 703
  • Онлайн всего: [13]
  • Гости: [11]
  • Поисковики: [2] Google, Яндекс
  • Были сегодня : [3] Google, irbees2008, Яндекс
  • SQL запросов: 35
  • Генерация страницы: 0.35сек
  • Потребление памяти: 5.525 Mb 
  •   Яндекс.Метрика