makalet,
|
Сообщение от рони
|
поиск по форуму: открывашка
выберите из более 200 вариантов более вам подходящий
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a { text-decoration: none; font-weight: bold; }
#main {
width: 602px;
height: 300px;
border: 1px solid #E0EBEB ;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -301px;
background: #60a839;}
#menu {
padding: 0;
margin: 0;
font-family: Georgia;
}
#menu li {
float: left;
padding: 0;
width: 200px;
position: relative;
transition:background 0.2s ease;
border: 1px solid #333;
border-left: none;
border-right: none;
}
#menu li:hover{
background: #B9D0D0
}
#menu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
display: none;
position: absolute;
left: 0;
top: 31px;
background: #E0EBEB;
}
#menu li ul li:hover{
background: #B9D0D0;
cursor: pointer;
}
#menu li ul li {
height: 26px;
margin: 0;
text-align: left;
border: 0;
}
#nav {
position: relative;
width: 100%;
float: left;
background: #E0EBEB;
}
#nav li {
list-style: none;
text-align: center;
}
#nav li a {
display: block;
padding: 0;
border-left: none;
border-right: none;
line-height: 30px;
font-size: 19px;
font-family: Trebuchet MS;
color: #000;
}
.active-menu-item {
background: #B9D0D0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var $blocks = $("#menu ul");
$blocks.each(function(i, elem) {
var $el = $(elem),
$but = $el.prev();
$but.click(function() {
$but.toggleClass("active-menu-item");
$blocks.filter(function(j, el) {
i == j && $(el).slideToggle();
return i != j
}).slideUp().prev().removeClass("active-menu-item");
})
});
$('html').click(function (event) {
if ($(event.target).closest('#nav' ).length) return;
$('.active-menu-item').click()
});
});
</script>
</head>
<body>
<div id="main">
<div id="nav">
<ul id="menu">
<li class="mat">
<a href="#"><span>Мат. вычисления</span></a>
<ul class="mat">
<li id="mat-1">Степень</li>
<li id="mat-2">Факториал</li>
</ul>
</li>
<li class="pl">
<a href="#"><span>Площадь</span></a>
<ul>
<li id="pl-1">Треугольник</li>
<li id="pl-2">Квадрат</li>
<li id="pl-3">Прямоугольник</li>
<li id="pl-4">Эллипс</li>
<li id="pl-5">Ромб</li>
</ul>
</li>
<li class="ob">
<a href="#"><span>Объем</span></a>
<ul>
<li id="ob-1">Куб</li>
<li id="ob-2">Конус</li>
<li id="ob-3">Пирамида</li>
<li id="ob-4">Параллелепипед</li>
<li id="ob-5">Цилиндр</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>