"Меню аккордеон на CSS"
Bootstrap 3.3.0 Snippet by ASDAFF

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Вертикальное меню аккордеон на CSS3</h1> <div class="verticalaccordion"> <ul> <li> <h3>Заголовок 1</h3> <div>Основная часть раздела 1.</div> </li> <li> <h3>Заголовок 2</h3> <div>Основная часть раздела 2.</div> </li> <li> <h3>Заголовок 3</h3> <div>Основная часть раздела 3.</div> </li> <li> <h3>Заголовок 4</h3> <div>Основная часть раздела 4</div> </li> </ul> </div>
.verticalaccordion>ul { margin: 0; padding: 0; list-style:none; width: 500px; } .verticalaccordion>ul>li { display:block; overflow: hidden; margin: 0; padding: 0; list-style:none; height:40px; width: 500px; /* Decorative CSS */ background-color:#f0f0f0; /* CSS3 Transition Effect */ transition: height 0.3s ease-in-out; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; } .verticalaccordion>ul>li>h3 { display:block; margin: 0; padding:10px; height:19px; /* Decorative CSS */ border-top:#f0f0f0 1px solid; font-family: Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; color: #000; background: #cccccc; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #999999, #cccccc); background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */ } .verticalaccordion>ul>li>div { margin:0; overflow: auto; padding:10px; height:220px; } .verticalaccordion>ul>li:hover { height: 280px; } .verticalaccordion:hover>ul>li:hover>h3 { /* Decorative CSS */ color:#fff; background: #000000; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */ background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */ } .verticalaccordion>ul>li>h3:hover { cursor:pointer; }

Related: See More


Questions / Comments: