jQuery - 特定の幅で完全なナビゲーションバーを表示するにはどうすればよいですか？私は3つのバーのボタンをクリックすると、私はそれがバックアップスライド離れて私のマウスを動かすと

-3

first image second image jQuery - 特定の幅で完全なナビゲーションバーを表示するにはどうすればよいですか？私は3つのバーのボタンをクリックすると、私はそれがバックアップスライド離れて私のマウスを動かすと

は、ナビゲーションバーは、滑り落ちます。これは完全に正常に動作していますが、jqueryでスライドするように指示したので、ブラウザの幅を大きくするとnavbarは存在しません。どのようにjQueryを上下にスライドさせて特定の幅と大きな幅でスライドショーを表示するように設定できますか？私は私のnavbarを狭い幅で崩壊させたいですが、より大きな幅ではnavbar全体が欲しいと思います。

CSS：

@media screen and (min-width: 200px) { 
    #wrapper { width: 300px; } 

    #top-content{ 
    height: 40px; 
    } 

    #navbar li { 
    display: none; 
    padding-top: 4%; 
    text-align: center; 
    } 

    #navbar ul{ 
    height: 130px; 

    } 

    #icon{ 
    width: 12%; 
    float: right; 
    border-left: solid 1px; 
    } 

    #navbar{ 
    display: none; 
    } 



} 

@media screen and (min-width: 500px) { 
    #wrapper { width: 450px;} 

    #navbar li a { 
    display: inline-block; 

    } 

    #icon{ 
    display: none; 
    } 

    #navbar ul{ 
    height: 40px; 
    display: inline-flex; 
    width: 96%; 
    } 

    #top-content{ 
    display: none; 
    } 

    #navbar, #navbar li { 
    display: block; 
    } 

    #navbar li{ 
    padding-top: 13%; 
    } 

} 

@media screen and (min-width: 700px) { 
    #wrapper {width: 680px; } 

    #navbar, #navbar li { 
    display: block; 
    } 

    #navbar li{ 
    padding-top: 13%; 
    } 

} 
@media screen and (min-width: 900px) { 
    #wrapper { width: 850px; } 

    #navbar, #navbar li { 
    display: block; 
    } 

    #navbar li{ 
    padding-top: 13%; 
    } 

}

HTML：

<body> 

<div id="wrapper"> 

    <div id="top-content"> 
    <img id="icon" src="images/dropdown.png" /> 
    </div> 
     <div id="navbar"> 

     <ul> 
      <li> <a href="#"> Home </li> </a> 
      <li> <a href="#"> About Me </li> </a> 
      <li> <a href="#"> Contact Me </li> </a> 
      <li> <a href="#"> Blog </li> </a> 
     </ul> 
     </div> 
    </div> 

</div>

はJavaScript：

$('#icon').click(function(){ 
    $('#navbar, #navbar li').slideDown(); 
}); 

$('#navbar,#navbar ul').mouseleave(function(){ 
    $('#navbar li, #navbar').slideUp(700); 

});

出典

2016-08-07 Sean

バインド '$（ウィンドウ）.resize（）'へのイベントハンドラ、およびウィンドウが一定のサイズであればあなたが必要とどのようにCSSを変更します。 – 4castle

質問は非常に不明です。 – Menasheh

を実行し、別のウィンドウでこのスニペットとの違いを参照するには、ウィンドウのサイズを変更します。私は一時的にimgをdivに変更してメニューアイコンをシミュレートしました。その後、

var Menu = { 
 
    options: { 
 
    minWidth: 500, 
 
    downDelayMs: 700, 
 
    upDelayMs: 700, 
 
    }, 
 
    Init: function() { 
 
    $("#icon").on("click", Menu.SlideDown); 
 
    $(window).on("resize", Menu.AdjustSize); 
 
    Menu.AdjustSize(); 
 
    }, 
 
    SlideDown: function() { 
 
    $('#navbar, #navbar li').slideDown(Menu.options.downDelayMs); 
 
    }, 
 
    SlideUp: function() { 
 
    $('#navbar li, #navbar').slideUp(Menu.options.upDelayMs); 
 
    }, 
 
    AdjustSize: function() { 
 
    if ($(window).width() >= Menu.options.minWidth) { 
 
     if (!Menu.windowWidth || Menu.windowWidth < Menu.options.minWidth) { 
 
     $('#navbar,#navbar ul').off("mouseleave", Menu.SlideUp); 
 
     $('#navbar li, #navbar').show(); 
 
     $("#top-content").hide(); 
 
     } 
 
    } else { 
 
     if (!Menu.windowWidth || Menu.windowWidth >= Menu.options.minWidth) { 
 
     $('#navbar li, #navbar').hide(); 
 
     $("#top-content").show(); 
 
     $('#navbar,#navbar ul').on("mouseleave", Menu.SlideUp); 
 
     } 
 
    } 
 
    Menu.windowWidth = $(window).width(); 
 
    } 
 
}; 
 
Menu.Init();

.fakeicon { 
 
    background-color: Green; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-image: url("images/dropdown.png"); 
 
    cursor: pointer; 
 
} 
 
.fakeicon:hover { 
 
    box-shadow: 2px 2px 6px 3px #ccc; 
 
} 
 
ul { 
 
    list-style: none; 
 
} 
 
li { 
 
    white-space: nowrap; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    font-family: "Segoe UI", Arial, sans-serif; 
 
    font-size: 16px; 
 
    color: #333; 
 
    display: inline-block; 
 
    padding: 6px 20px; 
 
} 
 
a:hover { 
 
    background-color: #eee; 
 
    box-shadow: 2px 2px 6px 3px #ccc; 
 
} 
 
@media screen and (min-width: 200px) { 
 
    #wrapper { 
 
    width: 300px; 
 
    } 
 
    #top-content { 
 
    height: 40px; 
 
    } 
 
    #navbar li { 
 
    display: none; 
 
    padding-top: 4%; 
 
    text-align: center; 
 
    } 
 
    #navbar ul { 
 
    height: 130px; 
 
    } 
 
    #icon { 
 
    width: 12%; 
 
    float: right; 
 
    border-left: solid 1px; 
 
    } 
 
    #navbar { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (min-width: 500px) { 
 
    #wrapper { 
 
    width: 450px; 
 
    } 
 
    #navbar li a { 
 
    display: inline-block; 
 
    } 
 
    #icon { 
 
    display: none; 
 
    } 
 
    #navbar ul { 
 
    height: 40px; 
 
    display: inline-flex; 
 
    width: 96%; 
 
    } 
 
    #top-content { 
 
    display: none; 
 
    } 
 
    #navbar, 
 
    #navbar li { 
 
    display: block; 
 
    } 
 
    #navbar li { 
 
    padding-top: 13%; 
 
    } 
 
} 
 
@media screen and (min-width: 700px) { 
 
    #wrapper { 
 
    width: 680px; 
 
    } 
 
    #navbar, 
 
    #navbar li { 
 
    display: block; 
 
    } 
 
    #navbar li { 
 
    padding-top: 13%; 
 
    } 
 
} 
 
@media screen and (min-width: 900px) { 
 
    #wrapper { 
 
    width: 850px; 
 
    } 
 
    #navbar, 
 
    #navbar li { 
 
    display: block; 
 
    } 
 
    #navbar li { 
 
    padding-top: 13%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="top-content"> 
 
    <div id="icon" title="Show Menu" class="fakeicon"></div> 
 
    </div> 
 
    <div id="navbar"> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About Me</a> 
 
     </li> 
 
     <li><a href="#">Contact Me</a> 
 
     </li> 
 
     <li><a href="#">Blog</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

出典

2016-08-07 05:07:22 nothingisnecessary

ありがとうございます！これはうまくいった！ – Sean

@Seanは助けてうれしい！答えは解決策としてマークしてください。 – nothingisnecessary

jQuery - 特定の幅で完全なナビゲーションバーを表示するにはどうすればよいですか？私は3つのバーのボタンをクリックすると、私はそれがバックアップスライド離れて私のマウスを動かすと

答えて

関連する問題