<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Меню гармошка для Вашего сайта</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<style type="text/css">
body {
margin: 10px auto;
font:11px Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
width: 200px;
}
.menu_head {
display:block;
border: 1px solid #999999;
border-bottom-width: 0;
border-bottom: 1px solid gray;
font-size:12px;
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #A5B918 urlcenter right no-repeat;
color:#ffffff;
}
.menu_head2{
display:block;
border: 1px solid #999999;
border-bottom-width: 0;
border-bottom: 1px solid gray;
font-size:12px;
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #4063A9 url center right no-repeat;
color:#ffffff;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
border: 1px solid #999999;
border-bottom-width: 0;
border-bottom: 1px solid #999999;
color:#333333;
font-size:12px;
background-color:#ffffff;
padding: 2px;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #333;
font-size:12px;
text-decoration:underline;
}
.стиль2 {font-size: 11px}
</style>
</head>
<body>
<div style="float:left">
<div id="firstpane" class="menu_list">
<p class="menu_head2">Все для DLE</p>
<p class="menu_head">Что такое DLE</p>
<div class="menu_body">
<a href="#">» DataLife Engine</a>
</div>
<p class="menu_head">Скачать DLE</p>
<div class="menu_body">
<a href="#">» Все релизы DLE</a>
</div>
<p class="menu_head">Модули для DLE</p>
<div class="menu_body">
<a href="#">» Бесплатные модули dle</a>
<a href="#">» Платные модули dle</a>
</div>
<p class="menu_head">Хаки для DLE</p>
<div class="menu_body">
<a href="#">» Хаки для DLE</a>
</div>
<p class="menu_head">Шаблоны для DLE</p>
<div class="menu_body">
<a href="#">» Бесплатные шаблоны</a>
<a href="#">» Платные шаблоны</a>
</div>
<p class="menu_head2">F.A.Q. для начинающих</p>
<p class="menu_head">Установка Денвера</p>
<div class="menu_body">
<a href="#">» Скачать Денвер</a>
<a href="#">» Установка Денвера</a>
<a href="#">» Начало работы</a>
</div>
<p class="menu_head">База данных MySql</p>
<div class="menu_body">
<a href="#">» Создание базы</a>
<a href="#">» Работа с таблицами</a>
<a href="#">» Импорт и экспорт</a>
</div>
<p class="menu_head">Установка DLE</p>
<div class="menu_body">
<a href="#">» Как установить DLE</a>
</div>
<p class="menu_head">Основы HTML</p>
<div class="menu_body">
<a href="#">» Первая страница</a>
<a href="#">» Работаем с текстом</a>
<a href="#">» Выравнивание текста</a>
<a href="#">» Шрифт текста</a>
<a href="#">» Вставляем изображения</a>
<a href="#">» Вставляем ссылки</a>
<a href="#">» Таблицы</a>
<a href="#">» Таблицы-2</a>
<a href="#">» Атрибуты тега table</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(images/left.png)"});
});
});
</script>
</body>
</html>
