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

Создаем «аккордеон»-меню на css3

В этом уроке мы будем создавать «аккордеон»-меню. По сколько мы будем создавать меню на чистом css, оно будет работать в браузерах, которые поддерживают селектор псевдо-класса :target.

 

 

Демо

Шаг 1 — HTML разметка

Создаем маркированный список с  якорями и тегами  span. Добавляем id для каждого элемента списка и ссылки для этих id. Для того, чтобы применить стили и сделать раскрывающийся список в виде аккордеона, нужно использовать селектор :target. Селектор будет работать, если у нас будет ссылка, которая указывает на id. В такой способ мы сможем сделать sub-menu видимым. 

<ul class="accordion">

    <li id="one" class="files"><a href="#one">My Files<span>495</span></a></li>

    <li id="two" class="mail"><a href="#two">Mail<span>26</span></a></li>

    <li id="three" class="cloud"><a href="#three">Cloud<span>58</span></a></li>

    <li id="four" class="sign"><a href="#four">Sign Out</a></li>
</ul>

Шаг 2 — Расположение меню и основные стили

Прежде всего, мы добавим некоторые стили, чтобы очистить margins, paddings и другие. 

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.accordion li {
    list-style: none;
}

Теперь добавляем CSS3 градиент, тени и основные стили для текста.  

Меню не будет иметь фиксированную ширину. Оно займет всю ширину своего родителя, поэтому если вы хотите, задать для него ширину 300px  просто создайте див и задайте ему нужную ширину. Мы зададим минимальную ширину 160px (110 пикселей ширина + 50px отступ)

.accordion li > a {
    display: block;
    position: relative;
    min-width: 110px;
    padding: 0 10px 0 40px;

    color: #fdfdfd;
    font: bold 12px/32px Arial, sans-serif;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);

    background: #6c6e74;
    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
    background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

Для span, который будет содержать некоторые цифры, мы определим серый цвет фона, тени и закругленные углы.

.accordion li > a span {

    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    padding: 0 10px;
    margin-right: 10px;

    font: normal bold 12px/18px Arial, sans-serif;
    background: #404247;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

Шаг 3 — Иконки

Чтобы вставить иконки мы будем использовать селектор :before. Его нужно вставить перед заданным элементом. Таким образом мы можем вставить иконки. Иконки, которые мы будем использовать имеют ширину и высоту 24px на 24px. Мы будем размещать их в левом верхнем углу и задавать небольшие поля.

.accordion > li > a:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 24px;
    height: 24px;
    margin: 4px 8px;
    background-repeat: no-repeat;
    background-image: url(../img/icons.png);
    background-position: 0px 0px;
}

 Создаем спрайт изображений, который будет содержать все иконки (нормальный вид и вид при наведении). Преимущество использования спрайтов в том, что мы можем загрузить все иконки одновременно при меньшем количестве запросов. И так как у нас есть только одно изображение, которое будет содержать все иконки, размер соответственно тоже будет меньше. 

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24
 Шаг 4 - Sub-меню

HTML

Чтобы создать подменю добавить еще один неупорядоченный список с классом подменю внутри элемента списка, который вы хотите иметь подменю.

Шаг 4 – Sub-меню

Чтобы создать подменю, создаем еще один список с классом sub-menu, внутри которого будут элементы, которые нужно разместить в подменю.

<li id="one" class="files"><a href="#one">My Files<span>495</span></a>

    <ul class="sub-menu">

        <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>

        <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

        <li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

    </ul>
</li>

CSS стили

Стили для ссылок подменю почти аналогичны. Только немного изменим цвета и тени. Также добавим “em” с некоторыми настройками. 

.sub-menu li a {

    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);

    background: #e5e5e5;
    border-bottom: 1px solid #c9c9c9;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    background: transparent;
    border: 1px solid #c9c9c9;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.sub-menu em {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 14px;
    color: #a6a6a6;
    font: normal 10px/32px Arial, sans-serif;
}

Шаг 5 - Hover и Active

При наведение на элемент основного списка мы будем изменять цвет градиента и стиль span  на зеленый.

.accordion > li:hover > a,
.accordion > li:target > a {
    color: #3e5706;
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);

    /*background: url(../img/active.png) repeat-x;*/
    background: #a5cd4e;
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}

.accordion > li:hover > a span,
.accordion > li:target > a span {
    color: #fdfdfd;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
    background: #3e5706;
}
.sub-menu li:hover a { background: #efefef; }

 

Шаг 6 — Показать и скрыть подменю 

Для подменю задаем высоту 0px, чтобы скрыть его и добавляем эффект перехода. Для того чтобы переход слайда работал, нам нужно задать фиксированную высоту подменю. Поэтому, если вы пожелаете в каждое подменю добавить разное количество ссылок, вы должны задать разную высоту каждого подменю в зависимости от количества ссылок. Поскольку в примере только три ссылки, задаем высоту 98px. Вы можете сделать высоту  100% , но в этом случае слайд работать не будет.

.accordion li > .sub-menu {
    height: 0;
    overflow: hidden;

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.accordion li:target > .sub-menu {
    height: 98px;
}

Конечный результат

Демо

Автор - Valeriu Timbuc

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

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

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

5

      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

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