CSS – personalisation – menu secondaire – sous menus de ce dernier

Présentation du Kit Web du CNRS Forums Utilisation du Kit Web CNRS CSS – personalisation – menu secondaire – sous menus de ce dernier

Ce sujet a 5 réponses, 4 participants et a été mis à jour par  NOU Stéphane, il y a 6 mois et 2 semaines.

6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #1041

    stéphane
    Participant

    Bonsoir

    Nous aimerions modifier la largeur du « sous menu » du « menu secondaire » à partir du CSS. A ce jour nous avons réussi à modifier la largeur (position) du « menu secondaire » pas de ces « sous-menus ».
    Pourriez-vous nous donner le nom du fichier CSS concerné et les lignes de code correspondantes ???
    En vous remerciant par avance, cordialement

    #1111

    Seguinot Christophe
    Participant

    Bonjour

    Pour modifier le css, j’utilise du css personnaliser à renseigner sur la page: apparence/CSS PErsonalisé
    J’ai modifié les menus pour pouvoir utiliser plusieurs niveaux, et les sous menu à droite de leur parent. Le résultat n’est pas optimal et mériterait une amélioration pour un usage au delà de 2 niveaux.

    Cordialement

    /* Secondary menu
    Modified for using multi level menus
    TODO when using too much levels, last sub levels extand outside window !!
    TODO check Language switcher when using several languages
    */

    ul.sub-menu {
    width: 150px;
    font-size:15px;
    }

    header.site-header #site-header-menu nav#secondary-navigation .sub-menu li > a
    {
    font-size:15px;
    }

    /* impose fixed width for sub menu items (not for 1st level items)*/

    .main-navigation ul ul li > ul {
    left: -999em;
    right: auto;
    }

    /* put Second level menu left aligned to its parent */

    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul {
    left: 25px;
    }

    /* put sub menu toggled item to the right of their parent */

    .main-navigation ul ul li:hover > ul,
    .main-navigation ul ul li:focus > ul {
    left: 150px;
    }

    /* Change ^ character orientation from +90 to -90 deg*/

    .main-navigation ul ul .menu-item-has-children > a:after {
    right: 0.5625em;
    top: 0.875em;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }

    a:hover:after {
    font-weight: bolder;
    }

    header.site-header #site-header-menu ul li:last-of-type a {
    padding: 0 25px 0 25px;
    }

    header.site-header #site-header-menu ul li:first-of-type a {
    padding: 0 25px 0 25px;
    }

    .secondary-menu .menu-item-has-children > a::after {
    right: 0px !important;
    }

    .main-navigation ul ul li {
    background-color: #f5f5f5;
    }

    .main-navigation ul ul li a {
    width: auto;
    padding: 0 25px 0 5px !important;
    }

    .main-navigation ul ul::after {
    content: none;
    }

    #1129

    stéphane
    Participant

    Merci bien M. Seguinot, je vais tester ça, cordialement

    #6451

    Chalvignac Greg
    Participant

    Atos ont vraiment codé ça avec les pieds… Je paris que le CNRS a encore voulu faire des « économies ».

    Merci Christophe pour ce menu

    #7619

    NOU Stéphane
    Participant

    Bonjour,

    Un grand merci Monsieur Seguinot, c’est exactement ce que je cherchai !

    Votre personnalisation CSS fonctionne très bien, cependant dans le cadre d’un site multilangues, je perds la couleur du texte des items du menu, auriez-vous une idée ?

    Merci encore

    Stéphane NOU

    #7621

    NOU Stéphane
    Participant

    Edit:
    Vous avez résolu le problème de la perte du style du menu dans le cas d’un changement de langue dans ce POST mais malheureusement les fichiers ne sont plus disponibles…

6 sujets de 1 à 6 (sur un total de 6)

Vous devez être connecté pour répondre à ce sujet.