CSS — как сделать вертикальное меню?

Всем привет! Продолжаем изучать CSS, и сегодня мы будем рассматривать пример создания вертикального выпадающего меню или по-другому его еще называют меню «аккордеон». Меню будем делать на чистом CSS без использования JavaScript, хотя если использовать JS, меню получится намного лучше, но в этом уроке мы изучаем CSS.

Примечание! Если Вы до этого не встречались с технологией CSS (Cascading Style Sheets), то для освоения данного урока сначала прочитайте статью Основы CSS для начинающих.

Важно! Пример ниже, тестировался и точно работает, со всеми эффектами, в браузерах:

• Google – Chrome (всех последних версий);
• Mozilla Firefox  (всех последних версий);
• Opera 12.00.

Некоторые эффекты не работают:

• Internet Explorer (версии 6-9);
• Opera (ниже 11 версии).

Меню вообще не работает:

• Internet Explorer (ниже 6 версии).

Ну что давайте приступим, сразу скажу, что меню делается не сложно, да и получилось оно достаточно простое, сейчас Вы все сами увидите.

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

• селекторы идентификаторов и классов;
• селекторы потомков;
• селекторы дочерних элементов;
• селекторы псевдоклассов;
• свойства (например: margin, cursor, overflow, width, height, text-align, background, color);
• проприетарные CSS-свойства (transition, border-radius и linear-gradient);
• рассмотрим один css хак (для IE);
• секцию expression;
• использование комментариев, обозначаются /*Текст комментария*/.

Для того чтобы все было понятней, весь код я подробно комментирую, каждый селектор и каждое свойство. Чтобы у Вас все работало, скопируйте весь код и создайте файл с расширением html и вставьте этот код туда. Советую использовать при редактировании, для удобства, текстовый редактор NotePad++ и в нем поставьте синтаксис CSS, после чего у Вас все комментарии станут подсвечиваться, если они Вам не потребуются, то просто удалите их.

Исходный код выпадающего меню на CSS

   
   <style>
   /*для элемента с идентификаторов mymenu*/
   #mymenu  {
        width: 150px; /*ширина основного блока*/
        margin: 0 auto; /*отступ от каждого края, так мы выровняли наше меню по центру*/
   }
   /*для элемента с классом mydiv, у которого в потомках есть идентификаторов mymenu*/
   #mymenu .mydiv {
        width: 150px;/*ширина всего меню*/
        transition: height ease-in-out 500ms; /*Изменяем высоту и задаем время задержки*/
        -o-transition: height ease-in-out 500ms;
        -moz-transition: height ease-in-out 500ms; 
        -webkit-transition: height ease-in-out 500ms;
        border-radius: 15px;/*округления уголков рамки*/
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
   }
   /*для элемента h3, у которого в потомках есть класс mydiv*/
   .mydiv h3{
        cursor:pointer;
        margin: 0 0 0 0;/*величина отступа от каждого края*/
        text-align: center;
        color:white;
        border-radius: 15px;/*округления уголков заголовка*/
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        background: #4EAEC1; /*цвет фона для параграфа*/
   /* FF3.6+ */
        background: -moz-linear-gradient(top, #21cbed 0%, #055261 44%, #086a7d 100%); 
   /* Chrome10+,Safari5.1+ */
        background: -webkit-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); 
   /* Opera 11.10+ */
        background: -o-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); 
   /*IE10+ */
        background: -ms-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); 
   /* W3C */
        background: linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient
        ( startColorstr='#21cbed', endColorstr='#086a7d',GradientType=0 );
   }
   /*для элемента p, у которого в потомках есть идентификаторов mymenu*/
   #mymenu p {
        text-align: center;/*выравнивание по центру*/
        margin: 0 0 0 0;/*величина отступа от каждого края*/
        height: 0px;/*выставляем высоту для параграфа, чтобы по умолчанию он был скрыт*/
        overflow: hidden;/*скрываем переполнение контента*/
        transition: height ease-in-out 500ms; /*Изменяем высоту и задаем время задержки*/
        -o-transition: height ease-in-out 500ms;
        -moz-transition: height ease-in-out 500ms; 
        -webkit-transition: height ease-in-out 500ms;
        border-radius: 15px;/*округления уголков параграфа*/
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        background: #21cbed; /*цвет фона для параграфа*/
   /* FF3.6+ */
        background: -moz-linear-gradient(top, #4EAEC1 0%, #188499 44%, #065868 100%); 
   /* Chrome10+,Safari5.1+ */
        background: -webkit-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); 
   /* Opera 11.10+ */
        background: -o-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); 
   /* IE10+ */
        background: -ms-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); 
   /* W3C */
        background: linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient
               ( startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );
        
   }
   /*для элемента p с псевдоклассов :hover(срабатывает при наведении)
   у которого в потомках есть идентификаторов mymenu*/
   #mymenu p:hover {
        background: #4ee1fe;/*цвет фона для параграфа при наведении*/
   /* FF3.6+ */
        background: -moz-linear-gradient(top, #4ee1fe 0%, #11b4d4 44%, #06a2c1 100%); 
   /* Chrome10+,Safari5.1+ */
        background: -webkit-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); 
   /* Opera 11.10+ */
        background: -o-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); 
   /* IE10+ */
        background: -ms-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%);
   /* W3C */ 
        background: linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); 
        cursor:pointer;/*изменяем курсор*/
   }
   /*для элемента p, который является дочерним элементом элемента div с псевдоклассом :hover 
   (будет срабатывать при наведении), у которого в потомках есть идентификаторов mymenu*/
   #mymenu div:hover  > p {
        height: 25px;/*при наведении на блок с заголовком, 
        высота параграфа становится 25 пикселей,
        это как раз и есть эффект появления подменю*/
   }

   /*далее идет примочка для Internet Explorer, другие браузеры ее не видят,
   так называемый хак для IE*/
   * html #mymenu .mydiv  {
        filter: progid:DXImageTransform.Microsoft.gradient
        (startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );
        height: 20px;/*начальная высота блока*/
        overflow: hidden; /*скрываем переполнение контента*/
        forIE: expression(/*секция expression - вставляем javascript код, 
                              для выставления нового класса*/
                onmouseover = function()  {this.className += ' hover'}, 
                onmouseout = function() {this.className = this.className.replace('hover', '')} 
                );
   }
   /*для только что созданного нового класса .hover*/
   * html #mymenu .mydiv.hover  {
        height: auto;/*выставляем высоту для нашего блока с параграфами в авто, 
        для того чтобы было динамическое меню, т.е. при добавлении новых пунктов меню 
        блок сам будет подгонять свой размер по данным внутри себя*/
   }
   /*для элемента a(ссылки), у которого в потомках есть элемент p, 
   в свою очередь, у которого в потомках есть идентификаторов mymenu,
   поставим цвет белый, т.е. цвет ссылки*/
   #mymenu p a {
        color:white;
   }
   </style>
                
   <div  id="mymenu">
    <div class="mydiv">
        <h3 >Меню 1</h3>
                <p><a href = "#">Подменю1</a></p>
                <p><a href = "#">Подменю2</a></p>
        </div>
    <div class="mydiv">
         <h3>Меню 2</h3>
                <p><a href = "#">Подменю1</a></p>
                <p><a href = "#">Подменю2</a></p>
                <p><a href = "#">Подменю3</a></p>
    </div>
    <div class="mydiv">
        <h3>Меню 3</h3>
                <p><a href = "#">Подменю1</a></p>
                <p><a href = "#">Подменю2</a></p>
                <p><a href = "#">Подменю3</a></p>
                <p><a href = "#">Подменю4</a></p>
            </div>
    <div class="mydiv">
        <h3>Меню 4</h3>
                <p><a href = "#">Подменю1</a></p>
                <p><a href = "#">Подменю2</a></p>
                <p><a href = "#">Подменю3</a></p>
                <p><a href = "#">Подменю4</a></p>
                <p><a href = "#">Подменю5</a></p>
    </div>
  </div>

Ну что получилось? Все понятно? Я думаю да, если нет, пишите в комментариях, постараюсь помочь. В дальнейшем будем изучать CSS на более сложных примерах. Удачи!