Forum : Menu, CSS et jQuery, un truc qui cloche !

Bonsoir tout le monde,

Je réalise en ce moment mon site personnel dont voici le menu principal :

<ul id="menu">
     <li><a class="active" href="index.php">LA HOME</a></li>
     <li><a href="profil.php">MON PROFIL</a></li>
     <li><a href="contact.php">CONTACTEZ-MOI</a></li>
</ul>

Ce menu est affiché via un include php afin de ne pas le répéter sur tout les pages de mon site.

Le comportement que je tente en vain d'obtenir est le suivant :
Je veux qu'a chaque clique sur un lien (par exemple ''MON PROFIL"), la classe css "active" se déplace sur le lien "MON PROFIL"

J'ai pensé qu'utiliser jQuery était la solution la plus approprié pour arriver à un résultat satisfaisant.

$("#menu a.active").click(function(){
   $("#menu a.active").removeClass("active");
   $(this).addClass("active");
 });

Cependant cela ne fonctionne pas du tout et étant à cour d'idée, je me tourne vers vous pour solliciter votre aide.

Cordialement,

Adel

djtec

Réponse acceptée

Essaye ça:

<?php
$pageCurrent = substr(basename($_SERVER'PHP_SELF']), 0, -4);
?>
<ul>
    <li><a href="#" <?php echo ($pageCurrent == 'index') ? 'class="active"' : ''; ?>>Home</a></li>
    <li><a href="#" <?php echo ($pageCurrent == 'profil') ? 'class="active"' : ''; ?>>Mon profil</a></li>
    <li><a href="#" <?php echo ($pageCurrent == 'contact') ? 'class="active"' : ''; ?>>Contact</a></li>
</ul>

djtec

Se serait plutôt:

$("#menu a").click(function(){

   $("#menu a").removeClass("active");

   $(this).addClass("active");

 });

Adel

Auteur

Bonsoir djtec

La classe "active" se déplace bien sur les bouton "MON PROFIL" ou "CONTACTEZ-MOI" au moment du clic mais elle reviens aussitôt sur le bouton "LA HOME".

Adel

djtec

Et ça:

$("#menu li a").click(function(){

   $("#menu li a").removeClass("active");

   $(this).addClass("active");

 });

Adel

Auteur

ça ne fonctionne pas non plus.

Je ne suis pas expert en jQuery loin de là mais ne peux-t-on pas initialiser une variable pour chaque page ?

djtec

Le problème se sont tes liens car vu que tu change de page le script repart de zéro donc essaye ceci:

var page = 'lenomdetapage'; // Genre: home, profil, contact

    $("#"+page).addClass("active");

    $("#menu li a").click(function(){

        $("#menu li a").removeClass("active");

        $(this).addClass("active");
    });

Et ton menu:

<ul id="menu">
     <li><a id="home" href="">LA HOME</a></li>
     <li><a id="profil" href="">MON PROFIL</a></li>
     <li><a id="contact" href="">CONTACTEZ-MOI</a></li>
</ul>

Adel

Auteur

le code jQuery se trouve dans un header.php qui est lui même un include

djtec

Tu peux me donner un exemple de ta structure stp car je comprends pas trop dsl

Adel

Auteur

oui voici la structure initial :

<?php
$pageencours = "index";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Adel Kamel - Portfolio</title>
        <link rel="icon" type="image/png" href="img/gen/favicon.png"/>
        <link href="css/gen.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="css/tweet.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="css/ui.totop.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="css/vignettes.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="css/wowslideshow.css" rel="stylesheet" type="text/css" media="screen"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/tweet.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript" src="js/btn_effect.js"></script>
        <script type="text/javascript" src="js/navigation.js"></script>
        <script type="text/javascript" src="js/jquery.ui.totop.js"></script> 
        <script type="text/javascript" src="js/jquery.quovolver.js"></script>    
        <script type="text/javascript">
            $(document).ready(function() {
                $('#twitter').derniersTweets({
                    username: 'adel_kamel',
                    count: 1,
                    show_image: false,
                    set_image_size: 30
                });
                $('blockquote').quovolver();
                var defaults = {
                    containerID: 'moccaUItoTop', // fading element id
                    containerHoverClass: 'moccaUIhover', // fading element hover class
                    scrollSpeed: 1200,
                    easingType: 'linear' 
                };  
        $().UItoTop({ easingType: 'easeOutQuart' });
            });
        </script>
    </head>
    <body>
            <h1><a href="index.php"><img src="img/gen/logo.jpg" alt="Adel Kamel - Portfolio" title="Mes expériences professionnelles"/></a></h1>
            <div id="general">
                <a href="http://fr.twitter.com/#!/adel_kamel" target="_blank" title="Suivez-moi sur Twitter"><ul id="twitter"></ul></a>
                <ul id="menu">
                    <li><a <?php if($pageencours=="index") print "class='active'";?> href="index.php">LA HOME</a></li>
                    <li><a <?php if($pageencours=="profil") print "class='active'";?> href="profil.php">MON PROFIL</a></li>
                    <li><a <?php if($pageencours=="contact") print "class='active'";?> href="contact.php">CONTACTEZ-MOI</a></li>
                </ul>

djtec

Et bien il te reste plus qu'à faire une fonction qui récupère la page dans l'url puis de la transmettre à jQuery.

Pour moi cela te sert à rien la fonction jQuery car ton site n'est pas ajax donc à chaque changement de page tu recharge la page donc Php suffit.

Adel

Auteur

d'accord mais je ne saurais pas écrire cette fonction dont tu parles :(

djtec

regarde sur google

Adel

Auteur

J'ai copié exactement ce que tu as écris dans mon header.php cependant ça ne fonctionne pas, la classe "active" ne s'affiche même plus sue le bouton "LA HOME"

djtec

Ne met pas de jQuery pour ton menu fait le uniquement avec php

Adel

Auteur

j'avoue ne plus comprendre

djtec

Je t'ai dit si ton site n'est pas en ajax jQuery te sert à rien car ton header est rechargé à chaque changement de page donc il faut que tu le fasse que en php

Adel

Auteur

oui ça j'avais saisie, en faite ma question est comment faire

djtec

Comment sont tes url

Adel

Auteur

comme ceci :

<ul id="menu">
    <li><a class="active" href="index.php">LA HOME</a></li>
    <li><a href="profil.php">MON PROFIL</a></li>
    <li><a href="contact.php">CONTACTEZ-MOI</a></li>
</ul>

Adel

Auteur

ça marche nickel je te remercie :))))

djtec

De rien bonne fin de soirée

Menu, CSS et jQuery, un truc qui cloche !

21 réponses