Хаки и Скрипты Next Generation CMS : Меню и навигация, Интерфейс : Меню с выпадающими подсказками

irbees2008 Опубликовано - 13 - июня Меню и навигация

Автор: --------------
Адаптировал: 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>

Можешь почитать и вот эту статейку "jQuery самый популярный javascript фрэймворк — это факт"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.