如何將默認導航菜單設置爲Resonsive切換導航菜單？

我在網站上工作（http://sitepreview.net63.net/）。但我想讓它成爲一個快速響應的網站。所以我想讓導航菜單（來自Wordpress菜單欄）在小屏幕中切換導航菜單。我在這裏給出一個圖像鏈接，在那裏你可以檢查我想要的，請到這個鏈接：http://sitepreview.net63.net/wp-content/uploads/2013/10/responsive-nav-menu.jpg。所以請幫我解決這個問題。謝謝。如何將默認導航菜單設置爲Resonsive切換導航菜單？

來源

2013-10-28 Joy_S

你想使用的引導？ –

我用代碼從該網站：http://www.rvamedia.com/wordpress/collapsible-responsive-menu-for-genesis但它不會爲我工作。 @丹科。 –

我不喜歡使用Bootstrap，因爲這個網站已經制作了一個Responsive THeme。 @ Bharath –

您將需要使用media queries禁用nav和顯示移動nav。然後，您可以使用一些jQuery來知道屏幕尺寸是否是這個尺寸，以將點擊功能添加到導航欄。

像這樣的事情

HTML

<nav class="fullNav"> 
    <ul> 
     <li>home</li> 
     <li>About</li> 
     <li>Blah Blah</li> 
    </ul> 
</nav> 
<nav class="mobileNav"> 
    <ul> 
     <li>home</li> 
     <li>About</li> 
     <li>Blah Blah</li> 
    </ul> 
</nav>

CSS

.fullNav { 
    /*Code goes here */ 
} 
.mobileNav { 
    /*Code goes here */ 
    display: none; 
}

媒體查詢

@media only screen and (max-width: 680px) { 
    .fullNav { 
     display: none; 
    } 
    .mobileNav { 
     display: block; 
    } 
}

的jQuery

if ($(window).width() < 680) { // if statement is not 100% needed 
    $('.mobileNav').on('click', function() { 
    $(this).children().slideToggle(); 
    } 
}

頁眉標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">

來源

2013-10-28 16:14:20

其實我想使用來自Wordpress儀表板的默認導航菜單：外觀 - >菜單。那麼它會在那裏工作嗎？ –

是的，如果您使用媒體查詢，它將起作用，當屏幕尺寸小於特定尺寸時，它們將用於更改您選擇的任何樣式。如果您不隱藏/顯示每個導航，則需要更改所有樣式以符合移動設備的外觀。這是100％可能只是需要更多的工作/測試！ –

我已經使用這個，也定製了一些，但它不工作。您可以在網站上查看。 –

如何將默認導航菜單設置爲Resonsive切換導航菜單？

回答

相關問題