how to make a nav bar element appear or disappear

Question

/* I also have my meta viewport tag set to device width on my index.php file.

<header class="site-header">
<nav class="site-nav">
    <ul><h4>
        <li><a href="index.php"><img src="/inc/menubutton.png" style="width:25px; height: 25px;"></a></li>          
        <li><form name="search" method="post" action="searchresults.php"></li>
        <li><input type="text" class="searchbar" value="Search" style="width:400px;"></li>
        <li><input type="image" class="searchbutton" src="inc/searchbutton.png" alt="Submit Form" style="height: 25px; width: 25px;"></li>
        </form>
        <li><a href="member.php"><img src="inc/ Memberbutton.png" style="width:25px; height:25px;"></a></li>
        <li><a href="cart.php"><img src="inc/cart.png" style="width:25px; height:25px;"></a></li>
    </ul></h4>
</nav>

This is my CSS:

.site-nav ul {

margin: 0;
padding-left: 20px;
background-color: black;

.site-nav ul:before, .site-nav:after {content: ""; display: table; }
.site-nav ul:after {clear:both; }
.site-nav ul { *zoom: 1; }

.site-nav ul li {
list-style: none;
float: left;
padding: 10px;

I want to be able to make the search bar disappear in mobile view so that the user can click the search button and makes a div pop up. If anyone has advice on making that more dynamic with JQuery that would be awesome. I want it to have a slide out effect. I have no experience with JQuery, but I have some experience with JavaScript. Thank you for your time and patience.

Answer 1

Rather than using js, you can just use css media queries to display/hide elements according to the screen width like this:

HTML:

<input type="text" class="searchbar" value="Search" style="width:400px;"/>

CSS:

@media (max-width: 480px) {
    input.searchbar {
        display:none;
    }
}
@media (min-width: 481px) {
    input.searchbar {
        display:block;
    }
}

Also, your html syntax is all messed up. I'm not sure whether you're trying to wrapped your <ul></ul> under <h4></h4> or vice-versa. Why is every line of your form a list item anyway?

Answer 2

For the search button, you're probably looking for something like this . This code is written in Jquery, so please don't forget to include the Jquery API at the start of your head tags:

Then, add the following Jquery to your head:

<script type="text/javascript">
$(document).ready(function() {
    $('#clickMe').click(function() {
        $('#test-div').show();
        $('#test-div').animate({ 'opacity': '+=1.0' },300);
    })
});
</script>

Add the following html to your page:

<button id="clickMe">Please click me</button>
<div id="test-div">Hi!</div>

And last but not least, add some css to make the div and the button look fancy:

#test-div {
    width:100px;
    height:100px;
    background:red;
    display:none; /* THIS IS NECESSARY */
    opacity:0.0; /* THIS IS ALSO NECESSART */
}