Responsive Mobile Navigation w/ jQuery

This is a responsive mobile navigation with a small bit of jQuery to show/hide the menu after a users browser or device has shrunk to a certain size.

HTML

<div id="navigation">
    <div id="control">
        <a id="show">Show Navigation</a>
        <span id="plusminus">+</span>
    </div>
    <ul id="links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
       
    </ul>
</div>
<div>
    <p>this is a test</p>   
</div>

CSS

#navigation {color:#fff; background:green; overflow:hidden;}
#control {padding:10px; display:none;}
#links {}
#links li {padding:10px; float:left;}
#links li a {color:#fff;}

@media only screen and (max-width: 1000px), only screen and (max-device-width: 800px) {
#navigation {height:38px; background:blue;}
#control {cursor:pointer; display:block;}
#plusminus {float:right;}
#links {background:red; overflow:hidden;}
#links li {width:70%; text-align:left;}
}

JavaScript

$(function(){
    $('#control').toggle(function () {
    
        $(this).parent().css({height: '100%'});
        $(this).find('#plusminus').text('-');
        
    }, function() {
          
        $(this).parent().css({height: '38px'});
        $(this).find('#plusminus').text('+');        
        
    });
});