Создание меню с помощью jQuery - 29 Сентября 2009 - Информационный портал www.zamorochka2009.clan.su

1) Оно занимает очень мало места в неактивном состоянии. После наведения на него мышкой выбраный элемент увеличивает свой размер.
2) Иконки элементов меню при наведении меняются.
3) Кликабельным является не только текст ссылки, но полностью весь блок.

Установка:

1) Ставим этот код после <body> на той странице где вы хотите видеть это меню:

Code

<ul id="iconbar">
<li><a href="#">
<img src="menu/key.gif" alt="" />

<span>Change your password</span>
</a></li>
<li><a href="#" target="_blank">
<img src="menu/rss.gif" alt="" />
<span>Suscribe to our RSS!</span>
</a></li>
<li><a href="#">
<img src="menu/sel.gif" alt="" />
<span>Choose your options!</span>
</a></li>
</ul>

2) Теперь ставим этот код в CSS. В этом коде нужно будет изменить месторасположение данного меню (я выделил эти мета):

Quote

body { background: #ffffff; font: 11px "Trebuchet MS", Verdana, Arial, sans-serif; }
p { padding-bottom:10px; position:absolute; left:47%; bottom:5px; }
p a { text-decoration: none; outline: none; color:#d00000; }
p a:hover { border-bottom: 2px dotted #d00000; }
#iconbar { position:absolute; top:45%; left:45%; text-shadow:0 1px 0 #eee;}
#iconbar li {
float:left;
position:relative;
margin-right:20px;
background:#e8e8f9;
border: 1px dashed #ffc0ff;
overflow:hidden;
}
#iconbar a {
text-decoration: none;
outline: none;
color:#d00000;
display: block;
width: 24px;
padding: 10px;
cursor:pointer;
}
#iconbar span {
width: 100px;
height: 35px;
position: absolute;
display: none;
line-height:110%;
color:#409BED;
padding-left: 10px;
}

/*Copyright © 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.2*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}

3) Теперь на тех страницах где у Вас будет меню между <head> и </head> ставим этот код:

Code

Показать выделенный код в новом окне

4) Теперь качаем этот архив, создаём в "Файловом менеджере" папку menu и загружаем туда все файлы из архива:
Скачать архив вес(22.5кб)

Готово!

Примечание:
Для правильного функционирования скрипта также необходимо, чтобы иконки при неактивном и активном состоянии имели почти одинаковые имена. Единственная разница состоит в "o" на конце. Т.е. есль основная иконка имеет имя "key.gif", тогда при активном состоянии должна использоваться "keyo.gif".

Категория: Скрипты Ucoz | Просмотров: 1756 | Добавил: jmbo | Теги: Создание меню с помощью jQuery, Скрипты | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Сегодня в архив добавлено:

Автораздача ICQ

Каждый день в 14.00

Номер и пароль:
Ждите 14.00

Не успел взять ICQ номерок?
Каждый день здесь появляется новый номер ICQ.

Комментариев: 1414
Форум: 72/478
Обои для раб.стола: 2973
Новости: 1547
Загрузки: 41
Publisher: 132
Директории: 7
Доска объявлений: 8
Игры: 217
Гостевая книга: 297
Тесты: 55