Меню «аккордеон»
Применил на паре сай
тов, простой, с небольшим количеством кода, способ создания меню под названием «аккордеон».
Легко настраивается: размер, фон, рамка, текст.
Работает без скриптов, на основе CSS3.
Можно вставить весь код в одно место, где хотите вывести меню, а лучше стили отправить в соотвествующий файл вашего сайта, и просто добавить к содержимому.
Я разбил на две части код, для удобства.
Вот сами стили, которые можно изменять на ваше усмотрение, я их беру с этого сайта:
/* Аккордион*/
[id="accordion"] > [class="accordion"] {
/*width: 540px;*/
height: 45px;
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: 1px solid #004A7F;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px; padding: 5px;
background-image: url("/fon/fonBodyBeg03.png");
}
#accordion h3 {
font-family: Times New Roman;
display: block;
line-height: 20px;
margin: 0px 0px 5px 0px;
background: #FFBE49;
padding: 5px;
}
#accordion h3 > a {
color: #1e1e1e;
text-decoration: none;
}
#accordion p {padding: 5px;}
#accordion li {
list-style:none;
float:left;
}
#accordion li a {
padding: 5px;
color:3D3D3D;
text-decoration:none !important;
}
#accordion li a:hover:before {
content: "►";
padding-right:5px;
color:red;
}
#accordion div:hover {height: 180px;}
#accordion div:hover h3 {
border-bottom: 1px solid #004A7F;
font-weight: bold;
}
/* ------------- */
А это вставляете как HTML код в вами выбранное место в шаблон вашего сайта…. ну или можно прямо в материал.
<div id="accordion"> <div class="accordion"><h3>Народные приметы</h3> <ul> <li><a title="Народные приметы января" href="/janvar/" target="_blank">Январь</a></li> <li><a title="Народные приметы февраля" href="/fevral/" target="_blank">Февраль</a></li> <li><a title="Народные приметы марта" href="/mart/" target="_blank">Март</a></li> <li><a title="Народные приметы апреля" href="/aprel/" target="_blank">Апрель</a></li> <li><a title="Народные приметы мая" href="/mai/" target="_blank">Май</a></li> <li><a title="Народные приметы июня" href="/iuni/" target="_blank">Июнь</a></li> <li><a title="Народные приметы июля" href="/iuli/" target="_blank">Июль</a></li> <li><a title="Народные приметы августа" href="/avgust/" target="_blank">Август</a></li> <li><a title="Народные приметы сентября" href="/sentjabr/" target="_blank">Сентябрь</a></li> <li><a title="Народные приметы октября" href="/oktjabr/" target="_blank">Октябрь</a></li> <li><a title="Народные приметы ноября" href="/nojabr/" target="_blank">Ноябрь</a></li> <li><a title="Народные приметы декабря" href="/dekabr/" target="_blank">Декабрь</a></li> </ul> </div> <div class="accordion"><h3>Укоз — интересное решение</h3> <ul> <li><a title="Сократить количество символов в информере." href="/sokratit_koli4estvo_simvolov_v_informere/" target="_blank">Сократить количество символов в информере.</a></li> <li><a title="Необычная гостевая страница на Укоз" href="/neoby4naja_gostewaja_na_ucoz/" target="_blank">Необычная гостевая страница на Укоз.</a></li> </ul> </div> </div>
Вот так это выглядит, типа ДЕМО :)) меню рабочее для этого сайта.
Укоз — интересное решение
Единственное неудобство в этом меню, плавное выпадание меню вниз, регулируется вручную в строке:
#accordion div:hover {height: 180px;}
стилей. Придётся подстраивать размер под свои нужды.