Тема: стиль со всплывающим меню (нужна помощь в вставке)
Хочу сделать всплывающие меню на JQuery, исходный код взят от сюда
www.webresourcesdepot.com/slidin … th-jquery/
Я думал что будет достаточно внести изменения в main.tpl оказалось не всё так просто.
Подскажите что и как изменить чтоб все заработало?
А то меню сверху вылазиет по центру но не стиль не тем более jquery анимация не срабатывает.
Вот как я пытался все это сделать может я на каком то этапе где то обшибся.
буду очень признателен за помощь хочется оживить стиль punbb )))
в main.tpl добавил следующие...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
<body>
<div id="sliderWrap">
<div id="openCloseIdentifier">
</div>
<div id="slider">
<div id="sliderContent">
<!-- forum_navlinks -->
<!-- forum_admod -->
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="open.png" alt="img/open" />
</a>
</div>
</div>
</div>далее в CSS
/****************************** slider******************************/
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -145px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 15px 0 0 15px;
position: absolute;
text-align:center;
font-size:18px;
color:#fff;
font-weight:bold;
padding: 10px;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
/**********************************end slider*********************************/ ну и создал js фаил
<script type="text/javascript">
$(document).ready(function() {
$(".topMenuAction").click( function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginTop: "-141px"
}, 500 );
$("#topMenuImage").html('<img src="img/open.png"/>');
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginTop: "0px"
}, 500 );
$("#topMenuImage").html('<img src="img/close.png"/>');
$("#openCloseIdentifier").hide();
}
});
$('#link').click(function()
{
$('#button').slideDown()
});
});
</script> 