Главная > Script > CSS меню в Mac стиле

CSS меню в Mac стиле

CSS меню

Сегодня я опишу скрипт, создающий эффект Mac меню для вашего сайта или блога. Этот скрипт использует JavaScript библиотеку jQuery. Для начала посмотрите как это работает: Demo

1. Скачайте исходные файлы

2. Между тегами добавляем следующий код:

<script src="js/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="js/interface.js" type="text/javascript"><!--mce:1--></script>
 
<!--[if lt IE 7]>
<mce:style type="text/css"><!
.dock img { behavior: url(iepngfix.htc) }
-->

Сейчас мы вставили ссылки на JavaScript библиотеки , ссылку на CSS файл стилей и хак для IE6 для корректного отображения PNG файлов.

3. Теперь добавляем в тело нашей страницы следующий код:

<script type="text/javascript"><!--mce:2--></script>

4. Чтобы добавить пункт в верхнее или нижнее менб вставляем следующее:
Верхнее меню:

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Нижнее меню:

<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

rating_on CSS меню в Mac стилеrating_on CSS меню в Mac стилеrating_on CSS меню в Mac стилеrating_on CSS меню в Mac стилеrating_half CSS меню в Mac стиле (9 средний показатель: 4.89 вне 5)
Загрузка ... Загрузка ...

Script ,

  1. Июнь 3rd, 2009 at 13:21 | #1

    украл статью и не поморщился, источник на западный блог кто за тебя подписывать будет? мм?

  2. Eugen
    Сентябрь 11th, 2009 at 19:36 | #2

    Какая разница урал – не украл… Главное, чтоб полезно было.

  3. Z
    Июнь 5th, 2010 at 20:28 | #3

    Хочу предложить вариант меню без картинок, только ксс, но без поддержки ИЕ
    http://webdevel.pp.ua/archives/36

  1. Трэкбеков пока нет.
FOREX MMCIS group