CSS Dock Menu

mikkey · 25.10.2007, 20:35

Если ты большой фанат Маков, тебе точно понравится это CSS Меню. Оно использует библиотеку Jquery Javascrip и компонент Fisheye от Interface, ну и некоторые из моих иконок. Меню можно сделать как либо снизу страницы, либо сверху, так и там и там сразу.
Ниже я расскажу как сделать такое меню на своей странице.

--- Демо ---

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

Сайт автора: N.Design Studio
Перевод: mikkey

25.10.2007, 20:35	#1
mikkey Неактивный пользователь Регистрация: 27.07.2007 Сообщений: 15 Репутация: 48	CSS Dock Menu Если ты большой фанат Маков, тебе точно понравится это CSS Меню. Оно использует библиотеку Jquery Javascrip и компонент Fisheye от Interface, ну и некоторые из моих иконок. Меню можно сделать как либо снизу страницы, либо сверху, так и там и там сразу. Ниже я расскажу как сделать такое меню на своей странице. --- Демо --- 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). Сайт автора: N.Design Studio Перевод: mikkey

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Иконки для Dock-ов	Liandri	Иконки и Курсоры/Icons & Cursors	19	19.12.2012 09:25
Rocket Dock	sever	Украшательства для программ/Soft Skining	13	17.06.2012 12:08
Object Dock Plus	Baby©	Stardock и все о нём	76	15.04.2012 21:25
dock в леопарде..	deny_petr	Mac Os X	5	01.04.2010 01:56