How to make a popup menu appear when div is clicked

Question

I am working on a site that when the screen is small like for mobiles it creates a hover menu button.

My html code for the hover menu button and the menu is shown below. Within the class mnav-button lt768 is where the button appears and the class mobile-nav-wrap lt768 has the menu itself.

My issue is that I got this example from a site

http://whiteboard.is/

and I have no idea how they get the popup menu to appear when the users clicks within the class mnav-button lt768.

How can I achieve getting a menu to appear when some clicks within the div class mnav-button lt768.

Note also that the menu closes when the users clicks the div <div class="close-btn"></div>

Here is the Html,

<div class="mnav-button lt768"></div>
    <div class="mobile-nav-wrap lt768">
        <nav class="mobile-nav">
            <div class="close-btn"></div>
            <a href="#" class="home">
                <span>Home</span>
            </a>
            <a href="#">
                <span>Company</span>
            </a>
            <a href="#">
                <span>Work</span>
            </a>
            <a href="#">
                <span>Space</span>
            </a>
        </nav>
    </div>

so this still isn't working I uploaded the site so you all can access it here kewsplus.com/testing

You will need jQuery (or Javascript) for that. You may want to look here http://stackoverflow.com/questions/17638990/jquery-show-and-hide-div-on-mouse-click-animate — luckylwk, Dec 11 '13 at 11:52
You don't _need_ javascript for it, here's an example CSS only - http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html — Dan Goodspeed, Dec 11 '13 at 11:54
so this still isn't working I uploaded the site so you all can access it here http://www.kewsplus.com/testing/ — Kern Elliott, Dec 11 '13 at 13:21

score 0 · Answer 1 · answered Dec 11 '13 at 14:52

you want some effect like this? DEMO

HTML:

<div id="header">
<button class="main-nav">push me</button>
</div>
<div id="content">
<div class="media-content">
</div>
<div class="mobile-nav">
    <button class="close" value="close">close</button>
    <ul>
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
    </ul>
</div>

JS:

$(document).ready(
function() {
    $("button.main-nav").click(function() {
        $(".mobile-nav").fadeIn(1000);
    });
    $("button.close").click(function() {
        $(".mobile-nav").fadeOut(1000);
    });
});

score 0 · Answer 2 · answered Dec 14 '13 at 05:36

On http://whiteboard.is, we used a simple piece of jQuery-flavored JavaScript to detect the click (or touch) of the mobile nav button, and we use that event to add/remove a class from the body. Then, in the CSS, we use this class change to hide/show the mobile nav.

Javascript:

// We're going to use the "touchstart" event since we're aiming this as touch devices, not desktop devices
$('body').on('touchstart','.mnav-btn',function(event){
    // let's prevent the default action
    event.preventDefault(); 

    // trigger the class change
    $('body').addClass('mnav-open');
});

// then, the close button
$('.mnav').on('touchstart','.close-btn',function(event){
    event.preventDefault();
    $('body').removeClass('mnav-open');
});

// OR -- if you don't want your site to require the close button, and the nav button will always be present, you can use this instead
$('body').on('touchstart','.mnav-btn',function(event){
    event.preventDefault(); 
    // Will add the class if it doesn't exist, and remove it if it does
    $('body').toggleClass('mnav-open');
});

Basic styles:

.mnav {
    // put design styles here
    display:none; // keeps the nav hidden until the class .mnav-open is added to body
}

.mnav-open .mnav {
   display:block;
}

That should do it.

How to make a popup menu appear when div is clicked

2 Answers2