ВСЕ скрипты и шаблоны для меню теперь здесь
Выезжающее меню с помощью jQuery
Красивое горизонтальное меню с выезжающими описаниями разделов.Демо:
[html]<!-- меню -->
<br /><br />
<div class="con_2">
<div class="con_1">
<ul id="menu">
<li> <a href="http://forumd.ru/viewtopic.php?id=1790"> <em class="icon_about"></em> <span class="title">О нас</span> <span class="description"> История проекта и принципы нашей работы </span> </a> </li>
<li> <a href="http://forumd.ru/viewforum.php?id=27"> <em class="icon_work"></em> <span class="title">Работы</span> <span class="description"> Наше портфолио - лучшие работы дизайнеров </span> </a> </li>
<li> <a href="http://forumd.ru/viewforum.php?id=75"> <em class="icon_help"></em> <span class="title">Помощь</span> <span class="description"> Задайте здесь свой вопрос </span> </a> </li>
</ul>
</div>
</div>
<!-- стиль -->
<style><!--
.con_1 {
background-color: #FFFFFF;
border: 3px solid #FFFFFF;
border-radius: 0 0 20px 20px;
box-shadow: 1px 1px 6px #000000;
height: 130px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 900px;
}
ul#menu {
bottom: 0;
color: #999999;
font-family: Helvetica,Arial,sans-serif;
font-size: 36px;
font-weight: bold;
left: 20px;
letter-spacing: -2px;
list-style: none outside none;
position: absolute;
}
ul#menu li {
float: left;
margin: 0 10px 0 0;
}
ul#menu a {
bottom: -95px;
cursor: pointer;
float: left;
line-height: 20px;
position: relative;
width: 210px;
color: #000000;
text-decoration: none;
}
ul#menu a:hover {
color: #000000;
text-decoration: none;
}
ul#menu a:hover span.description{
background-color:#54504F;
}
ul#menu a:hover span.title{
color:#54504F;
}
.icon_about {
background: url("http://forumupload.ru/uploads/0007/e3/f7/56375-4.png") no-repeat scroll left top transparent;
}
.icon_work {
background: url("http://forumupload.ru/uploads/0007/e3/f7/56375-2.png") no-repeat scroll left top transparent;
}
.icon_help {
background: url("http://forumupload.ru/uploads/0007/e3/f7/56375-3.png") no-repeat scroll left top transparent;
}
.icon_ban {
background: url("http://forumupload.ru/uploads/0007/e3/f7/56671-1.png") no-repeat scroll left top transparent;
}.icon_about, .icon_work, .icon_help, .icon_ban {
display: block;
height: 48px;
left: 165px;
position: absolute;
top: 50px;
width: 48px;
}
ul#menu span.title {
color: #B7B7B6;
display: block;
height: 26px;
text-indent: 10px;
text-shadow: 1px 1px 1px #000000;
}
ul#menu span.description {
background-color: #B7B7B6;
border: 3px solid #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 6px #000000;
color: #FFFFFF;
display: block;
font-size: 20px;
height: 80px;
padding: 10px;
width: 140px;
}
--></style>
</p>
<!-- скрипт -->
<p>
<script type="text/javascript" src="http://sadhaka.moy.su/ForumDesign/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>
[/html]Платформа: любая
Разметка
красное - ссылка на страницу
синее - заголовок пункта
зеленое - описание пунктадля добавления еще одного пункта, необходимо копировать следующее:
Красным отмечен класс иконки. Он должен быть уникальным, отличающимся от других пунктов. Подойдет любое буквосочетание на английском языке: например, icon_1, icon_search, moya_ikonka и т.п.
Затем, мы перейдем к css и загрузим в стиль иконки, которые будут соответствовать этим классам.Классы "title" и "description" (отмечено синим) оставьте одинаковыми для всех пунктов. Они будут отвечать за то, чтобы заголовки и описания (соответственно) имели одинаковый стиль.
CSS
Контейнер
красное - фон контейнера.
синее - границы контейнера, где "3px" - это ширина границы, "solid" - это ее стиль (а можно сделать другого, например: dotted - точечками, dashed - пунктиром, double - двойной рамкой и т.п.), "#FFFFFF" - это ее цвет.
зеленое - это высота контейнера в пикселях (учитывайте, что сверху должно оставаться место для выезжающих описаний)
розовое - это ширина контейнера в пикселях
салатовое - это закругление контейнера и теньМеню
красное - цвет шрифта
синее - семейство шрифта. (то бишь сам шрифт. идет в виде перечисления шрифтов в порядке приоритета: если у пользователя не установлен первый шрифт, то он увидит второй, если нет второго - третий и т.п.)
зеленое - размер шрифта
розовое - делает текст жирным
бордовое - отступ слева
салатовое- отступ букв друг от другаИконки
Сначала идет перечисление классов иконок с целью задать для них общие свойства:
Красное - ширина и высота (width - ширина, height - высота)
Синее - отступ влево
Зеленое - отступ сверхуЗатем, идут индивидуальные свойства каждой иконки, а именно - картинки (отмечено розовым). Указываем ссылки на наши иконки в соответствии с их классами.
Если вы добавляли свои пункты меню, то не забудьте дописать дополнительную иконку в стиль:
Заголовки
красное - цвет текста заголовков
синее - высота заголовков
зеленое - задает отступ слева
розовое - тень заголовковТекст заголовков
красное - выравнивание (left - слева, right- справа, center - по центру)
синее - отступыСсылки
Описание
красное - цвет фона
синее - границы (рамка)
зеленое - цвет текста
розовое - размер шрифта
бордовое - расстояние, на которое будет "торчать" выезжающий контейнер с описанием
темко-красное - высота и ширина
салатовое - закругление границ и теньИзменения при наведении курсора
красное - цвет фона описания
синее - цвет текста заголовкавы можете придумать что-нибудь свое. достаточно просто дописать селектор (класс) в код:
или можно задать свой стиль для предложенных селекторов: "span.description" - это описание, "span.title" - это заголовок
Javascript
Скрипт, который осуществляет "выезд" элемента ссылки и иконки при наведении мышки:
ставить в html-низ
и подключаем jQuery (html-верх)
