Архив блога Веб-дизайн, seo оптимизация сайта и комплексное продвижение сайта :: BlogБука

Сообщения с тегами ‘Script’

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

30th Ноябрь, 2008

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 ,