 источник :http://www.shpargalochki.ru/2016/06/menju-akkordeon-css.html
В отличии от множества других вариантов в нём нет сторонних скриптов. Очень легко подгоняется под любой дизайн.
Виджет аккордеон с полосой прокрутки.(http://www.shpargalochki.ru/2015/03/akkordeon-dlja-bloga-s-prokrutkoj.html)
Такое меню можно использовать для любых целей, можно вставить любой текст, ссылки, картинки, коды, адреса ваших аккаунтов в соц. сетях. Не плохо можно оформить своеобразное меню по ярлыкам. Код устанавливается в гаджете 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 и все дела.
Возможно, вам понравится ещё меню с вкладками в сайдбаре(http://www.shpargalochki.ru/2015/09/menju-s-vkladkam-v-sajdbare-Blogger.html), которое тоже экономит место в боковой панели.
|
|
0 коммент.:
Отправить комментарий