IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Styliser le lien d'un menu de la page d'accueil


Sujet :

JavaScript

  1. #21
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 075
    Points : 44 657
    Points
    44 657
    Par défaut
    J'ai bien précisé que 'était pour l'exemple, si l'on veux faire la même chose en récupérant le fichier il faut donc utiliser document.location.href.

    Le code de récupération devient
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var sRef=document.location.href.split('/');
    sRef = sRef[sRef.length-1] || 'index.html';
    comme précisé plus haut, et la recherche s’effectue de la même façon
    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
      var oMenu = document.getElementById('menu');
      // recup des liens
      var oLien = oMenu.getElementsByTagName('a');
      // parcours des liens
      for( var i=0, nb=oLien.length; i<nb; i++){
        // si contient le paramatre
        if( oLien[i].href.indexOf( sRef) > -1){
          //affecte la class au parent
          oLien[i].parentNode.className = "lien_inactif";
          // desative le lien à l'emporte pièces
          oLien[i].parentNode.innerHTML = oLien[i].innerHTML
          // on quitte
          break;
        }
      }
    les liens du menu sont évidement à modifier du type
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <ul id ="menu">
      <li><a href="index.html">Accueil</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="news.html">Toutes les news</a></li>
    </ul>
    par exemple.

    La partie script est à mettre dans toutes les pages, privilégies un fichier JS autonome.

  2. #22
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Merci à tous pour votre aide.

  3. #23
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 075
    Points : 44 657
    Points
    44 657
    Par défaut
    Est ce utile d'avoir recours à cela, n'est ce pas plus simple de le faire à la main dans chaque fichier?

    Une alternative, à l'instar de l'include du PHP, serait de créer entièrement ton menu DOMesquement au chargement de la page.

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. position idéale pour placer un menu dans une page d'accueil
    Par Smix007 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 01/02/2007, 12h14
  2. Les liens de mon menu ne fonctionnent pas
    Par macapa dans le forum Dreamweaver
    Réponses: 3
    Dernier message: 03/01/2007, 18h43
  3. problème de lien dans un menu déroulant
    Par diarise dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 09/11/2006, 21h58
  4. affichage des liens d'un menu
    Par micknic dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 28/08/2006, 21h19
  5. Réponses: 5
    Dernier message: 22/07/2006, 16h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo