tobee
Erfahrenes Mitglied
Ich hab mir eine vertikale Navigation mit jQuery gebastelt.
Jetzt bugt aber die Navigation ganz schön rum.
Weis aber leider nicht warum.
jquery.haccordion.js
Ich möchte dass die Navigation bei verkleinern/vergrößern vom Browserfenster sich in der Größe anpasst.
Vielen Dank für eure Hilfe.
Jetzt bugt aber die Navigation ganz schön rum.
Weis aber leider nicht warum.
HTML:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="JavaScript" src="jquery.js"></script>
<script type="text/javascript" language="JavaScript" src="jquery.haccordion.js"></script>
<script type="text/javascript" language="JavaScript">
$(function(){
init();
});
function init()
{
$(".haccordion").haccordion();
$(".header").height(window.innerHeight);
}
window.onresize = init;
</script>
<style type="text/css">
* {
padding:0;
margin:0;
}
body, html, .haccordion {
width:100%;
height:100%;
}
.haccordion .header, .haccordion .content{
float: left;
}
.haccordion .header{
background: #f1001c;
color: #fff;
cursor: pointer;
border-right: 1px solid grey;
}
.haccordion .content{
display: none;
width: 0px;
overflow: auto;
}
.haccordion .content p{
margin: 5px;
}
</style>
</head>
<body>
<div class="haccordion">
<div class="header"><img border="0" src="home.gif" /></div>
<div class="content"><p>This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
<div class="header"><img border="0" src="kompetenzen.gif" /></div>
<div class="content"><p>This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
<div class="header"><img border="0" src="kunden.gif" /></div>
<div class="content"><p>This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
<div class="header"><img border="0" src="ueberuns.gif" /></div>
<div class="content"><p>This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
<div class="header"><img border="0" src="presse.gif" /></div>
<div class="content"><p>This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
<div class="header"><img border="0" src="karriere.gif" /></div>
<div class="content"><p>This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
<div class="header"><img border="0" src="kontakt.gif" /></div>
<div class="content"><p>This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing</p></div>
</div>
</body>
</html>jquery.haccordion.js
Code:
// SeViR Simple Horizontal Accordion @2007
// http://letmehaveblog.blogspot.com
jQuery.fn.extend({
haccordion: function(params){
var jQ = jQuery;
var params = jQ.extend({
speed: 500,
headerclass: "header",
contentclass: "content",
contentwidth: (window.innerWidth-140)
},params);
return this.each(function(){
jQ("."+params.headerclass,this).click(function(){
var p = jQ(this).parent()[0];
if (p.opened != "undefined"){
jQ(p.opened).next("div."+params.contentclass).animate({
width: "0px"
},params.speed);
}
p.opened = this;
jQ(this).next("div."+params.contentclass).animate({
width: params.contentwidth + "px"
}, params.speed);
});
});
}
});Vielen Dank für eure Hilfe.
