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

Меню 2

Меню 3

Меню 4

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

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

источник

Похожие статьи:

Как создать снимок системы в Linux Mint? Создание резервной копии системы и ее восстановление (714 Hits)

Как скачать все фото из Инстаграм на компьютер? (1021 Hits)

Как вывести значения столбца в строке через запятую на T-SQL? Microsoft SQL Server (890 Hits)

Как сделать скриншот экрана в Linux? (1386 Hits)

Fedora Media Writer - как создать загрузочную флешку с Linux Fedora? (1411 Hits)