1 600 Скрипты / Menu & Nav

Улетное куфонизированное меню


Непугайтесь. Меню использующее шрифты с помощью cufon-yui.js, но с очень классным уплывающим (улетающим) эффектом на всю страницу.

HTML

Создадим ненумерованный список и DIV-ы для описания пунктов меню.

<div id="slidingMenuDesc" class="slidingMenuDesc">
    <div><span>Вся наша история.</span></div>
    <div><span>Посмотрите наше портфолио и сделайте свой выбор.</span></div>
    <div><span>Нам нужны именно Вы, пишите.</span></div>
    <div><span>Свяжитесь с нами и мы не подведем. </span></div>
    <div><span>На форуме мы ответим на любые ваши вопросы. </span></div>
</div>
<ul id="slidingMenu" class="slidingMenu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Работы</a></li>
    <li><a href="#">Вакансии</a></li>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">Форум</a></li>
</ul>
Пункт - Главная - не будет иметь описания.

CSS

JS

В шапке подключаем jQuery, easing (для эффектов) и скрипт cufon генерирующий наш кириллический шрифт PragmaticaCTT

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="jquery.easing.1.3.js" type="text/jаvascript"></script>
<script src="cufon-yui.js" type="text/jаvascript"></script>
<script src="PragmaticaCTT_400.font.js" type="text/jаvascript"></script>
И добавляем ниже следующий код:
Скачать 454Загрузок 16,15 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи