Домой / Для сайта / Выкатывающееся закругленное меню
Выкатывающееся закругленное меню

Выкатывающееся закругленное меню

В этом уроке мы будем использовать невероятно удивительные вращения и масштабирования JQuery на основе патча от Захари Джонсона.

Мы создадим меню с небольшими значками, которые будут чередоваться при наведении. Кроме того, мы сделаем пункты меню с ссылками и окном поиска.

Демо Скачать исходники

Итак, давайте начнем, это проще, чем кажется.

Разметка

Для этого меню мы не будем создавать список, но создадим div элементы для каждого пункта меню. Мы поместим пункты меню в главном div и назовем его menu.

<div class="menu">
    <div class="item">
        <a class="link icon_mail"></a>
        <div class="item_content">
            <h2>Contact us</h2>
            <p>
                <a href="#">eMail</a>
                <a href="#">Twitter</a>
                <a href="#">Facebook</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_help"></a>
        <div class="item_content">
            <h2>Help</h2>
            <p>
                <a href="#">FAQ</a>
                <a href="#">Live Support</a>
                <a href="#">Tickets</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_find"></a>
        <div class="item_content">
            <h2>Search</h2>
            <p>
                <input type="text"></input>
                <a href="">Go</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_photos"></a>
        <div class="item_content">
            <h2>Image Gallery</h2>
            <p>
                <a href="#">Categories</a>
                <a href="#">Archives</a>
                <a href="#">Featured</a>
            </p>
        </div>
    </div>
    <div class="item">
        <a class="link icon_home"></a>
        <div class="item_content">
            <h2>Start from here</h2>
            <p>
                <a href="#">Services</a>
                <a href="#">Portfolio</a>
                <a href="#">Pricing</a>
            </p>
        </div>
    </div>
</div>

CSS

Общий стиль для меню и шрифта будет определяться следующим образом:

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}

Элементам внутри меню назначим float:right;, так как мы хотим что бы эти элементы расширялись влево и толкали другой элемент противоположно:

.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

Далее мы определяем стили значков (ссылки классов) следующим образом:

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/photos.png) no-repeat top left;
}

Остальным элементам контента мы запишем следующие стили:

.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

С белым эффектом тени мы можем создать красивый выгравированный эффект текста.
Хорошо, а теперь давайте добавим немного магии.

JavaScript

Во-первых, нам нужно добавить сценарий включения JQuery и два других сценария от Захари.
Для этого мы добавим следующие функции:

$('.item').hover(
    function(){
        var $this = $(this);
        expand($this);
    },
    function(){
        var $this = $(this);
        collapse($this);
    }
);
function expand($elem){
    var angle = 0;
    var t = setInterval(function () {
        if(angle == 1440){
            clearInterval(t);
            return;
        }
        angle += 40;
        $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
    },10);
    $elem.stop().animate({width:'268px'}, 1000)
    .find('.item_content').fadeIn(400,function(){
        $(this).find('p').stop(true,true).fadeIn(600);
    });
}
function collapse($elem){
    var angle = 1440;
    var t = setInterval(function () {
        if(angle == 0){
            clearInterval(t);
            return;
        }
        angle -= 40;
        $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
    },10);
    $elem.stop().animate({width:'52px'}, 1000)
    .find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

Чтобы облегчить задачу, мы создали две функции, одна для расширения элемента и одна для его сворачивания. Функция расширения заставляет значок меню повернуться 4 раза вокруг себя. Мы также сделали функцию для анимированного увеличение его ширины. Затем мы позволили появиться содержанию, сначала раздел, а затем подпункты.
Функция collapse будет вращаться значок назад, уменьшая ширину элемента и заставляет содержимое исчезать.
Я надеюсь, что вам понравилось!

Источник урока:

http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery


В этом уроке мы будем использовать невероятно удивительные вращения и масштабирования JQuery на основе патча от Захари Джонсона. Мы создадим меню с небольшими значками, которые будут чередоваться при наведении. Кроме того, мы сделаем пункты меню с ссылками и окном поиска. Итак, давайте начнем, это проще, чем кажется. Разметка Для этого меню мы не будем создавать список, но создадим div элементы для каждого пункта меню. Мы поместим пункты меню в главном div и назовем его menu. &lt;div class=&quot;menu&quot;&gt; &lt;div class=&quot;item&quot;&gt; &lt;a class=&quot;link icon_mail&quot;&gt;&lt;/a&gt; &lt;div class=&quot;item_content&quot;&gt; &lt;h2&gt;Contact us&lt;/h2&gt; &lt;p&gt; &lt;a href=&quot;#&quot;&gt;eMail&lt;/a&gt; &lt;a&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.9 ( 1 голосов )
99

4 комментария

  1. Евгений Ефимов

    Это всё понятно, а куда исходники заливать?
    Хорошо бы было, если бы вы разместили видеоурок по заливке меню на сайт.

  2. В какой файл нужно вставлять код html, если сайт на вордпресс? Файл со стилями должен быть отдельным или стили можно скопировать в общий файл stye.css?

Оставить комментарий

Ваш email не будет опубликован.

*