Сегодня в уроке Вы узнаете о том, как сделать интересную выплывающую панель с помощью jQuery.
Данную панель можно применить в разных целях: начиная от навигационного меню и заканчивая просто информационным блоком.
Первым делом давайте рассмотрим структуру HTML:
<div id="slidedown_top"></div> <!-- slidedown_top -->
<div id="slidedown_content">
<div class="content">
<div class="block">
<img src="footerAuthor.gif"/><br/>
<p>A passionate web designer, developer who keens to contribute to web development industry.</p>
<p>Feel free to say hi to me, or follow me on twitter. </p>
</div>
<div class="block">
<img src="footerTwitter.gif"/><br/>
<ul>
<li>I have a new inspiration using easing method, stay tuned!</li>
<li>Dock menu with jQuery! pretty cool huh...</li>
</ul>
</div>
<div class="block">
<img src="footerPartner.gif"/><br/>
<ul>
<li>Smashing Magazine</li>
<li>Vandelay Design</li>
<li>Sixrevision</li>
<li>CSS Mania</li>
<li>Web Designer Depot</li>
<li>Queness</li>
</ul>
</div>
<div class="clear"></div>
</div> <!-- content -->
<div class="footer">
</div> <!-- footer -->
</div> <!-- slidedown_content -->
Тут все довольно просто.
Далее идут стили оформления CSS:
<style>
body {
margin:0;
padding:0
}
#slidedown_top {
height: 70px;
background-color:#666;
}
#slidedown_bottom {
position: absolute;
width: 100%;
height:100%;
background-color:#666;
}
slidedown_content {
position: absolute;
width: 100%;
height: 250px;
top: -205px;
text-align:center;
background:url(bg.gif) repeat-x 0 bottom;
z-index:999;
}
#slidedown_content .content {
margin:0 auto;
width:830px;
height:205px;
}
/* Styles for content */
#slidedown_content .content .block {
float:left;
width:250px;
padding:0 4px 0 4px;
margin: 0 4px 0 4px;
text-align:left;
font-family:georgia;
font-size:11px;
color:#ccc;
}
slidedown_content .footer {
height:40px;
}
#slidedown_content .content li {
padding:0;
margin:4px 0
}
.clear {clear:both}
</style>
Как всегда, стили оформления можно поместить в отдельный файл или же использовать в тот же документе.
И в самом конце давайте воспользуемся магией jQuery (следующий код необходимо поместить между тегами <head></head>):
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {
var top = '-' + $('#slidedown_content .content').css('height');
var easing = 'easeOutBounce';
$('#slidedown_top').mouseover(function() {
$('#slidedown_content').animate({'top' : 0}, {queue:false, duration:1000, easing: easing});
});
$('#slidedown_bottom').mouseover(function() {
$('#slidedown_content').animate({'top' : top}, {queue:false, duration:500, easing: easing});
});
});
</script>
Помните про пути к Javascript файлам. Жирным выделен параметр, который можно менять для разных эффектов анимации.
На сегодня все! Спасибо за внимание.