menu Fix dans le menu réactif .. css/jquery

Question

J'utilise flaunt.js (Original Source, mais ont modifié le css initial et html.

J'ai enlevé les styles de classe de ul et li il utilise juste Mais pour une raison quelconque, quand je vais dans le mobile .. il montre le bouton 3 lignes de menu sur ma page locale, mais quand je clique dessus ... les choses ne fonctionnent pas comme ils le font sur la source.

Je ne peux pas voir le menu correctement .. Je ne peux pas voir la flèche pour montrer qu'il y a une liste déroulante

Si quelqu'un pourrait aider

grâce

<nav class="nav"> 
    <ul> 
     <li> 
      <a href="?=home">Home</a> 
      <ul> 
       <li > 
        <a href="?=submenu-1">Submenu item 1</a> 
       </li> 
       <li > 
        <a href="?=submenu-2">Submenu item 2</a> 
       </li> 
       <li > 
        <a href="?=submenu-3">Submenu item 3</a> 
       </li> 
       <li > 
        <a href="?=submenu-4">Submenu item 4</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="?=about">About</a> 
     </li> 
     <li> 
      <a href="?=services">Services</a> 
      <ul> 
       <li > 
        <a href="?=submenu-1">Submenu item 1</a> 
       </li> 
       <li > 
        <a href="?=submenu-2">Submenu item 2</a> 
       </li> 
       <li > 
        <a href="?=submenu-3">Submenu item 3</a> 
       </li> 
       <li > 
        <a href="?=submenu-4">Submenu item 4</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="?=portfolio">Portfolio</a> 
     </li> 
     <li > 
      <a href="?=testimonials">Testimonials</a> 
     </li> 
     <li> 
      <a href="?=contact">Contact</a> 
     </li> 
    </ul> 
</nav> 

Fiddle

Answer 1

vous avez supprimé HTML nécessaire et n'ont pas compensé que dans les JS

JS original:

 // Append the mobile icon nav 
     $('.nav').append($('<div class="nav-mobile"></div>')); 

     // Add a <span> to every .nav-item that has a <ul> inside 
     $('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>'); 

Votre JS modifié:

 // Append the mobile icon nav 
     $('.nav').append($('<div class="nav-mobile"></div>')); 

     // Add a <span> to every .nav-item that has a <ul> inside 
     $('.nav').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>'); 

Voir comment votre sélecteur cible le .nav sur les deux lignes? C'est ajouter la durée à un endroit auquel le reste du script ne s'attend pas. Dans votre JS pour redéfinir le sélecteur sur .nav-item et ajouter la classe .nav-item au niveau racine <li> s.

Vous aurez aussi besoin de changer:

// Dynamic binding to on 'click' 
$('ul').on('click', '.nav-click', function(){ 

Pour:

// Dynamic binding to on 'click' 
$('.nav-list').on('click', '.nav-click', function(){ 

Il y a plus d'un <ul> dans votre balisage, de sorte que votre couverture liant le clic pour <ul> perturbe les choses aussi.

EDIT: HTML, CSS et JS modifiés: http://jsfiddle.net/xtt3j/. Je ne sais pas pourquoi vous êtes si désireux de tout faire sans toutes les classes. Je suis tout à propos de réduire le balisage, mais j'ai l'impression que cela va être plus difficile à maintenir (ou juste envelopper votre tête). Et enfin, la flèche ne s'affichera dans aucun de ces Fiddles car c'est une image.

Answer 2

J'ai modifié votre code d'exemple sur http://jsfiddle.net/WdN8J/10/. Dans Chrome, il existe un décalage de remplissage initial, donc je mets -webkit-padding-start: 0px.Le conflit est que votre navigation déroulante a une position absolue:

.nav ul > li > ul { 
display:none; 
position:absolute; 
left:0; 
width:180px; 
} 

J'ajouté la ligne suivante dans l'action de clic:

bien

$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});