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

Сегодня мы будем создавать элегантный аккордеон для контента. Идея состоит в том, чтобы несколько вертикальных вкладок с контентом раздвигались в стороны при наведении на одну из них курсором мыши. Для улучшения внешнего вида аккордеона будут использованы некоторые свойства CSS3. Давайте приступим!

 

 

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

                                    Демо             Загрузить материалы

Начнем в первую очередь с разметки.

РАЗМЕТКА

HTML будет состоять из списка, где каждая вкладка аккордеона — это элемент списка. Внутри элемента списка будет заголовок, который исчезает при наведении. Кроме того будет элемент для фона с белым градиентом и блок для описания.

<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>

Остальные элементы будут иметь классы bg2, bg3 и bg4. Неупорядоченный список получает класс и id, так как мы будет в дальнейшем обращаться к нему в JavaScript.

CSS

Стили для списка будут следующими:

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}

Все элементы списка будут иметь разное фоновое изображение и поэтому в первую очередь зададим общие свойства стиля для каждого элемента списка:

ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}

Отметим, что box shadow не будет работать в IE.

Начальная ширина каждого пункта будет 115 пикселей. В JavaScript это значение будет изменено при наведении до 480px.

Граница вокруг элемента должна быть применена только для одной стороны элемента, в противном случае у нас бы получалась двойная рамка между пунктами и одинарная рамка на внешних границах. Нужно определить класс для левой границы, который будем применять для последнего элемента списка (так как элементы плавают справа, поэтому применять стили будем в обратном порядке):

ul.accordion li.bleft{
    border-left:2px solid #fff;
}

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

ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}

Блок, который содержит описание, будет выглядеть следующем образом:

ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}

Сначала установим display:none, так как мы хотим, чтоб элемент появлялся только при наведении. Вот стили других элементов:

ul.accordion li .description h2{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

Стиль для градиента:

ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
} 

JAVASCRIPT

Во-первых, мы включаем библиотеку jQuery перед закрытием тега body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Теперь добавим функцию, которая заставляет список раздвинуться при наведении на него мыши. Это может быть достигнуто путем увеличение ширины в 480 пикселей. При этом верхний заголовок должен исчезать и его место занимает градиент (CSS класс «bgDescription») с описанием:

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Первая функция внутри «$(‘#accordion > li’).hover» срабатывает при наведении на нее курсора. Вторая функция — когда курсор отводится в сторону. Добавим некоторые временные задержки, чтобы перевод осуществлялся плавно.

Это все! Надеемся, что урок был интересным и полезным! 

Автор - MARY LOU.

Перевод — Дежурка.

Читайте также:

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

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

23
    +5 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
          • домен 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

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