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 версии).

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

Для начала посмотрим на то, что мы попытаемся сделать в конечном итоге:

Меню 1

Подменю1

Подменю2

Меню 2

Подменю1

Подменю2

Подменю3

Меню 3

Подменю1

Подменю2

Подменю3

Подменю4

Меню 4

Подменю1

Подменю2

Подменю3

Подменю4

Подменю5

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

  • селекторы идентификаторов и классов;
  • селекторы потомков;
  • селекторы дочерних элементов;
  • селекторы псевдоклассов;
  • свойства (например: 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 на более сложных примерах. Удачи!

Понравилась статья? Поделиться с друзьями:
Заметки IT специалиста
Комментариев: 6
  1. Аватар
    FasT

    Прикольная менюшка!

  2. Аватар
    Виталий

    Правда ничего не понял.Помогите!!!

  3. Админ
    Админ (автор)

    Скопирую весь код в текстовый файл, сохрани с расширением .html, открой редактором NotePad++ (для удобства) и у тебя все комментарии будут подсвечиваться, и тогда я думаю, будет все понятно, так как весь код прокомментирова н (каждый селектор, каждое свойство). Если ты с css еще не встречался, то лучше сначала прочитай про основы CSS. Если возникнут проблемы пиши постараюсь помочь.

  4. Аватар
    serega43911

    менюха просто огонь!!! респект автору

  5. Аватар
    Артем

    Все работает просто супер.
    Текст между и , вставил в style.css.
    А сам хтмл код оформил как текстовый виджет.

  6. Аватар
    True59

    Исходник супер, спасибо

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку «Отправить комментарий», я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.