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

ovisopa · 16.12.2007, 12:52

WOW .. this is so very nice .

10x for sharing guys

fircxo · 02.01.2008, 01:51

такое на ajax -е тоже ест

lazareva · 04.01.2008, 13:37

Прикольно!

sergey10 · 18.02.2008, 16:02

Что-то я так и не смог понять - на что это будет походить? Что такое Мак?

Leila80 · 22.02.2008, 11:57

Очень прикольное меню.
Спасибо.

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

16.12.2007, 12:52	#2
ovisopa Неактивный пользователь Регистрация: 05.12.2007 Сообщений: 1 Репутация: 0	Ответ: CSS Dock Menu WOW .. this is so very nice . 10x for sharing guys

02.01.2008, 01:51	#3
fircxo Неактивный пользователь Регистрация: 13.11.2007 Сообщений: 3 Репутация: 0	Ответ: CSS Dock Menu такое на ajax -е тоже ест

04.01.2008, 13:37	#4
lazareva Неактивный пользователь Пол: Регистрация: 24.09.2006 Сообщений: 3 Репутация: 0	Ответ: CSS Dock Menu Прикольно!

18.02.2008, 16:02	#5
sergey10 Неактивный пользователь Регистрация: 18.02.2008 Сообщений: 7 Репутация: 0	Ответ: CSS Dock Menu Что-то я так и не смог понять - на что это будет походить? Что такое Мак?

22.02.2008, 11:57	#6
Leila80 Неактивный пользователь Регистрация: 20.02.2008 Сообщений: 4 Репутация: 0	Ответ: CSS Dock Menu Очень прикольное меню. Спасибо.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Иконки для 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