I know this should be fairly easy but I can’t quite figure it out by myself. facepalm.
I have a site that I’m building at this address and as you can see by looking at it, after the picture loads the menu list items come out of the left side. I just wanted to know how I could make them come out one at a time starting with the top one and working their way down.
Here is the code that makes the slide out effects:
$(function() {
//the loading image
var $loader = $('#st_loading');
//the ul element
var $list = $('#st_nav');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//the list of soclial links
var $socialLinks = $(".social_links");
//the download link
var $download = $("a.st_img_download");
//let's load the current image
//and just then display the navigation menu
$('<img>').load(function(){
$currImage.fadeIn(3000);
$download.attr("href",$currImage.attr("src"));
//slide out the menu
setTimeout(function(){
$loader.hide();
$list.animate({'left':'0px'},1000);
$socialLinks.animate({ 'bottom': '0px' }, 1000);
$download.fadeIn(2000);
},
1000);
}).attr('src',$currImage.attr('src'));
//calculates the width of the div element
//where the thumbs are going to be displayed
buildThumbs();
function buildThumbs(){
$list.children('li.album').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}
Although I think that’s more than you need…
And here is the HTML structure for the menu:
<ul id="st_nav" class="st_navigation">
<li class="album">
<span class="st_link">Photo Album<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<img src="images/album/thumbs/slide1.jpg" alt="images/album/slide1.jpg" />
<img src="images/album/thumbs/slide2.jpg" alt="images/album/slide2.jpg" />
<img src="images/album/thumbs/slide3.jpg" alt="images/album/slide3.jpg" />
<img src="images/album/thumbs/slide4.jpg" alt="images/album/slide4.jpg" />
</div>
</div>
</li>
<li class="album">
<span class="st_link">Videos<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper">
<div class="st_thumbs">
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/EelyyqU-ce0/0.jpg" alt="videos/SkyscraperCover.mp4" />
<span class="caption">Skyscraper Cover</span>
</span>
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/KNlwqFWiNaU/0.jpg" alt="videos/DontBreakMyHeartSlow.mp4" />
<span class="caption">Don't Break My Heart Slow</span>
</span>
<span class="caption-wrap">
<img src="http://img.youtube.com/vi/VwYyRmgutx4/0.jpg" alt="videos/BattleCover.mp4" />
<span class="caption">Battle Cover</span>
</span>
</div>
</div>
</li>
<li>
<span class="st_link">Bio<span class="st_modal"></span></span>
<div class="modal">
<div style="width:600px;">
<h2>Bio</h2>
I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine. I am
so happy, my dear friend, so absorbed in the exquisite sense
of mere tranquil existence, that I neglect my talents.
</div>
</div>
</li>
<li>
<span class="st_link">Contact<span class="st_modal"></span></span>
<div class="modal">
<h2>Contact</h2>
<form id="contact_form" method="POST" action="#">
<label>Name:</label><br />
<input type="text" name="name" /><br />
<label>Email:</label><br />
<input type="text" name="email" /><br />
<label>Reason:</label>
<label><input type="radio" name="reason" value="praise" checked='checked' /> Praise</label> <label><input type="radio" name="reason" value="booking" /> Booking</label><br />
<label>Message:</label><br />
<textarea name="name"></textarea><br />
<input type="submit" value="Submit" name="submit" /> <span class="status_message"></span>
</form>
</div>
</li>
</ul>
And the css:
ul.st_navigation{
position:absolute;
width:100%;
top:140px;
left:-300px;
list-style:none;
}
ul.st_navigation li {
float:left;
clear:both;
margin-bottom:8px;
position:relative;
width:100%;
}
ul.st_navigation li span.st_link{
background: rgba(0,0,0,.8);
float:left;
position:relative;
line-height:50px;
padding:0px 20px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
position:absolute;
margin-left:20px;
width:40px;
height:50px;
cursor:pointer;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
background: rgba(0,0,0,.8) url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
background: rgba(0,0,0,.8) url(../images/icons/up.png) no-repeat center center;
}
ul.st_navigation li span.st_modal{
position:absolute;
margin-left:20px;
width:40px;
height:50px;
cursor:pointer;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
background: rgba(0,0,0,.8) url(../images/icons/modal.png) no-repeat center center;
}
Try this: