Markup has changed slightly. Mostly this is for validation. An on page stylesheet was added to assist in this. Its selector and rules may replace #line and its rules in your external stylesheet. Other minor corrections. But I also added the data-width attribute to one of the triggers for functionality. You may make the two on page scripts external. Any questions, just ask:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Jick Pictures, Jick, jickpictures.com, Video Graphic Design, Video Film">
<meta name="title" content="Jick Pictures | When Keeping It Real Goes Wrong" />
<meta name="description" content="Short movies for short attention spans." />
<link rel="image_src" href="http://b.vimeocdn.com/ts/948/252/94825209_200.jpg" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jick | Short movies for short attention spans</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="feed://www.jickpictures.com/blog2/?feed=rss2" />
<link REL="SHORTCUT ICON" HREF="http://www.jickpictures.com/favicon.ico">
<link href="site/css/index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.line {
background-image: url(/preview/site/images/line.png);
margin: 0 auto;
width: 1000px;
height: 1px;
}
</style>
<script type='text/javascript' src='site/scripts/jquery-1.4.2.min.js'></script>
<script type="text/javascript">
(function($){
$.fn.extend({
haccordion: function(params){
params = $.extend({
//defaults:
speed: 500,
headerclass: "header",
contentclass: "content",
contentwidth: 500
}, params);
var hac = this.find('div.' + params.contentclass);
return this.each(function(){
$('div.' + params.headerclass, this).click(function(){
var content = $(this).next('div.' + params.contentclass);
if(content.css('width') !== '0px'){
content.animate({width: 0}, params.speed);
} else {
hac.not(content).animate({width: 0}, params.speed);
content.animate({width: (content.attr('data-width') || params.contentwidth)}, params.speed);
}
});
});
}
});
})(jQuery);
</script>
<script type="text/javascript">
jQuery(function($){
$(".haccordion").haccordion({contentwidth: 220});
$(".haccordion2").haccordion({headerclass: "header2", contentclass: "content2"});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="top">
<a id="logo" href="#"></a>
<div id="menucontainer">
<div class="haccordion">
<div class="header"><img src="site/images/menubutton.png"/></div>
<div class="content"><a class="topmenu" href="#">Jick Pictures</a><a class="topmenu" href="#">Blog</a><a class="topmenu" href="#">Hit us up</a></div>
</div>
</div>
</div>
<div class="line"></div>
<div id="movie"><iframe src="http://player.vimeo.com/video/15676240?byline=0&portrait=0&color=ffffff" style="width: 1000px; height: 563px; border-width: 0"></iframe></div>
<div class="line"></div>
<div id="bottom">
<div class="haccordion2">
<div class="header2"><img src="site/images/sharebutton.png"/></div>
<div class="content2" data-width="260"><a class="bottommenu" href="#">Facebook</a><a class="bottommenu" href="#">Twitter</a><a class="bottommenu" href="#">Digg</a><a class="bottommenu" href="#">Email</a></div>
<div class="header2"><img src="site/images/flicksbutton.png"/></div>
<div class="content2"><a class="inprogress" href="#">Slick</a><a class="bottommenu" href="#">When Keeping It Real Goes Wrong</a><a class="bottommenu" href="#">The Magic Shoes</a><a class="bottommenu" href="#">More...</a></div>
</div>
</div>
<div id="spacer"></div>
</div>
</div>
</body>
</html>
jQuery Accordion Menu
Reply With Quote
Bookmarks