Ich möchte die Navigation ausblenden und öffnen, die ich mit den Schaltflächen "+" und "-" erstellt habe. Wenn der Benutzer auf die Schaltfläche "+" klickt, wird die Navigation nacheinander geöffnet. (Hinweis: Die Links werden angezeigt: keine; im Moment)

Geigenlink hier: http://jsfiddle.net/RKhRy/5/

Das CSS:

.nav {
    height: 600px;
    width: 150px;
       display: none;
}

.nav li {
    width: 150px;
    height: 70px;
    background-color: #232323;
    border-bottom: 1px solid #393939;
    text-decoration: none;
    list-style: none;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
}

#close {
    width: 70px;
    height: 70px;
    background-color: #737373;
    color: #fff;
    margin-left: 150px;
    position: absolute;
     line-height: 70px;
    text-align: center;
    font-size: 30px;
    cursor: pointer;
 display: none;
}

#open {
    width: 70px;
    height: 70px;
    background-color: #232323;
    color: #fff;
    position: absolute;
     line-height: 70px;
    text-align: center;
    font-size: 30px;
    cursor: pointer;

}
2
alonblack 28 Nov. 2013 im 21:01

6 Antworten

Beste Antwort

Versuchen Sie, diesen jQuery-Code hinzuzufügen:

$("#open").click(function(){
    $(".nav, #close").show();
    $(".nav li").each(function (i) {
        $(this).delay(300*i).animate({width:150},300); 
    });
    $("#open").hide();
});

$("#close").click(function(){
    $("#close").hide();
    $($(".nav li").get().reverse()).each(function (i) {
        $(this).delay(300*i).animate({width:0},300); 
    });
    $("#open").show();
});

Das Ergebnis ist in dieser JSFiddle zu sehen

2
display-name-is-missing 28 Nov. 2013 im 18:09

Grundlegende Arbeitsfiedel hier: http://jsfiddle.net/phdphil/YJ8gf/#base

Im Wesentlichen dieses Codebit plus ein id=nav im rechten Tag:

function setNavVisible(visible) {
    var nav = document.getElementById('nav');
    var close = document.getElementById('close');
    var open = document.getElementById('open');
    if(visible) {
        nav.style.display = "block";
        close.style.display = "block";
        open.style.display = "none";
    } else {
        nav.style.display = "none";
        close.style.display = "none";
        open.style.display = "block";
    }
}   


document.getElementById('open').onclick = function() {
    setNavVisible(true);    
}

document.getElementById('close').onclick = function() {
    setNavVisible(false);
}
2
Phil H 28 Nov. 2013 im 17:49

Sie müssen das Keydown-Ereignis in meinem Kopf mit CSS verknüpfen.

$(document).keydown(function(e){
    if (e.keyCode == *NUMBER) { 
}
)};

* Die Nummer sollte die sein, mit der + oder - ausgelöst wird.

Das nächste ist mit dem CSS, ich würde nur $("#element").css('display','block'); mit den Triggern binden, die Sie wollen.

Wenn Sie sie einzeln haben möchten, wie Sie gesagt haben, bin ich mir nicht ganz sicher, aber ich weiß, dass dies möglicherweise mit dem CSS3-Übergang zu tun hat. Probieren Sie es aus, ich möchte Sie nicht irreführen.

Viel Glück

0
Dagan Bog-Computers 28 Nov. 2013 im 17:49

Ich weiß nicht, warum ich für Sie codiert habe, aber die Bausteine für das, wonach Sie suchen, befinden sich hier in einer aktualisierten Geige: http://jsfiddle.net/RKhRy/12/

Verwenden Sie jQuerys slideToggle();

2
leaksterrr 28 Nov. 2013 im 17:34

Ich habe Ihr Beispiel so bearbeitet, dass es funktioniert: http://jsfiddle.net/g8AF6/3/

Neues CSS:

body {
    color: #fff;
    font-family: Tahoma;
    font-weight: bold;
    position:relative;
}
.nav {
    height: 600px;
    width: 150px;
    display: none;
}
#open:focus{
    visibility:hidden;
}
#open:focus + #close + .nav{
    display:block;
}
#open:focus + #close {
    display:block;
}
.nav li {
    width: 150px;
    height: 70px;
    background-color: #232323;
    border-bottom: 1px solid #393939;
    text-decoration: none;
    list-style: none;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
}

#close {
    width: 70px;
    height: 70px;
    background-color: #737373;
    color: #fff;
    position: absolute;
    top:0;
    left:0;
    line-height: 70px;
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    display: none;
}

#open {
    width: 70px;
    height: 70px;
    background-color: #232323;
    color: #fff;
     line-height: 70px;
    text-align: center;
    font-size: 30px;
    cursor: pointer;
}

Fügen Sie jetzt einfach Übergänge zum Reduzieren / Erweitern der Animation hinzu

Grüße

2
Cezary Daniel Nowak 28 Nov. 2013 im 17:42

Ich habe deine Geige geklont und bearbeitet. Ihr HTML ist falsch. Du kannst kein Li in Divs haben. Wenn Sie daran denken, können Ihre offenen und geschlossenen Divs zu etwas Semantischerem umgestaltet werden. So was:

<a href="#" class="toggle">Toggle Menu</a> 
<ul class="nav">
    <li>START HERE</li> 
    <li>ABOUT</li>  
    <li>PORTFOLIO</li>  
    <li>BRANDS</li>  
    <li>SERVICES</li>  
    <li>CONTACT</li>  
</ul>

Ich habe auch Pseudo-Elemente in CSS hinzugefügt, anstatt nur einer Funktion zwei Elemente zuzuweisen.

Überprüfen Sie das Ergebnis hier: http://jsfiddle.net/H7ms7/

1
v42 28 Nov. 2013 im 17:47