Меню «аккордеон»
Применил на паре сайтов, простой, с небольшим количеством кода, способ создания меню под названием «аккордеон».
Легко настраивается: размер, фон, рамка, текст.
Работает без скриптов, на основе 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;}
стилей. Придётся подстраивать размер под свои нужды.