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

Mise en page CSS Discussion :

Modifier code css d'un menu


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Femme Profil pro
    Inscrit en
    Novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2013
    Messages : 7
    Par défaut Modifier code css d'un menu
    Bonjour à toutes et à tous,

    Voilà, je suis en train de faire un site avec Joomla 2.5, et le template MaxGaming TG que l'on peut modifier.
    Je travaille pour l'instant en local du coup je ne peux pas envoyer de lien, ni d'url d'image en exemple...

    Mon problème est simple: ce template offre un menu principal horizontal avec les sous-menu qui apparaissent en liste verticale au passage de la souris.
    J'aimerais moi que les sous menus s'ouvre en menu horizontal également, et restent visibles une fois le menu cliqué. Exemple: http://www.lepoint.fr/
    Comme vous pouvez le voir, une fois qu'on a cliqué sur le niveau 1 du menu horizontal, le sous-menu s'affiche de manière horizontale en dessous, et reste ouvert tant qu'on est sur la page de ce menu (par contre l'effet drop down en liste au passage de la souris ne concerne pas ma demande).

    J'ai essayé de faire plein de modifs dans le css, mais je dois être tâche sur un truc, car rien de fonctionne....

    Voici le code source du menu concerné:
    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
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <div id="nav">
    <div id="nav-left">
     
    <ul class="menu">
      <li class="item-435"><a href="/" >Accueil</a></li>
      <li class="item-469"><a href="/index.php/qui-sommes-nous" >La société</a></li>
      <li class="item-470 active deeper parent"><a href="#" >Produits neufs</a>
      <ul>
      <li class="item-473 current active"><a href="/index.php/equipements-neufs/capteur-plan" >Capteur Plan</a></li>
      <li class="item-474"><a href="/index.php/equipements-neufs/generateur-rx" >Générateur RX</a></li>
      <li class="item-475"><a href="/index.php/equipements-neufs/radiologie-numerique" >Salle de radiologie</a></li>
      </ul>
      </li>
      <li class="item-471 deeper parent"><a href="#" >Produits d'occasion</a>
      <ul>
      <li class="item-489"><a href="/index.php/equipements-d-occasion/echographes" >Echographie</a></li>
      <li class="item-490"><a href="/index.php/equipements-d-occasion/radiologie-d-occasion" >Radiologie</a></li>
      <li class="item-487"><a href="/index.php/equipements-d-occasion/systemes-de-numerisation" >Numérisation radiologie</a></li>
      </ul>
      </li>
      <li class="item-472"><a href="/index.php/contact" >Contacts</a></li>
      </ul>
    </div>
    </div>

    Et mon code css:
    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
    18
    19
    20
    21
    22
    /* Navigation */
    #nav {}
    #navl {}
    #navr {height:40px; background:url(../images/mainmenu.png) 0 0 repeat-x; font-family: 'Cuprum', sans-serif; font-size:15px; margin-top: 5px;margin-top: -4px;margin-left:15px;margin-right:15px;}
    #nav {z-index:10; position:relative;}
    #nav-left { float:left; width:80%;}
    #nav-right { float:right; width:20%;}
    #nav ul {margin:0; padding:0; float:left;}
    #nav ul li {list-style:none;float:left;height:100%;position:relative; padding:0; margin:0;}
    #nav ul li a { display:block;padding:0 15px 0 15px; margin:0; line-height:40px; color:#fff; text-decoration:none;font-size:18px;font-weight:bold;}
    #nav ul li.active {}
    #nav ul li.active a {background:#f1f1f1; repeat center; color:#ff6700;}
    #nav ul li:hover {}
    #nav ul li a:hover{ text-decoration:none; font-weight:bold; font-size:18px; background:#f1f1f1; repeat center; color:#ff6700;}
    #nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
    #nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
    #nav ul li ul li {padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}
    #nav ul li ul li:hover ul {left:180px; top:0}
    #nav ul li:hover ul li a {text-shadow:none;}
    #nav ul li:hover ul li { background:none;}
    #nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#f1f1f1;/*border-bottom:1px solid #3a3a3a*/;color:#555555; font-size:15px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;}
    #nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: left; padding:0 0 0 10px;height:24px;line-height:24px;background:#f1f1f1;color:#000000; font-weight : bold;font-size:15px;text-shadow:none;}
    JE sais que c'est un peu triché, car via Joomla, mais je coince. Quelqu'un pourrait m'aider ??

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #nav ul li ul { position:absolute; width:540px; /* = (3 x 180px) pour 3 sous-menus */ 
    ...................... }
    #nav ul li ul {float:left; 
    ...................... }

    On peut aussi les positionner par rapport au ul (et pas au li) parent :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #nav ul {position:relative;
    ...................... }
    #nav ul li {/*SUPPRIMER position:relative;*/
    ...................... }
     
    #nav ul li ul {position:absolute; width:100%; /* 100% du parent*/  
    ...................... }
    #nav ul li ul {float:left; 
    ...................... }

  3. #3
    Membre du Club
    Femme Profil pro
    Inscrit en
    Novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2013
    Messages : 7
    Par défaut
    Ouahou,

    C'est exactement ce que je souhaitais faire !
    Merci infiniment ! ça avait l'air si simple...

    C'est l'option en choisissant le positionnement par rapport au ul que je voulais en plus.

    Trop contente, MERCI

  4. #4
    Membre du Club
    Femme Profil pro
    Inscrit en
    Novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2013
    Messages : 7
    Par défaut
    Bon finalement il y a encore un petit hic
    Voici mon code concernant ce menu, modifié avec ton aide:
    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
    18
    19
    20
    21
    22
    23
    24
    /* Navigation */
    #nav {}
    #navl {}
    #navr {height:40px; background:url(../images/mainmenu.png) 0 0 repeat-x; font-family: 'Cuprum', sans-serif; font-size:15px; margin-top: 5px;margin-top: -4px;margin-left:15px;margin-right:15px;}
    #nav {z-index:10; position:relative;}
    #nav-left { float:left; width:100%;}
    #nav-right { float:right; width:0%;}
    #nav ul {margin:0; padding:0; float:left; position:relative;}
    #nav ul li {list-style:none;float:left;height:100%;padding:0; margin:0;}
    #nav ul li a { display:block;padding:0 15px 0 15px; margin:0; line-height:40px; color:#fff; text-decoration:none;font-size:18px;font-weight:bold;}
    #nav ul li.active {}
    #nav ul li.active a {background:#f1f1f1; repeat center; color:#ff6700;}
    #nav ul li:hover {}
    #nav ul li a:hover{ text-decoration:none; font-weight:bold; font-size:18px; background:#f1f1f1; color:#ff6700;}
    #nav ul li ul {position:absolute; width:100%;left:-999em;border-top:0; margin:0; padding:0; float:left;}
    #nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
    #nav ul li ul li {padding:0;height:auto;width:200px; margin:0 auto; border:none; text-align: center;}
    #nav ul li ul li:hover ul {left:180px; top:0}
    #nav ul li:hover ul li a {text-shadow:none;}
    #nav ul li:hover ul li { background:none;}
    #nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:35px;line-height:35px; background:#f1f1f1;/*border-bottom:1px solid #3a3a3a*/;color:#555555; font-size:15px;font-weight:bold;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;}
    #nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: center; padding:0 0 0 10px;height:35px;line-height:35px;background:#f1f1f1;color:#000000; font-weight : bold;font-size:15px;text-shadow:none;}
    #nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}
    #nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}
    Le sous-menu s'ouvre impecc, sous forme d'un "bandeau" avec une couleur en background, aligné à gauche, sur le "bandeau" du menu principal, il s'ouvre en horizontal parfaitement, mais par contre, il ne va pas jusqu'au bout à droite du bandeau du menu principal....

    J'ai mis une photo en pièce jointe pour bien illustrer....J'ai essayé des trucs depuis ce matin mais je dois être très quiche aujourd'hui, je n'y arrive pas...

    Une inspiration ?
    Images attachées Images attachées  

  5. #5
    Invité
    Invité(e)
    Par défaut
    Il faut aussi mettre le background sur le ul :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    #nav ul li ul {............. background:#f1f1f1;}

  6. #6
    Membre du Club
    Femme Profil pro
    Inscrit en
    Novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2013
    Messages : 7
    Par défaut
    Rah j'avais pas pensé à ça...
    Merci .

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Besoin d'aide pour modifier css d'un menu via js
    Par axorama dans le forum jQuery
    Réponses: 14
    Dernier message: 31/08/2010, 15h48
  2. Modifier le code CSS en JavaScript
    Par EIN-LESER dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 15/11/2008, 16h20
  3. Code css Menu mise en évidence
    Par Katachana dans le forum Mise en page CSS
    Réponses: 13
    Dernier message: 21/09/2007, 14h07

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