Вкратце я расскажу вам как сделать красивое меню. Итак шаг первый:
HTML
Для формирования структуры мы используем UL список заключенный в контейнеры Div с определенным классом и идентификатором. В общем и целом, на странице HTML весь наш блок будет выглядеть следующим образом:
Code
<div id="right">
<div class="over">
<p class="slide2"><a href="#" class="btn-slide2">Рубрики</a></p>
<div id="panel2">
<div class="blok2">
<ul>
</ul><ul class="aleft"><li> <a href="#" title="Просмотреть все записи в рубрике Избранное">Избранное</a></li><li>
<a href="#" title="Просмотреть все записи в рубрике Новости">Новости</a></li><li>
<a href="#" title="Просмотреть все записи в рубрике Стили CSS">Стили CSS</a></li></ul>
<ul class="aright"><li>
<a href="#" title="Просмотреть все записи в рубрике Рубрика 2">Рубрика 2</a></li><li>
<a href="#" title="Просмотреть все записи в рубрике Рубрика 3">Рубрика 3</a></li><li>
<a href="#" title="Просмотреть все записи в рубрике Рубрика 4">Рубрика 4</a></li></ul>
<div style="clear:both;"></div>
</div>
</div>
<p class="slide3"><a href="#" class="btn-slide3">Архивы</a></p>
<div id="panel3">
<div class="blok2">
<li class="arsip clearfix">
<ul>
<li><a href='#' title='Сентябрь 2010'>Сентябрь 2010</a></li>
<li><a href='#' title='Август 2010'>Август 2010</a></li>
<li><a href='#' title='Июль 2010'>Июль 2010</a></li>
<li><a href='#' title='Июнь 2010'>Июнь 2010</a></li>
<li><a href='#' title='Май 2010'>Май 2010</a></li>
<li><a href='#' title='Апрель 2010'>Апрель 2010</a></li>
<li><a href='#' title='Март 2010'>Март 2010</a></li>
<li><a href='#' title='Февраль 2010'>Февраль 2010</a></li>
<li><a href='#' title='Январь 2010'>Январь 2010</a></li>
<li><a href='#' title='Декабрь 2009'>Декабрь 2009</a></li>
</ul>
<br class="clear" />
</li>
</div>
</div>
<p class="slide4"><a href="#" class="btn-slide4">Метки</a></p>
<div id="panel4">
<div class="blok2">
<ul>
<a href='#'>формы</a>
<a href='#'>Highlight</a>
<a href='#'>Таблицы</a>
<a href='#'>WordPress</a>
<a href='#'>PHP</a>
<a href='#'>Подсказки</a>
<a href='#'>интересно</a>
<a href='#'>Программы</a>
<a href='#'>jQuery</a>
</ul>
</div>
</div>
<p class="slide"><a href="#" class="btn-slide">Блок на Ваш выбор</a></p>
<div id="panel">
<div class="blok2">
Наполните этот блок своим контентом
</div>
</div>
</div><!--over--></div>
Это что касается разметки, теперь о некоторых параметрах немного подробнее. В частности id="right", я установил вывод блока шириной 290px в правой части страницы, что чаще всего и бывает, если понадобиться отображение в левой колонке, то легко вносятся изменения в таблице стилей, как ширина так и местоположение. Вот так вот не принужденно мы подошли непосредственно к оформлению нашего «аккордеона». На первый взгляд код CSS может показаться тяжеловесным, но оно того стоит и затруднений в работе со стилями думаю трудностей не возникнет.
Второй шаг
CSS
Мы не будем использовать для оформления блока чистый CSS, например для заголовков контейнеров на понадобиться небольшое изображение:
Каждая панель в таблице стилей пронумерована и имеет свои настройки, такие как цвет и размер шрифта, высота и ширина контейнера заголовка. Экспериментируя с параметрами можно добиться результатов на любой извращенный вкус.
В файле стилей .css или непосредственно на странице следует прописать следующий код:
Code
#right {
float:right;
width:290px;
margin:23px 75px 0 0;
padding:0;
}
.over {
margin:5px 0 20px 0;
padding:0;
}
/* основная разметка панелей..... */
#panel {
display: none;
}
.slide {
margin: 0px 0px 5px 0px;
padding: 0;
background: url(images/sl.gif) no-repeat center top;
}
.btn-slide {
width: 290px;
height: 25px;
padding-top: 4px;
margin: 0 auto;
display: block;
font-family: Arial, Tahoma, Trebuchet MS;
text-shadow: 0 1px 0 #000;
font-size: 11px;
color: #f6f6f8 !important;
text-decoration: none;
text-transform:uppercase;
padding-left:20px;
font-weight:bold;
}
#panel2 {
display: none;
}
.slide2 {
margin: 0px 0px 5px 0px;
padding: 0;
background: url(images/sl.gif) no-repeat center top;
}
.btn-slide2 {
width: 290px;
height: 25px;
padding-top: 4px;
margin: 0 auto;
display: block;
font-family: Arial, Tahoma, Trebuchet MS;
text-shadow: 0 1px 0 #000;
font-size: 11px;
color: #f6f6f8 !important;
text-decoration: none;
text-transform:uppercase;
padding-left:20px;
font-weight:bold;
}
#panel3 {
display: none;
}
.slide3 {
margin: 0px 0px 5px 0px;
padding: 0;
background: url(images/sl.gif) no-repeat center top;
}
.btn-slide3 {
width: 290px;
height: 25px;
padding-top: 4px;
margin: 0 auto;
display: block;
font-family: Arial, Tahoma, Trebuchet MS;
text-shadow: 0 1px 0 #000;
font-size: 11px;
color: #f6f6f8 !important;
text-decoration: none;
text-transform:uppercase;
padding-left:20px;
font-weight:bold;
}
#panel4 {
display: none;
}
.slide4 {
margin: 0px 0px 5px 0px;
padding: 0;
background: url(images/sl.gif) no-repeat center top;
}
.btn-slide4 {
width: 290px;
height: 25px;
padding-top: 4px;
margin: 0 auto;
display: block;
font-family: Arial, Tahoma, Trebuchet MS;
text-shadow: 0 1px 0 #000;
font-size: 11px;
color: #f6f6f8 !important;
text-decoration: none;
padding-left:20px;
text-transform:uppercase;
font-weight:bold;
}
/* оформления блока с контентом */
.blok2 {
margin:0 0 20px 0;
padding:12px;
font-size: 12px;
background: #D8D8D8 url(images/sidebg.png);
border:1px solid #aaa;
}
.aleft {
float:left;
width:120px;
}
.aright {
float:left;
width:120px;
}
br.clear {
clear: both;
}
.arsip li {
float: left;
width: 120px;
}
.clearfix {
display: inline-block;
}
ul{
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
ul li{
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}
a {
color: #024153;
text-decoration:none
}
a:hover, a:active {
color: #576C72;
text-decoration:none;
}
Шаг третий JQUERY
Между <head> и </head> пишем:
Code
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-210px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
});
</script>
Исходники(обязательно скачиваем и заливаем на сайт!)
Обезательно скачайте
