Меню Apple Macintosh на CSS с использованием JQuery
Меню Apple Macintosh на CSS с использованием JQuery

Если Вы большой поклонник Apple Macintosh, то данное меню должно обязательно Вам понравиться. Данное меню использует библиотеки JQuery и в нем можно использовать иконки вместо простых ссылок. Это меню может позиционироваться как сверху страницы, так и снизу на Ваше усмотрение.

Сейчас я покажу Вам как отобразить данное меню на web-странице. Следуем по пунктам ниже и все получится.

Исходники

Скачать полный пакет для установки данного меню вы можете в конце этого урока, так же посмотреть пример отображения и работоспособности его в реальности.

Подключаем скрипты

В HTML код страницы между тегами HEAD добавьте следующий код:

Показать код


Подключаем CSS стили

В тоже место, где подключаем скрипты добавляем строку для подключения CSS стилей:

Показать код

Основной HTML код меню

После тега BODY добавляем следующий HTML код, который и будет отвечать за отображение нашего меню.

Для отображения меню вверху страницы:

Показать код

Для отображения меню внизу страницы:

Показать код

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

Показать код

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

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

Показать код

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

Показать код

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

Проверено на Opera 9, Firefox 2 и Safari 2 (хотя есть некоторые незначительные проблемы рендеринга с Safari).

Ну вот собственно и все, вроде бы ничего не забыл, теперь Вы с легкостью сможете вставить данное меню к себе на сайт без всяких усилий.

Желаю удачи.