Всем привет! Продолжаем изучать 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 на более сложных примерах. Удачи!
Прикольная менюшка!
Правда ничего не понял.Помогите!!!
Скопирую весь код в текстовый файл, сохрани с расширением .html, открой редактором NotePad++ (для удобства) и у тебя все комментарии будут подсвечиваться, и тогда я думаю, будет все понятно, так как весь код прокомментирова н (каждый селектор, каждое свойство). Если ты с css еще не встречался, то лучше сначала прочитай про основы CSS. Если возникнут проблемы пиши постараюсь помочь.
менюха просто огонь!!! респект автору
Все работает просто супер.
Текст между и , вставил в style.css.
А сам хтмл код оформил как текстовый виджет.
Исходник супер, спасибо