Je veux faire de la barre de navigation mais je suis débutant dans jQuery.Navbar redimensionnable dans jQuery
Pour la résolution 768px et plus j'ai fait le menu qui apparaît en vol stationnaire du curseur sur (via les requêtes des médias en CSS).
D'autre part, pour moins de 768px résolution I fait le menu qui apparaît après un clic (via jQuery).
Voici un code:
$(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>Le problème est que quand j'ouvre le site moins de 768px tout fonctionne très bien, mais la largeur après redimentionnée à 768px + il ne fonctionne pas. La même chose arrive quand je l'ouvre pour la première fois sur une largeur de 768px + et que je la redimensionne à une résolution plus basse.
Je sais qu'il ya une fonction Resize() en jQuery, mais je lis qu'il est pas recommandé. Je suis sûr qu'il y a une solution facile à mon problème, mais je ne l'ai pas trouvé. Comment puis-je le réparer? Aidez-moi, s'il vous plaît. Je serais également greteful si quelqu'un peut me donner un lien vers un script avec navbar que je veux.
Si cela fonctionne bien, quel est votre problème? Dans des situations comme celle-ci, mettez-vous dans une situation réelle. Est-ce que le menu fonctionne bien sur mobile? Cela fonctionne-t-il bien sur le bureau? Personne ne va redimensionner votre page lors de la navigation JUST pour voir si le menu se brise - personne ne change la taille de son navigateur lors de la navigation sur une page web! –