CODEWITHSUNDEEP
javascriptjqueryhtmlcss
alonblack
alonblack

Reputation: 955

How to hide and open navigation

i want to hide and open the navigation i'v created with the "+" and "-" buttons - when user will click on the '+' button the navigation will start open one by one. (notice: the links are on display: none; right now)

fiddle link here: http://jsfiddle.net/RKhRy/5/

The 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;

}

Upvotes: 2

Views: 663

Answers (6)

display-name-is-missing
display-name-is-missing

Reputation: 4409

Try adding this jQuery code:

$("#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();
});

The result can be seen in this JSFiddle.

Upvotes: 2

Phil H
Phil H

Reputation: 20151

Basic working fiddle here: http://jsfiddle.net/phdphil/YJ8gf/#base

Essentially this bit of code, plus an id=nav in the right 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);
}

Upvotes: 2

Dagan Bog-Computers
Dagan Bog-Computers

Reputation: 608

You will need to bind keydown event with CSS in my mind.

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

*The number should be the one that + or - trigger with.

The next thing is with the css, I would just bind $("#element").css('display','block'); With the triggers you want.

If you want them one by one like you said, I'm not absulotly sure but I know it might have to do with CSS3 transition. Check it out, dont want to mislead you.

Goodluck

Upvotes: 0

v42
v42

Reputation: 1425

I've cloned and editted your fiddle. Your html is wrong. You can't have li inside of divs. Thinking of that, your open and close divs can be refactored to something more semanthic. Like this:

<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>

I've also added pseudo-elements in css instead of having two elements to only one function.

Check the result here: http://jsfiddle.net/H7ms7/

Upvotes: 1

Cezary Daniel Nowak
Cezary Daniel Nowak

Reputation: 1174

I've edited your example to make it work: http://jsfiddle.net/g8AF6/3/

new 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;
}

now just add transitions for collapse/expand animation

regards

Upvotes: 2

leaksterrr
leaksterrr

Reputation: 4167

I don't know why i've coded for you but the building blocks of what you're after are here in an updated fiddle: http://jsfiddle.net/RKhRy/12/

Use jQuery's slideToggle();

Upvotes: 2

Related Questions