Bonjour alors voilà pour commencer je tiens a préciser que le code que je vais montrer n'est pas de moi j'avoue je l'ai recopié j'aimerais y faire quelques modifs pour qu'il soit ajuster à mes besoins.
Alors voilà sur mon site j'ai un menu responsive qui s'affiche si ma page est réduite d'au moins 50%. Donc mon menu responsive s'affiche bien aucun problème, seul soucis quand je clique sur l'un des onglet du menu les liens href de marche pas. Voici le code ci-dessous pour plus de détails
Alors voici le code du menu
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <div class="responsive_nav"> <ul> <li class="open"> <a href="#">Menu</a> <ul> <li><a href="index.php?action=accueil">Accueil </a></li> <li><a href="index.php?action=gestionprojet">Gestion de Projets </a></li> <li><a href="index.php?action=realisation">Réalisations </a></li> <li><a href="index.php?action=forfait">Forfaits </a></li> <li><a href="index.php?action=soumission">Soumission </a></li> <li class="last"><a href="index.php?action=contact">Contact</a></li> </ul> </li> </ul> </div>
Voici le css de ce menu
Code:
1
2
3
4
5
6
7 .responsive_nav { display: none; } .responsive_nav ul { width: 100%; text-align: left; } .responsive_nav > ul > li { position: relative; background: #1f1f1f url("../images/responsive.png") no-repeat 90% center; } .responsive_nav > ul > li > a { padding: 14px 0 14px 20px !important;font: 16px 'dinpromedium',Times New Roman, Times, sans-serif;text-transform: uppercase; color: #fff; } .responsive_nav ul li a {padding: 10px 0px 10px 20px; display: block;font: 16px 'dinpromedium',Times New Roman, Times, sans-serif;text-transform: uppercase; color: #fff;} .responsive_nav li ul li a:hover { background: #017eba; } .responsive_nav ul li ul {z-index: 9999999; position: absolute; top: 39px; left: 0px; width: 100%; background: rgba(48,49,53,0.7); display: none;}
Le css responsive
Code:.responsive_nav {display: block;}
Et enfin pour finir les fonctions jquery lié à ce menu
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 function open_nav(){ $(".responsive_nav .open").click(function(e){ e.preventDefault(); $(this).children('ul').stop(true, true).slideDown(500); $(this).removeClass('open').addClass('close-nav'); close_nav(); }); } open_nav(); function close_nav(){ $(".responsive_nav .close-nav").click(function(e){ e.preventDefault(); $(this).children('ul').stop(true, true).slideUp(500); $(this).removeClass('close-nav').addClass('open'); open_nav(); }); }
PS : Je ne suis pas expert en jquery j'apprends petit à petit de mon côté je connais les bases mais sans plus.
Voilà vous avez tout le code nécessaire si quelqu'un à une solution à mon erreur je suis preneur :) merci d'avance cordialement Braxxx