Простое вертикальное меню - аккордеон на 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>

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

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

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

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

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

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

Введите Ваш email