"Меню боковое раскрывающееся (Химзавод№5)"
Bootstrap 3.3.0 Snippet by ASDAFF

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Меню</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.search-form input').click(
function(){
$(this).val($(this).val()=='Поиск по сайту'?'':$(this).val());
}
);
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(images/arrow_down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(images/arrow_small.png)"});
});
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(images/arrow_down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(images/arrow_small.png)"});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
background-color: #FFFFFF;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
a:link{
color: #076e43;
}
a:hover{
text-decoration: none;
}
a:visited {
color: #076e43;
}
a img {
border: none;
}
.menu_list {
width: 257px;
margin-left:10px;
}
.menu_head {
padding: 1px 10px;
cursor: pointer;
position: relative;
color: #4b4c4c;
margin: 1px;
text-transform: uppercase;
background-image: url(images/arrow_small.png);
background-repeat: no-repeat;
background-position: 0px 5px;
font-weight: bold;
}
.menu_head:hover{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit

Questions / Comments: