モバイルでのフルスクリーンオーバーレイナビゲーション

Question

これは、私が探しているものの実例を見つけることができないため、ソース資料を探しています。私は定期的にインラインリンクとしてWordpressのメニューを表示しています。しかし、私がモバイルサイズの画面に行くと、開いたときにコンテンツ全体にオーバースクリーンするハンバーガーメニューに切り替える必要があります。

私は、どちらか一方を行うメニューしか見つからないようです。

私は現在、典型的なWPコードでメニューに持ってる本質的tympanus.net/Development/FullscreenOverlayStyles が、全画面でのデモのようなものを作成するために探し

HTML

<?php wp_nav_menu(array('container_class' => 'main-nav', 'theme_location' => 'primary')); ?> 

私はリンクが一番上に表示したいです

Answer 1

最初に、「メインナビ」を小さな画面で非表示にするにはメディアクエリが必要です。

@media(max-width:767px){} 

など大画面のメディアクエリー：

@media(min-width:768px){} 

そして、あなたの個人のニーズに合わせて、おそらく追加のもの。そして、小さなメディアクエリを使用すると、そのような何かスタイリングないで：

.main-nav{ 
    display:none; 
    postition:fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 2000; 
} 

を次にあなたもトリガするバーガーボタンを必要とする、これは、より大きな画面で隠され、小さい画面で表示されます。

$(".burger-button").click(function(e){ 
    e.preventDefault(); 
    $(".main-nav").fadeIn("slow"); 
}); 

次に、あなたの.main-NAVにあなたがクローズするボタンが必要になります：

このボタンをクリックの上に表示されるように.main-NAVをトリガすることができ、私はこのような何かがjQueryのを使用したいですそれはこのような何かをコーディングするのは非常に簡単かつ迅速です

$(".close-button").click(function(e){ 
    e.preventDefault(); 
    $(".main-nav").fadeOut("slow"); 
}); 

ちょうどそれのそれぞれのメディアクエリで2つの独立したメニューやスタイルごとのように扱う：NAVと私はまた、jQueryを使ってそれを行うだろう。