Непугайтесь. Меню использующее шрифты с помощью 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

.slidingMenu {
    position: absolute;
    height:410px;
    width: 410px;
    top:40px;
    overflow:hidden;
    right:1px;
    font-family: Arial, Helvetica, sans-serif;
}
.slidingMenu li {
    display:block;
    float:right;
    clear:both;
    position:relative;
    overflow:hidden;
}
.slidingMenu li.move {
    width: 9px;
    height: 68px;
    right:0px;
    padding-right:10px;
    margin-top:2px;
    z-index: 8;
    position: absolute;    
    background: #2183c4;     
    background: 
        -webkit-gradient(
            linear, 
            left top, 
            left bottom, 
            from(#0771b8), 
            to(#2183c4)
        );     
    background: 
        -moz-linear-gradient(
            top, 
            #0771b8, 
            #2183c4
        );     
    -moz-border-radius: 8px 0px 0px 8px;  
    -webkit-border-top-left-radius: 8px;         
    -webkit-border-bottom-left-radius: 8px; 
    border-top-left-radius: 8px;  
    border-bottom-left-radius: 8px;        
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;    
    }
.slidingMenu li a {
    font-size:66px;
    text-transform:uppercase;
    text-decoration: none;
    color: #ddd;
    outline: none;
    text-indent:5px;
    z-index: 10;
    display: block;
    float: right;
    height: 66px;
    line-height: 66px;
    position: relative;
    overflow: hidden;
    padding-right:10px;
}
/* Descriptions */
.slidingMenuDesc{
    margin-top:40px;
    position:relative;
}
.slidingMenuDesc div{
    background: #2183c4;     
    background: 
        -webkit-gradient(
            linear, 
            left top, 
            left bottom, 
            from(#0771b8), 
            to(#2183c4)
        );     
    background: 
        -moz-linear-gradient(
            top, 
            #0771b8, 
            #2183c4
        );       
    height: 68px;
    padding-right:5px;
    left:-5px;
    width:0px;
    margin-top:2px;
    overflow:hidden;
    position:absolute;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    -moz-border-radius: 0px 8px 8px 0px;  
    -webkit-border-top-right-radius: 8px;         
    -webkit-border-bottom-right-radius: 8px; 
    border-top-right-radius: 8px;  
    border-bottom-right-radius: 8px; 
}
.slidingMenuDesc div span {
    font-size:36px;
    color: #f0f0f0;
    text-indent:5px;
    z-index: 10;
    display: block;
    height: 66px;
    line-height: 66px;
    position:absolute;
    right:10px;
    margin-left:5px;
    top:-3px;
}

javascript

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="PragmaticaCTT_400.font.js" type="text/javascript"></script>

И добавляем ниже следующий код:

$(function() {
    Cufon.replace('a, span').CSS.ready(function() {
        var $menu         = $("#slidingMenu");

        /**
        * первый пункт меню,
        * который выбран по умолчанию
        */
        var $selected    = $menu.find('li:first');

        /**
        * это абсолютный элемент,
        * который будет перемещаться по пунктам меню
        * Он будет иметь ширину выбранного элемента
        * и параметр top - расстояние до пункта над ним
        */
        var $moving        = $('<li />',{
            className    : 'move',
            top            : $selected[0].offsetTop + 'px',
            width        : $selected[0].offsetWidth + 'px'
        });

        /**
        * каждый скользящий div (с описаниями) будет иметь тот же top
        * как и соответсвующий пункт меню
        */
        $('#slidingMenuDesc > div').each(function(i){
            var $this = $(this);
            $this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
        });

        /**
        * добавляем абсолютный div к меню;
        * когда мы отводим мышь с меню
        * абсолютный div перемещается вверх (как при инициализации);
        */
        $menu.bind('mouseleave',function(){
                moveTo($selected,400);
              })
             .append($moving)
             .find('li')
             .not('.move')
             .bind('mouseenter',function(){
                var $this = $(this);
                var offsetLeft = $this.offset().left - 20;
                //slide in the description
                $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
                //move the absolute div to this item
                moveTo($this,400);
              })
              .bind('mouseleave',function(){
                var $this = $(this);
                var offsetLeft = $this.offset().left - 20;
                //slide out the description
                $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
              });;

        /**
        * двигаем абсолютный div,
        * с определенной скоростью,
        * на позицию $elem
        */
        function moveTo($elem,speed){
            $moving.stop(true).animate({
                top        : $elem[0].offsetTop + 'px',
                width    : $elem[0].offsetWidth + 'px'
            }, speed, 'easeOutExpo');
        }
    }) ;
});

СКАЧАТЬСкачек: 341
16,15 Kb
Кто скачал?

ДЕМОПосмотреть
пример