如何在單擊div時出現彈出式菜單

我正在一個網站上工作，當屏幕像手機一樣小時，它會創建一個懸停菜單按鈕。如何在單擊div時出現彈出式菜單

我的html代碼懸停菜單按鈕和菜單如下所示。在課程mnav-button lt768內是按鈕出現的地方，類mobile-nav-wrap lt768有菜單本身。

我的問題是，我從一個網站

這個例子中，我不知道他們是怎麼弄的彈出菜單出現時，類mnav-button lt768內的用戶點擊。

如何在div class mnav-button lt768內點擊某個菜單時顯示菜單。

還要注意的是，當用戶點擊的div <div class="close-btn"></div>

這裏的菜單關閉是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>

所以這仍然是不工作我上傳的網站，讓大家都可以訪問它這裏kewsplus.com/testing

來源

2013-12-11 Kern Elliott

你需要使用jQuery（或Javascript）。你可能想看看這裏http://stackoverflow.com/questions/17638990/jquery-show-and-hide-div-on-mouse-click-animate – luckylwk

你不需要_need_ javascript，這裏只是一個例子CSS - http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html –

所以這仍然是行不通的我上傳的網站，所以你可以在這裏訪問它http：//www.kewsplus的.com /測試/ –

你想要這樣的效果嗎？ 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); 
    }); 
});

來源

2013-12-11 14:52:31 leni2312

在http://whiteboard.is，我們使用了一個簡單的一塊的jQuery味JavaScript來檢測的點擊（或觸摸）移動導航按鈕，我們使用該事件來添加/刪除正文中的類。然後，在CSS中，我們使用此類更改來隱藏/顯示移動導航。

的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'); 
});

基本樣式：

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

應該這樣做。

來源

2013-12-14 05:36:09 taylorleejones

如何在單擊div時出現彈出式菜單

回答

相關問題