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

Меню с выпадающими подсказками

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

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

2.После того, как вы залили все файлы на сайт, вставьте между тегами

Код:
<head> </head>
этот код (не забудьте заменить ссылки на свои):
Код:
<script src="{tpl_url}/js/1_installsoft.ru.js" type="text/javascript"></script>
<script src="{tpl_url}/js/2_installsoft.ru.js" type="text/javascript"></script>

3.Затем между тэгами
Код:
<body> </body>
вставьте каркас своего меню. В коде показано меню из примера:
Код:
<ul>
<li class="home">
<p><a href="#">Главная</a></p>
<p class="subtext">Главная страница</p>
</li>
<li class="contact">
<p><a href="#">Контакты</a></p>
<p class="subtext">Контактная информация</p>
</li>
<li class="search">
<p><a href="#">Поиск</a></p>
<p class="subtext">Поиск по форуму</p>
</li>
<li class="user">
<p><a href="#">Пользователи</a></p>
<p class="subtext">Пользователи форума</p>
</li>
<li class="help">
<p><a href="#">Помощь</a></p>
<p class="subtext">Помощь по форуму</p>
</li>
</ul>

Для себя вы можете указать больше или меньше пунктов меню. На примере показано меню, состоящее из 5 пунктов (кнопок).

4.Теперь подключим стиль для оформления меню, и скрипт, который заставит кнопки меню выпадать при наведении мыши.

Код:
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#7DA1D1;
}

ul{
margin:0;
padding:0;
}

li{
width:120px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}

a{
color:#FFF;
text-decoration:none;
}

p{
padding:0px 5px;
}

.subtext{
padding-top:15px;
}

/*Menu Color Classes*/
.home{background:#74A240 url('http://installsoft.ru/images/ranks/install_getbb_ru/menu_home.png') top left no-repeat;}
.contact{background:#92292D url('http://installsoft.ru/images/ranks/install_getbb_ru/menu_contact.png') top left no-repeat;}
.search{background:#217EA9 url('http://installsoft.ru/images/ranks/install_getbb_ru/menu_search.png') top left no-repeat;}
.user{background:#A89314 url('http://installsoft.ru/images/ranks/install_getbb_ru/menu_user.png') top left no-repeat;}
.help{background:#4CB0A4 url('http://installsoft.ru/images/ranks/install_getbb_ru/menu_help.png') top left no-repeat;}
Код:
<script>
$(document).ready(function(){

//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

});
</script>

Можешь почитать и вот эту статейку "Будем фиксировать менюшку "

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

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

Теги

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

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [13]
  • Гости: [13]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.339сек
  • Потребление памяти: 5.286 Mb 
  •   Яндекс.Метрика