Discussion :

[Braxxx]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

.responsive_nav {display: block;}

Et enfin pour finir les fonctions jquery lié à ce menu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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