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

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

irbees2008 irbees2008 Опубликовано - 3 - июля Меню и навигация
3096 - 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.Вот и все ,если что не понятно пишем комменты

Можешь почитать и вот эту статейку "Переменные используемые в NG"

Опрос

Ваше мнение

TWIG -что это?
Результаты

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

Теги

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

Статистика

  • Caйту: 4404 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 662
  • Онлайн всего: [3]
  • Гости: [3]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.4сек
  • Потребление памяти: 5.172 Mb 
  •   Яндекс.Метрика