Выпадающее меню © FeroDaR

Страница: 1

Сообщений 1 страница 2 из 2

Поделиться12010-05-27 10:58:10

Автор: FeroDaR
Администратор
Откуда: <br />
Зарегистрирован: 2010-05-27
Приглашений: 0
Сообщений: 249
Уважение: [+6/-0]
Позитив: [+2/-0]
Пол: Мужской
Провел на форуме:
1 день 15 часов
Последний визит:
2010-06-29 15:09:51

Моя версия. Работает на Фреймворке JQuery. Пример тут.

1. устанавливаем JQuery, cтавим в HTML-верх:

Код:

<script type="text/javascript" src="http://ferodar.narod.ru/ajax/js/jquery.js"></script>

2. Устанавливаем функцию(за подсказку спасибо mkusher'у), в HTML-низ:

Код:

<script type="text/javascript"> 
$(".menu p").click(function() {
if($(this).next('em').css('display')=='none')
  $(this).next("em").animate({opacity: "show", top: "-75", display: "none"}, "slow");
else
  $(this).next("em").animate({opacity: "hide", top: "-85", display: ""}, "fast");
});
</script>

3.Ставим CSS cтруктуру меню:

В HTML-верх.

<style type="text/css">

.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu p {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;

}
.menu li em {
background: url(http://forumupload.ru/uploads/0000/17/3d/27346-1.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
</style>

Ccылки на картинки. выпадющее окно. Можно ссылки заменить на свою картинку. Или просто колоризировать эти.

4. Ставим само меню. В любое место:

Код:

<ul class="menu"> 
            <li> 
               <p>Заголовок итады.</p> 
                <em>Текст итады.</em> 
            </li> 
           
           </ul>

<li>
<p>Текст или <*img src="ccылка на картинку"> и.т.д..".</p>
<em>Текст итады.</em>
</li>

Размножать хоть сколько.

Поделиться22010-05-27 10:58:28

Автор: FeroDaR
Администратор
Откуда: <br />
Зарегистрирован: 2010-05-27
Приглашений: 0
Сообщений: 249
Уважение: [+6/-0]
Позитив: [+2/-0]
Пол: Мужской
Провел на форуме:
1 день 15 часов
Последний визит:
2010-06-29 15:09:51

.menu li em {
background: url(http://forumupload.ru/uploads/0000/17/3d/27346-1.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

Так-же если подумать можно выпадающее окно можно изменить. Привожу пример:

.menu li em {
background: url(http://forumupload.ru/uploads/0000/17/3d/27348-2.png) repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
overflow:auto;
border:1px dashed #000000;

Выглядит так:
[реклама вместо картинки]

Теперь разберём этот код.

background: url(http://forumupload.ru/uploads/0000/17/3d/27348-2.png) repeat; - фон. http://forumupload.ru/uploads/0000/17/3d/27348-2.png - ссылка на фон.

width: 180px; - ширина окна. 180рх.

height: 45px; - высота окна. 45рх.

text-align: center; - текст по центру. также может быть вместо center - right, left .

font-style: normal; - cтиль текста.

border:1px dashed #000000; - границы. шириной 1 пиксел. чёрного цвета, цвета чередуются.

ОСТАЛЬНЫЕ ПАРАМЕТРЫ НЕ ТРОГАТЬ!

Страница: 1