Основное меню

Создание плавающего меню на jQuery

Первым делом для создания такого меню, потребуется HTML-каркас. Встраиваем в каркас DIV-блок с заданным классом и идентификатором:

<div class="dock" id="dock"></div>

В выше приведенный блок вставляем еще один блок и получаем следующее:

<div class="dock" id="dock">
<div class="dock-container"></div>
</div>

Теперь в этот двойной DIV-блок разместим структуру ссылок нашего меню:

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="" alt="Главная">
<img src="images/home.png" alt="Главная"><span class="main"> Главная</span>
</a>
<a class="dock-item" href="" alt="Музыка">
<img src="images/music.png" alt="Музыка"><span class="text">Музыка</span>
</a>
<a class="dock-item" href="" alt="Игры">
<img src="images/games.png" alt="Игры"><span>Игры</span>
</a>
<a class="dock-item" href="" alt="Книги">
<img src="images/book.png" alt="Книги"><span>Книги</span>
</a>
<a class="dock-item" href="" alt="Программы">
<img src="images/programm.png" alt="Программы"><span>Программы</span>
</a>
<a class="dock-item" href="" alt="Изображения">
<img src="images/images.png" alt="Изображения"><span>Изображения</span>
</a>
</div>
 </div>

Чтобы оживить меню, для него нужно подключить библиотеки jQuery и скрипт отвечающий за выплывание каждого элемента:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

Далее, ниже подключенных скриптов добавляем настройки, необходимые для работы меню:

<script type="text/javascript">
$(document).ready(
function() {
$('#dock').Fisheye(
{
maxWidth: 25, <!-- ширина увеличения изображения при наведении -->
items:'a', <!-- используемый элемент меню тег <a> -->
itemsText:'span', <!-- информация, используемая для подписи тег <span> -->
container:'.dock-container', <!-- блок в котором находится меню -->
itemWidth: 60, <!-- изначальная ширина каждого изображения до увеличения -->
proximity: 80, <!-- на сколько разъезжается меню по сторонам -->
halign :'center' <!-- расположение меню, возможные варианты расположения: left | center | right -->
}
)
}
);
</script>

Каждый параметр в настройках прокомментирован, так что разобраться будет не сложно. И последний шаг, это придание красивого внешнего вида, то есть одеваем одежду на наше меню, прописываем CSS-стили:

.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #CC6600;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
color: #000;
}

На этом создание плавающего меню на jQuery окончено. Исходные файлы в архиве ниже.

Скачать файл
размер файла: 139,44 Kb
cкачиваний: 154

Раздел: Статьи для веб-мастера

Держи ссылку на плод черного дерева rasteniy.net.


Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.