html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создание необычного выезжающего меню с использованием jQuery

В этом уроке мы создадим необычное выезжающее снизу меню. У пунктов этого большого меню будет название и описание. Оно будет выезжать снизу, открывая описание и уменьшенное изображение. Мы будем использовать свойства CSS3 для интересных эффектов тени и jQuery для взаимодействия. 

 

 


Демонстрация работыСкачать исходный код

Набор уменьшенных изображений Luna Grey можно скачать с сайта DryIcons.

Мы не можем предоставить их вместе с исходным кодом, но мы не меняли их названия, так что вы легко сможете их использовать.

Давайте начнем с разметки.

Разметка

Меню будет находиться в контейнере. Оно будет состоять из ненумерованного списка с элементами ссылок внутри. Элементы ссылок будут содержать два тега span: один для названия и второй для описания. У нас также будет элемент для уменьшенного изображения:

<div class="container">
    <ul id="menu">
        <li>
            <a>
                <i class="icon_about"></i>
                <span class="title">About</span>
                <span class="description">
                    Learn about us and our services
                </span>
            </a>
        </li>
         <li>
            <a>
                <i class="icon_work"></i>
                <span class="title">Work</span>
                <span class="description">
                    See our work and portfolio
                </span>
            </a>
        </li>
        <li>
            <a>
                <i class="icon_help"></i>
                <span class="title">Help</span>
                <span class="description">
                    Talk to our support
                </span>
            </a>
        </li>
         <li>
            <a>
                <i class="icon_search"></i>
                <span class="title">Search</span>
                <span class="description">
                    Search our website
                </span>
            </a>
        </li>
    </ul>
</div>

Не забудьте приспособить элемент ссылки, добавить адрес ссылки в параметр href по необходимости.

CSS 

Давайте начнем со стилей окружающего блока. У него будет относительное позиционирование, так как у меню будет абсолютное позиционирование. Нам придется спрятать часть, содержащую описание, у элементов меню, для этого мы спрячем все переполнение блока. Если Вы поместите это меню с абсолютным позиционированием на страницу, например, снизу, часть с описанием просто исчезнет за краем окна. Этот блок позволит Вам увидеть, как реализовать это меню, относительно спозиционированное к некоторым другим элементам:

.container{
    width:900px;
    height:130px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    border:3px solid #fff;
    background-color:#fff;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    -moz-border-radius:0px 0px 20px 20px;
    -webkit-border-bottom-left-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    border-radius:0px 0px 20px 20px;
}

Мы создадим милые тени и закругленные границы с помощью свойств CSS3. Не забывайте, что они будут работать только в современных браузерах, в основном во всех, кроме браузера Internet Explorer. У списка будет такой стиль:

ul#menu{
    list-style:none;
    position:absolute;
    bottom:0px;
    left:20px;
    font-size:36px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-2px;
}
ul#menu li{
    float:left;
    margin:0px 10px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:210px;
}

Как Вы видите, мы прячем элемент ссылок вниз, чтобы также почти полностью скрыть тег span с описанием. Мы делаем это, задавая отрицательное значение нижнего расположения по вертикали. Вы можете подогнать это значение, чтобы тег span чуть-чуть появлялся или не появлялся совсем.

Теперь давайте рассмотрим классы уменьшенных изображений:

.icon_about,
.icon_work,
.icon_help,
.icon_search{
    width:64px;
    height:64px;
    display:block;
    left:140px;
    top:50px;
    position:absolute;
}
.icon_about{
    background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
    background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
    background:transparent url(../images/find.png) no-repeat top left;
}

У тегов span названия и описания будут такие стили:

ul#menu span.title{
    display:block;
    height:26px;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:140px;
    height:80px;
    background-color:#B7B7B6;
    border:3px solid #fff;
    color:#fff;
    display:block;
    font-size:24px;
    padding:10px;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    box-shadow:1px 1px 6px #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

Мы также хотим, чтобы эти два тега span меняли цвет текста и фона, так что мы определим эти стили, которые применятся, когда пользователь наведет указатель мыши на родительский элемент ссылки:

ul#menu a:hover span.description{
    background-color:#54504F;
}
ul#menu a:hover span.title{
    color:#54504F;
}

И это все для стилей. Теперь давайте добавим милых эффектов для взаимодействий с помощью jQuery.

 

Javascript

Javascript будет довольно прямолинейным, так как мы только выдвинем элемент ссылки и уменьшенное изображение. Следующая функция сделает это, а также обратное действие, когда мы отодвинем указатель мыши:

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-95px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});

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

И это все! Наслаждайтесь!

Демонстрация работыСкачать исходный код

Автор урока Mary Lou

Смотрите также:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

129
    +111 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • css
          • javascript
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции