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

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

irbees2008 irbees2008 Опубликовано - 13 - июня Меню и навигация
2777 - 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
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.556сек
  • Потребление памяти: 6.444 Mb 
  •   Яндекс.Метрика