Простое вертикальное меню - аккордеон на CSS.

меню CSS
Доброго времени суток, друзья. Сегодня у меня для вас простое меню - аккордеон для блога на CSS. В отличии от множества других вариантов в нём нет сторонних скриптов. Очень легко подгоняется под любой дизайн. Посмотрите виджет аккордеон с полосой прокрутки.
Такое меню, о котором сегодня идёт речь можно использовать для любых целей, хватило бы фантазии. Во вкладках можно вставить любой текст, ссылки, картинки, коды, адреса ваших аккаунтов в соц. сетях. Не плохо можно оформить своеобразное меню по ярлыкам. Код устанавливается в гаджете HTML/JavaScript. Рабочий вариант на тестовом блоге внизу сайдбара.




Для начала скопируйте предложенный ниже CSS код в черновик блога или блокнот. Разберём как всё настроить.

<style>.accordion {
 background-color: #eee; 
border: 1px solid #ccc;
 width: 270px;
 padding: 10px;
 margin: 50px auto;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 -moz-box-shadow: 0 1px 0 #999;
 -webkit-box-shadow: 0 1px 0 #999;
 box-shadow: 0 1px 0 #999;
 }
.accordion section {
  border-bottom: 1px solid #ccc;
 margin: 5px;
 background-color: #fff;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
 background-image: -webkit-linear-gradient(top, #fff, #eee);
 background-image:    -moz-linear-gradient(top, #fff, #eee);
 background-image:     -ms-linear-gradient(top, #fff, #eee);
 background-image:      -o-linear-gradient(top, #fff, #eee);
 background-image:         linear-gradient(top, #fff, #eee);
   -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 }
.accordion h2, .accordion p {
 margin: 0;
 }
.accordion p {
 padding: 10px;
 }
.accordion h2 a {
 display: block;
 position: relative;
 font: 14px/1 'Trebuchet MS', 'Lucida Sans';
 padding: 10px;
 color: #333;
 text-decoration: none;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 }
.accordion h2 a:hover {
 background: #fff;
 }
.accordion h2 + div {
 height: 0;
 overflow: hidden;
 -moz-transition: height 0.3s ease-in-out;
 -webkit-transition: height 0.3s ease-in-out;
 -o-transition: height 0.3s ease-in-out;
 transition: height 0.3s ease-in-out;
 }
.accordion :target h2 a:after {
 content: '';
 position: absolute;
 right: 10px;
 top: 50%;
 margin-top: -3px;
 border-top: 5px solid #333;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 }
.accordion :target h2 + div {
 height: 200px;
 }</style>

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

Код HTML. То что и будет внутри вкладок меню. Тоже сначала скопируйте и вставьте то, что хотите видеть.

<div class="accordion">

<section id="one">
  <h2>
<a href="#one, ">Заголовок 1</a></h2>
<div>Текст, картинка, код, описание и т.д
</div>
</section>
 <section id="two">
  <h2>
<a href="#two ">Заголовок 2</a></h2>
<div>Текст, картинка, код, описание и т.д
</div>
</section>
 <section id="three">
  <h2>
<a href="#three">Заголовок 3</a></h2>
<div>Текст, картинка, код, описание и т.д
</div>
</section>
 <section id="four">
  <h2>
<a href="#four">Заголовок 4</a></h2>
<div>Текст, картинка, код, описание и т.д
</div>
</section>
 <section id="five">
  <h2>
<a href="#five">Заголовок 5</a></h2>
<div>Текст, картинка, код, описание и т.д
</div>
</section>
</div>
</div>

И опять же заполняйте поля, выделенные другим цветом. При необходимости добавляйте вот такой фрагмент кода, если нужны дополнительные вкладки. Соответственно меняйте порядковый номер. В коде я прописала в английском варианте. fourfive, six, seven, eight, nine.

<section id="four">
  <h2>
<a href="# four">Заголовок 4</a></h2>
<div>Текст, картинка, код, описание и т.д.
</div>
</section>

Устанавливайте в гаджет готовый первый код CSS, сразу под ним второй код HTML и все дела.

Возможно, вам понравится ещё меню с вкладками в сайдбаре, которое тоже экономит место в боковой панели.

И я ставлю точку в очередной шпаргалке. Всем спасибо за внимание и до скорых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


6 комментариев:

  1. Виктория, здравствуйте! Мне непонятно, где и как можно использовать такое меню. Спасибо! Поделилась во всех соц. сетях.

    ОтветитьУдалить
  2. Ирина, это достаточно удобно и компактно. Да его вообще. в принципе хоть где можно применить.

    ОтветитьУдалить
  3. Доброго времени суток!
    Решение хорошее, но если можно, парочка дополнений:
    Вместо фиксировнных размеров высоты блоков с содержанием height: 0; и height: 200px; попробуйте использовать свойство max-height с достаточно большой максимальной высотой, чтобы в дальнейшем анимировать её до нужных вам размеров при раскрытии(в соответствии с содержимым) В свойстве transition соответственно указываете, что анимируете именно max-height.
    Можно конечно и height: auto; использовать, но тогда заанимировать высоту при преходе будет проблематично)))
    И ещё, как вариант, если нужен, ну уж очень компактный "аккордеон", при фиксированной высоте раскрываемых блоков, как в вашем примере, просто установите overflow: auto; чтобы иметь возможность прокручивать объёмное содержимое
    Удачи и всех благ!

    ОтветитьУдалить
  4. Виталий, мне очень приятно, что заглянули на мой скромный блог. Мне оченеь важно мнеение специалиста. Обязательно попробую.

    ОтветитьУдалить
  5. Вика давно ищу такое меню,пробовал поставить,но неудобство в том, что при нажатии на пункты меню блог подкидывает вверх.Можно ли как то это исправить.Или может есть такие варианты раскрывающегося меню,как в тех.подержке(форуме) блогера меню слева со стрелочками https://groups.google.com/forum/#!forum/blogoask .Вика пж если можете помогите решить проблему.

    ОтветитьУдалить
  6. ЭкстраБутик, я только не поняла какое меню у Вас прыгает. Верхнее меню выпадающее работает у Вас нормально и у меня ваш блог не подпрыгивает. А насчёт как на форуме, нужно подумать. Хочу сказать, что я бы навигацию у Вас не меняла. Очень удобно, когда заполните ссылки.
    Единственное, посоветовала бы убрать звёздочки у курсора. и кнопки соц сетей с лева. При маленьком разрешении экрана они наползают на текст. А меню именно то что в этом сообщении , да на Блоггере может подпрыгивать. Даю вам ссылку на подобное попробуйте его.http://www.sitehere.ru/soderzhimoe-v-vide-akkordiona-na-css
    но по мне для вас вертикальное лучше.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo