Меню в стиле Apple iMac на CSS3 | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSМеню в стиле Apple iMac на CSS3
Дата: 20.04.2013 в 11:57 | Просмотров: 5230

Меню в стиле Apple iMac на CSS3

Меню в стиле Apple iMac на CSS3
Скачатьбесплатно с сервера
Демодемонстрация

Если вы большой поклонник iMac, то это CSS меню в стиле apple специально для Вас. Сегодня мы создадим jquery меню для сайта с использованием красивых иконок. Также читайте о том, как создать красивое меню CSS3 и JQuery с выпадающими иконками в стиле Apple. В исходниках Вы можете скачать файл, в котором имеется два вида меню: верхнее и нижнее (разница в том, в направлении увеличения иконок). Это современное меню будет очень полезно и добавит Вашему сайту шик. А теперь приступим с их установки на Ваш сайт.

1. Исходный Файлы

Скачиваем исходники себе на компьютер (ссылка вверху).

2. Подключаем JavaScript и CSS

В промежутках между тегом head, добавляем следующий код:

Первая часть это JavaScript, вторая часть CSS стили, и последняя часть это PNG хак для IE 6.

3. Конфигурация

Не забудьте добавить следующий код в любом месте в пределах тега body:

4. Добавление и удаление пунктов меню

Чтобы добавить пункт меню в верхнее меню (Примечание: Тег span после тега IMG):

Чтобы добавить пункт меню в нижнее меню (Примечание: Тег span перед тегом IMG):

Совместимость с браузерами

Я испытал работу этого jQuery меню для сайта в IE 6, IE 7, Opera 9, Firefox 2 и Safari 2 (хотя есть некоторые незначительные проблемы с Safari). Надеюсь любители Apple остались довольны :) .

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://ndesign-studio.com/blog/css-dock-menu
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. вебмастер:

      а можно к .dock-container2 добавить ещё:
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;

      1. Влад Бондаренко:

        Да, или просто добавить border-radius: 10px 10px 0 0; для нижнего меню или border-radius: 0 0 10px 10px; для верхнего соответственно.

Добавить комментарий