Создание меню с помощью jQuery

Данное меню интересно несколькими характеристиками:

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".

Источник: http://www.ilovecolors.com.ar

Категория: Вебмастеру | Просмотров: 899 | Добавил: smiley | Рейтинг: 0.0/0

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

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