Уважаемые господа! При запуске страницы сие меню изначально находиться в активном состоянии.
Граждане-волшебники, как сделать так, что бы при запуске оно было свернутым, а при надобности можно было его вызвать нажатием на стрелочку? Вы уж посоветуйте мало мальскому верстальщику.
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="utf-8" />
<style>
.menuContent {
width:180px;
padding:1px;
float:left;
margin-right:1px;
margin-bottom:1px;
background-color:#FFF;
background-image: -moz-linear-gradient(center top, #FFF, #FFF, #FFF, #ddd);
background-image: -webkit-gradient(linear, center top, center bottom, from(#FFF), color-stop(0.5, #FFF), to(#ddd));
border:1px solid #C7C7C7;
bottom: 0px;
right: 0px;
padding: 0 15px 5px;
position: fixed;
width:170px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
-moz-box-shadow: 3px -3px 5px #B8B8B8;
-webkit-box-shadow: 3px -3px 5px #B8B8B8;
box-shadow: 3px -3px 5px #B8B8B8;
}
.menuContent a.slider {
background-color:#fff;
background-image: -moz-linear-gradient(center top , #ddd, #FFF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF));
border: 1px solid #C7C7C7;
border-bottom:none;
cursor: pointer;
float:right;
height: 8px;
margin:-15px 30px 0 0;
padding:3px 20px;
width: 8px;
z-index: 2001;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
-moz-box-shadow: 3px -2px 3px #B8B8B8;
-webkit-box-shadow: 3px -2px 3px #B8B8B8;
box-shadow: 3px -2px 3px #B8B8B8;
}
.menuContent a.slider img {
padding-bottom: 3px;
}
#nav {
width:180px;
padding:1px;
}
#nav li ul li {
float:left;
margin-right:1px;
margin-bottom:1px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('.slider').click(function () {
$('#nav').slideToggle(200);
var img = $(this).find('img');
if ($(img).attr('id') == 'bot') {
$(img).attr('src', 'http://sps0.at.ua/arrow_top.png');
$(img).attr('id', 'top');
}
else {
$(img).attr('src', 'http://sps0.at.ua/arrow_bottom.png');
$(img).attr('id', 'bot');
}
});
$('.sub').click(function () {
var cur = $(this).prev();
$('#nav li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
});
});
</script>
</head>
<body>
<div class="menuContent">
<a class="slider"><img alt="" id="bot" src="http://sps0.at.ua/arrow_bottom.png"></a>
<ul id="nav">
<li><a href="#"><img src="images/t2.png" />PHP</a></li>
<li><a href="#"><img src="images/t2.png" />PHP</a></li>
<li><a href="#"><img src="images/t2.png" />PHP</a></li>
</ul>
</div>
</body>
</html>