J'utilise le menu déroulant superfish avec le framework skelton. Je voulais aussi que cela fonctionne sur les mobiles. Par défaut, il affiche les éléments de liste déroulante, mais il survole les éléments situés en dessous. Je veux l'avoir d'une manière telle qu'elle pousse les éléments parents en dessous. Toute solution?Comment rendre le menu déroulant Superfish réactif?
Répondre
Mise à jour: Voir la réponse par Ryan Brackett
menus déroulants ne fonctionnent pas bien sur les mobiles. Je suggère de cacher le menu superfish sur mobile et de le remplacer par autre chose.
Ressources: Off toile
http://www.lukew.com/ff/entry.asp?1569
http://www.zurb.com/playground/off-canvas-layouts
modèles de navigation mobile
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Pour les autres utilisateurs qui recherchent une solution, assurez-vous d'utiliser la toute dernière version de jQuery. J'ai eu quelques sites plus anciens où j'ai trouvé en utilisant une version plus récente de jQuery fait fonctionner les menus Superfish sur les appareils mobiles.
est ici une meilleure réponse
j'ai pu convertir le même code HTML pour Superfish dans un menu de tiroir réactif. Le JS est ultra simple et le tout est essentiellement fait en utilisant CSS. Regardez-le et laissez-moi savoir ce que vous en pensez!
// TRIGGER ACTIVE STATE
$('#mobnav-btn').click(
function() {
$('.sf-menu').toggleClass("xactive");
});
// TRIGGER DROP DOWN SUBS
$('.mobnav-subarrow').click(
function() {
$(this).parent().toggleClass("xpopdrop");
});
body {
font-family: Arial;
font-size: 12px;
padding: 20px;
}
#mobnav-btn {
display: none;
font-size: 20px;
font-weight: bold;
background-color: blue;
color: white;
padding: 10px;
cursor: pointer;
}
.mobnav-subarrow {
display: none;
}
@media only screen and (max-width: 480px) {
#mobnav-btn {
display: block;
}
.mobnav-subarrow {
display: block;
background-color: #0f3975;
opacity: .3;
border-bottom: 1px solid white;
border-top: 1px solid black;
height: 20px;
width: 30px;
background-position: top left!important;
position: absolute;
top: 8px;
right: 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.sf-menu {
width: 100%!important;
display: none;
}
.sf-menu.xactive {
display: block!important;
}
.sf-menu li {
float: none!important;
display: block!important;
width: 100%!important;
}
.sf-menu li a {
float: none!important;
}
.sf-menu ul {
position: static!important;
display: none!important;
}
.xpopdrop ul {
display: block!important;
}
}
<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" rel="stylesheet" />
<small>This is a responsive Superfish Menu by <a href="mailto:[email protected]">Ryan Brackett</a>. <br/>
<br/>In this demo, you can drag the middle bar to see the responsive menu. I have already included the default css and js files for Superfish</small>
<br/>
<br/>
<div id="mobnav-btn">Button</div>
<ul class="sf-menu">
<li><a href="#">Item 1</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 1.1</a>
</li>
<li><a href="#">Subitem 1.2</a>
</li>
<li><a href="#">Subitem 1.3</a>
</li>
<li><a href="#">Subitem 1.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 2</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 2.1</a>
</li>
<li><a href="#">Subitem 2.2</a>
</li>
<li><a href="#">Subitem 2.3</a>
</li>
<li><a href="#">Subitem 2.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 3</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 3.1</a>
</li>
<li><a href="#">Subitem 3.2</a>
</li>
<li><a href="#">Subitem 3.3</a>
</li>
<li><a href="#">Subitem 3.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 4</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 4.1</a>
</li>
<li><a href="#">Subitem 4.2</a>
</li>
<li><a href="#">Subitem 4.3</a>
</li>
<li><a href="#">Subitem 4.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 5</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 5.1</a>
</li>
<li><a href="#">Subitem 5.2</a>
</li>
<li><a href="#">Subitem 5.3</a>
</li>
<li><a href="#">Subitem 5.4</a>
</li>
</ul>
</li>
<li><a href="#">Item 6</a>
<div class="mobnav-subarrow"></div>
<ul>
<li><a href="#">Subitem 6.1</a>
</li>
<li><a href="#">Subitem 6.2</a>
</li>
<li><a href="#">Subitem 6.3</a>
</li>
<li><a href="#">Subitem 6.4</a>
</li>
</ul>
</li>
</ul>
C'est ce que j'utilise:
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
$(".menu a").click(function(event){
if($(this).parents("ul").length == 1 && !$(this).hasClass("lastClick") && isMobile)
event.preventDefault();
$(".menu a").removeClass("lastClick");
$(this).addClass("lastClick");
});
Remplacer ".menu un" avec vos liens de navigation et cet extrait naviguera l'utilisateur sur le site cliqué après la seconde cliquez et le premier clic ne lui montrera que les sous-pages.
Hé mec, pouvez-vous JSfiddle cela pour nous? –
Reshad: changer simplement votre CSS comme ceci:
.xpopdrop > ul {
display: block!important;
}
Et vous serez bien.
Comme Ed a souligné qu'il semble difficile de résoudre tous les problèmes différents superfish/css pour un menu réactif. Après avoir parcouru les options ici et ailleurs, j'ai trouvé un menu responsive Pure CSS qui a été plus rapide et plus facile à modifier que superfish, et n'a pas les frais généraux de jquery ou javascript. Il a également des menus de second niveau.
j'ai vérifié avec the demo screenfly pour vérifier la réactivité et la mise en page mobile avant de l'utiliser. La version CSSscript.com (lien ci-dessus) donne une mise en page réactive horizontale pour les mobiles, contrairement à la page de démo codepen.
Le code est dans un seul fichier HTML que vous pouvez facilement diviser en un fichier CSS lié, seulement 2 requêtes des médias gérer les changements sensibles et même seulement avec des changements minimes. Les symboles '+' peuvent être supprimés sans problème.
Un seul petit inconvénient: le premier lien télécharge un HTML a un javascript au fond ajoutant un suivi évident google analytics, facilement enlevé et non sur le codepen.
Explanationauthor andor nagy - code from codepen
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
\t background: #212121;
\t font-size:22px;
\t line-height: 32px;
\t color: #ffffff;
\t word-wrap:break-word !important;
\t font-family: 'Open Sans', sans-serif;
\t }
h1 {
\t font-size: 60px;
\t text-align: center;
\t color: #FFF;
} \t
h3 {
\t font-size: 30px;
\t text-align: center;
\t color: #FFF;
}
h3 a {
\t color: #FFF;
}
a {
\t color: #FFF;
}
h1 {
\t margin-top: 100px;
\t text-align:center;
\t font-size:60px;
\t font-family: 'Bree Serif', 'serif';
\t }
#container {
\t margin: 0 auto;
\t max-width: 890px;
}
p {
\t text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
} \t
nav {
\t margin: 50px 0;
\t background-color: #E64A19;
}
nav ul {
\t padding:0;
\t margin:0;
\t list-style: none;
\t position: relative;
\t }
\t
nav ul li {
\t display:inline-block;
\t background-color: #E64A19;
\t }
nav a {
\t display:block;
\t padding:0 10px; \t
\t color:#FFF;
\t font-size:20px;
\t line-height: 60px;
\t text-decoration:none;
}
nav a:hover {
\t background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
\t display: none;
\t position: absolute;
\t top: 60px;
}
\t
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
\t display:inherit;
}
\t
/* Fisrt Tier Dropdown */
nav ul ul li {
\t width:170px;
\t float:none;
\t display:list-item;
\t position: relative;
}
/* Second, Third and more Tiers \t */
nav ul ul ul li {
\t position: relative;
\t top:-60px;
\t left:170px;
}
\t
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
<div id="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Tutorials</a>
\t <!-- Second Tier Drop Down -->
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Other</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Other Stuff</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign (+)</p>
<p>Read tutorial <a target="_blank" href="http://webdesignerhut.com/css-dropdown-menu/">here</a></p>
</div>
Cela méconnaît complètement le point du menu Superfish, qui lui-même commence à partir d'un menu déroulant "pure CSS" et l'améliore. – DisgruntledGoat
vous devriez inclure le CSS et le HTML de la démo avec une mise en page adaptée. Pas le codepen ne répond pas – Toskan
Merci pour l'info - juste de répondre à la question spécifique sur Superfish. –
- 1. Menu déroulant Hamburger Réactif
- 2. Je veux utiliser le menu vertical de Superfish Réactif
- 3. menu déroulant superfish affichant sous div dessous
- 4. superfish menu déroulant sur Google Earth plugin
- 5. Comment réparer le menu déroulant réactif en utilisant css?
- 6. Menu déroulant réactif ne fonctionne pas
- 7. Le menu déroulant de Superfish ne s'affiche pas dans IE6
- 8. UI.tabs avec menu Superfish
- 9. Comment rendre mon menu déroulant plus large?
- 10. Problèmes après la personnalisation du menu déroulant Superfish
- 11. Rendre le texte réactif
- 12. Comment rendre flexbox réactif?
- 13. Comment modifier le contenu du menu Superfish?
- 14. jQuery superfish menu: curseur numéro
- 15. superfish menu sous-menu centré
- 16. Superfish menu couleur?
- 17. Problème de navigation dans un menu déroulant réactif
- 18. menu vertical superfish
- 19. En-tête réactif avec menu déroulant: hauteur et débordement
- 20. Comment rendre le papier jointjs réactif?
- 21. Comment rendre l'abonnement météore réactif?
- 22. Comment rendre un bouton réactif?
- 23. comment implémenter le menu déroulant
- 24. Menu Superfish dans WordPress Requêtes
- 25. jQuery Superfish menu et SEO
- 26. Menu Jquery Superfish - Comment glisser vers le haut?
- 27. Cufon Superfish cacher le texte déroulant dans IE8
- 28. Compactage jQuery Menu déroulant Code
- 29. Obtenir le menu déroulant
- 30. le menu déroulant Largeur
Bon exemple. Mise à jour ma réponse pour diriger les utilisateurs ici. –
Est-il possible d'utiliser 3 couches pour le menu au lieu de 2? – Reshad