Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 21:30
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 13
Гостей: 12
Пользователей: 1
MaDaRa



Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

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

Создание меню с помощью 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
<script type="text/javascript" src="menu/jquery.js"></script>
<script type="text/javascript" src="menu/general.js"></script>

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

Готово!

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

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 1814 | Комментарии: 2 | Рейтинг: 5.0/1 | |Категория: Скрипты блоки и шапки | Добавил: mdbaner | Дата: 30.08.2009 | Скачали: 0
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 2
1 tolyan15   Дата: 28.09.2009  Время: 17:37   [№ 823]
Демку посмотреть где нибудь можно?
И вообще пора бы все материалы выкладывать с демками, чтоб можно было посмотреть прежде чем устанавливать на свой сайт.

2 mdbaner   Дата: 28.09.2009  Время: 19:03   1 [№ 825]
согласен,но для демок на все новости нужно много ресурсов


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

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Продажа рекламные мест ...

2

2 Файловик. Уникальные те...

0

3 Куплю сайты в индексе Я...

1

4 Куплю сайты с ТИЦ/PR (п...

9

5 Предлагаю услуги для ан...

0

6 Предлагаю услуги по про...

0

7 Комплексный прогон сайт...

51

8 Сайт онлайн фильмов на ...

1

9 Проблема с таблицей

9

10 Отредактировать фото

2


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru