Это меню использует Jquery библиотеки и компоненты из интерфейса и некоторые представленные иконки.
Оно поставляется с двумя позициями: горизонтально сверху и горизонтально снизу. Здесь я покажу вам, как реализовать ее на веб-странице.
Источник,
демо,
исходник
1. Загрузка исходных файлов
Скачать CSS меню док пакет.
2. Введение кода
В промежутке между HTML тегами <head>, добавьте следующий код
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
Первая часть Javascript, вторая часть CSS стили, а последняя часть, PNG хак для IE 6.
3. Конфигурирование
Не забудьте добавить следующий код в любом месте в пределах <body>:
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
4. Добавление, или удаление элементов
Чтобы добавить пункт меню верхнего дока (обратите внимание: SPAN теги после тега IMG):
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
Чтобы добавить пункт меню на низ дока (обратите внимание: SPAN тег до IMG тега):
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
Совместимость с браузерами
Я тестировал на IE 6, IE 7, Opera 9, Firefox 2 и Safari 2 (хотя есть некоторые незначительные вопросы, переданные с Safari).