• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie umsetzen - Navi welche den Content nach unten schiebt (inkl. Beispiel-URL)

M

miker73

Neues Mitglied
Hallo,

mit ist auf der Seite carnival.com (US Reiseseite)
Cruise Deals, Discount Cruises, and Cruise Vacations
die Hauptnavigation aufgefallen.
Allerdings wird es dort über einen custom JS code und JQuery realisiert.

Ein Mega-Menu wird ja im Normalfall als overlay dargestellt, ich möchte aber nicht, dass der content vom Menu überdeckt wird.
Aus diesem Grunde hätte ich gern eine vertikales Akkordion-Menu oder aber auch eine Lösung mit CSS3 transition

Kennt vielleicht jemand ein Tutorial dafür mit welchem ich eine derartige Navigation bauen kann?

Vielen Dank und beste Grüße,
mike
 
Das ist kein echtes Akkordeon und vom Prinzip her recht einfach zu verstehen, sofern Grundlagenkenntnisse in CSS u. jQuery vorhanden sind.

- erstelle drei HTML-Elemente: einen Button und zwei Divs mit IDs.
- Beide Divs erhalten eine width von 400px, dazu das obere eine height von 50px und das untere eine height von 300px. Die Werte sind hier willkürlich und sollen nur der Verdeutlichung dienen.
- Anschließend wird das Div per jQuery ausgeblendet und auf den Button legst du ein Click-Event, etwa so:
Code: 
$('#oben').hide();

$('button').click(function() {
    $('#oben').slideToggle();
});
 
Hallo Tronjer,

danke für deine Antwort.

CSS Kenntnisse sind vorhanden jQuery nicht wirklich aber ich denke einen slideToggle werde ich schon irgendwie zusammenkriegen.
Ich probier es mal morgen und melde mich ggf. - ok?

Beste Grüße,
Mike

P.S.
Hast du eine Ahnung warum wenn ich die URL des obig genannten Reiseveranstalter in einen thread paste die URL autom. in den <title> umgewandelt wird?
Probier es mal aus mit der Vorschau - das ist mir neu¿
 
Sofern du dich mit CSS bereits auskennst, wirst du dich in jQuery auch schnell zurechtfinden.

Die Logik ist hier sehr simpel. Wenn man ein Div mit display: none ausblendet, dann schiebt sich das darunter liegende Element automatisch nach oben, sofern es nicht mit position: relative/absolute verschoben wurde. slideToggle() macht nichts anderes, als in das entsprechende HTML-Tag abwechselnd display: none und display: block zu schreiben und baut zusätzlich noch einen easing-Effekt ein.
 
Hi,

mit einem button funktioniert es ohne Probleme, wenn ich jetzt jedoch mehrere buttons vertikal nebeneinander haben möchte, dann bekomme ich jedoch Probleme :(
Das funktioniert weder mit position (das habe ich mir schon gedacht) aber auch nicht mit float -> siehe code

Code: 
<!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">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toggle-navi test</title>
<style type="text/css">
#header {
    height: 100px;
    width: 900px;
    background-color: #666;
}
#content {
    background-color: #CFC;
    height: 500px;
    width: 900px;
}
#closed1 {
    background-color: #093;
    height: 50px;
    width: 300px;
    float: left;
}
#open1 {
    background-color: #F00;
    height: 300px;
    width: 300px;
    float: left;    
}
#closed2{
    background-color: #093;
    height: 50px;
    width: 300px;
    float: left;    
}
#open2 {
    background-color: #F00;
    height: 300px;
    width: 300px;
    float: left;    
}
#closed3 {
    background-color: #093;
    height: 50px;
    width: 300px;
    float: left;    
}
#open3 {
    background-color: #F00;
    height: 300px;
    width: 300px;
    float: left;    
}
h1 {
    margin: 0;
}
button {
    background-color: #FF0;
    width: 300px;
    height: 50px;
}
.clearfix {
    clear: both;
    width:    900px;
}
</style>
</head>


<body>
<div id="header"><h1>HEADER</h1></div>
    <div id="navi">
        <div id="closed1"><button id="but1">click-me1</button></div>
        <div id="open1">Now you see me</div>
        <div id="closed2"><button id="but2">click-me2</button></div>
        <div id="open2">Now you see me</div>        
        <div id="closed3"><button id="but3">click-me3</button></div>
        <div id="open3">Now you see me</div>        
    </div>
    <div class="clearfix"><hr /></div>
<div id="content"><h1>CONTENT</h1></div>


<script>
$('#open1').hide();


$('#but1').click(function() {
    $('#open1').slideToggle('slow');
});
$('#open2').hide();


$('#but2').click(function() {
    $('#open2').slideToggle('slow');
});
$('#open3').hide();


$('#but3').click(function() {
    $('#open3').slideToggle('slow');
});
</script>
</body>
</html>

und das ganze Schlamassel auf JSFIDDLE
http://jsfiddle.net/EPu4U/

Viele Grüße,
mike
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben