0
navbarをやりたいですが、私はjQueryの初心者です。jQueryのサイズ変更可能なnavbar
解決策768px以上では、（CSSのメディアクエリを使用して）カーソルをホバーした後に開くメニューを作成しました。
一方、768px解像度以下では、クリック後（jQuery経由）に開くメニューを作成しました。ここで
コードです：
$(function() {
if ($(window).width() <= 768) {
$('ul').hide();
$('.navb').click(function() {
$('.main').slideToggle();
$('.main>li>ul').slideUp();
$('.main>li>ul>li>ul').slideUp();
});
$('.sub-1').click(function() {
$('.main>li>ul').slideToggle();
$('.main>li>ul>li>ul').slideUp();
});
$('.sub-2').click(function() {
$('.main>li>ul>li>ul').slideToggle();
});
}
});body {
background: gray;
font-size: 20px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
background: darkkhaki;
}
@media (min-width: 768px) {
ul li {
width: 100px;
}
}
a,
a:hover,
a:focus,
a:visited {
color: #000;
text-decoration: none;
}
a {
display: block;
}
a:hover {
background: orange;
}
.main {
text-align: center;
}
@media (min-width: 768px) {
.main > li {
vertical-align: top;
display: inline-block;
margin-left: -6px;
}
.main > li > ul {
display: none;
}
.main > li:hover > ul {
display: block;
}
.main > li > ul > li > ul {
display: none;
}
.main > li > ul > li:hover > ul {
display: block;
}
.main > li > ul > li {
position: relative;
}
.main > li > ul > li > ul {
position: absolute;
top: 0;
left: 100px;
}
}
@media (max-width: 768px) {
.main > li:first-child {
border-top: 1px solid gray;
}
}
.navb {
background: darkkhaki;
height: 45px;
cursor: pointer;
}
.navb span {
float: right;
font-size: 35px;
margin: 5px 5px 0 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="navb visible-xs">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</div>
<ul class="main">
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#" class="sub-1">Link 3<span class="glyphicon glyphicon-triangle-bottom"></span></a>
<ul>
<li><a href="#">Link 3.1</a>
</li>
<li><a href="#">Link 3.2</a>
</li>
<li><a href="#">Link 3.3</a>
</li>
<li><a href="#" class="sub-2">Link 3.4<span class="glyphicon glyphicon-triangle-right hidden-xs"></span><span class="glyphicon glyphicon-triangle-bottom hidden-sm hidden-md hidden-lg"></span></a>
<ul>
<li><a href="#">Link 3.4.1</a>
</li>
<li><a href="#">Link 3.4.2</a>
</li>
<li><a href="#">Link 3.4.3</a>
</li>
<li><a href="#">Link 3.4.4</a>
</li>
<li><a href="#">Link 3.4.5</a>
</li>
</ul>
</li>
<li><a href="#">Link 3.5</a>
</li>
</ul>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
<li><a href="#">Link 6</a>
</li>
</ul>
</div>
</div>問題は、私は以下768px幅すべてにウェブサイトを開いたときに素晴らしい作品が、それはない+後768pxにリサイズすることです。最初に768px + widthで開き、解像度を低くすると同じことが起こります。
jQueryにはresize（）関数がありますが、これはお勧めできません。私の問題のための簡単な解決策があると確信していますが、私はそれを見つけられませんでした。どうすれば修正できますか？私を助けてください。私は誰かが私が望むnavbarのスクリプトへのリンクを与えることができるなら、私はまた勇気づけられます。
すぎ
min-widthメディアクエリで、いくつかのCSSを追加する必要があり、あなたの問題は何ですか？このような状況では、現実世界の状況に身を置く。メニューはモバイルで正常に機能していますか？デスクトップで正常に動作しますか？誰もあなたのページのサイズを変更して、メニューが壊れているかどうかを確認することはありません。誰もWebページを閲覧するときにブラウザのサイズを変更しません。 –