Q:

I need to make a drop down and drop up like the example included

I need to create an drop down nav bar(top right) and a drop up button/links (on the top left) like so. the drop down will be displayed once the screen decreases reaches a certain pixel width. adjust the browser to be smaller if you cant see the drop down (NAV).

They need to be responsive to the size of the browser. This is for a mobile site(iphone and android). Please include a fiddle if possible. or detailed instructions. I don't want to use boot strap or any other platform just Html5 css3 and javascript/jquery. Please include the animation as well. 
EXAMPLE:
http://treadsack.com/
How do I make this?
Thank you very much!

A:

Well you can use CSS media queries to apply different styles when the viewport/screen resizes:
@media (max-width:600px) {
/* if the viewport is less than or equal to 600px hide the div */
    div { display:none; }
}

If you have this markup structure:
<nav> 
<span>NAV</span>
<ul>
    <li>Home</li>
    <li>About</li>
    <li>News</li>
</ul>
</nav>

Then CSS would be:
ul {
    display:block;
}
li {
    display:inline-block;
    height:30px;
    line-height:30px;
}
span {
    display:none;
    height:30px;
    line-height:30px;
    cursor:pointer;
}
@media (max-width:600px) {
    ul {
        display:none;
    }
    li {
        display:block;
    }
    span {
        display:inline;
    }
}

Then show/hide the dropdown when you click NAV with:
$('span').click(function () {
    $(this).siblings('ul').slideToggle('slow');
});

See this jsfiddle.

Now when you click the <span> again to hide the dropdown then you resize the viewport width greater than 600 the inline menu list is not showing. This is due to the .slideToggle(), js/jQuery put its styling as an inline attribute <ul style=""> on the element and that overrides the CSS styling. You can get around with it by declaring !important on your CSS to overrule the jQuery styling, but in this case it's not going to be helpful since we are using jQuery to slide the dropdown menu.
A solution would be to handle the viewport/window resize via jQuery as well. CSS media queries listens to window.innerWidth but this may return a different value on cross browsers (especially older IE). So we need to create a function that returns the viewport-width:
function viewportWidth() {
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return e[a + 'Width'];
}

Then use it on window resize event:
$(window).resize(function () {
    if (viewportWidth() <= 600) {
        $('span').show();
        $('ul').hide();
    } else {
        $('ul').show();
        $('span').hide();
    }
});

Check this jsfiddle.

