1
私はCssとjQueryで簡単な応答メニューを試しています。 jQueryスクリプトが特定のウィンドウ幅でのみ動作するようにしたい。私はブラウザのサイズを変更します。ここに私のコードです。シンプルなjqueryとcssで反応的なメニューを作成するには
$(document).ready(function(){
\t \t $(".resmenu").click(function(){
\t \t \t $(".menu").slideToggle();
\t \t });
\t \t $(".submenu").click(function(){
\t \t \t $(this).toggleClass("active_submenu");
\t \t \t $(this).parent().find(".dropdown").slideToggle();
\t \t });
\t });.container {
\t width:980px;
\t margin:100px auto 0 auto;
\t font-family:arial;
}
ul, li {
\t margin:0;
\t padding:0;
}
.resmenu {
\t display:none;
}
.menu li {
\t display: inline-block;
\t position: relative;
}
.menu li a {
\t font-size: 14px;
\t text-transform: uppercase;
\t color: #3b2612;
\t padding: 6px 17px;
\t letter-spacing: 1px;
\t display: block;
\t text-decoration: none;
}
.menu li:hover a {
\t background: #444;
\t color: #fff !important;
}
.menu li ul {
\t position: absolute;
\t width: 250px;
\t z-index: 5;
\t left: 0px;
\t top:28px;
\t display:none;
\t
}
.menu li:hover ul {
\t display:block;
}
.menu li ul li {
\t display: block;
}
.menu li ul li a {
\t padding: 6px 17px;
\t transition: all 0.2s;
\t text-transform: capitalize;
}
.menu li ul li a:hover {
\t background: #000;
}
/*--- responsive ----*/
@media screen and (max-width:768px) {
.resmenu {
\t color: #fff !important;
\t display: block;
\t text-decoration: none !important;
\t background: #6ca2bd;
\t padding: 5px 10px;
}
.menu {
\t display: none;
\t background: #444444;
}
.menu li {
\t position: relative;
\t display: block;
}
.menu li a {
\t color: #fff;
\t font-size:14px;
\t padding: 6px 17px;
}
.menu li a:hover {
\t background-color: #000;
\t color: #000;
\t transition: all 0.3s;
}
.active_submenu {
\t background-color: #ceb689 !important;
\t color: #fff !important;
}
.menu li ul {
\t display: none;
\t width: 100%;
\t position: relative;
\t top: 0px;
\t display:none;
\t
}
.menu li:hover ul {
\t display: none;
\t top: 0px;
}
\t
.menu li a.active {
\t color: #fff;
\t font-family: 'opensanssemibold';
}
\t
.menu li ul li a {
\t background:#333;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
\t \t \t \t \t \t <a href="javascript:void();" class="resmenu">Menu</a>
<ul class="menu">
<li><a href="#">Menu</a></li>
<li><a href="javascript:void(0);" class="submenu">Dropdown One <span></span></a>
<ul class="dropdown">
<li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" class="submenu">Dropdown Two <span></span></a>
\t \t \t <ul class="dropdown">
\t \t \t <li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
\t \t \t </ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
\t \t \t \t \t </div>
</div>それは768pxの画面サイズに取り組んでいるが、私は以上の768の画面サイズに代わりホバーのドロップダウンリンクをクリックしたとき、リンクドロップダウンスライドトグルです。私は、特定の幅だけでこのスクリプトの作業が必要です。
ブラウザを768以上の解像度にリサイズすると、応答メニューの切り替え後、メニュー全体が非表示になります。 –
@MahmoodMohammed私は問題を解決...私の答えを参照してください:) – Chiller
ありがとうございます。それは正常に動作しています。 –