Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Sous-menu dans la barre de navigation

866 appréciations
Hors-ligne
Bonjour,

Il est désormais possible d'ajouter un niveau de sous-menus à votre barre de navigation. La présentation de l'outil de personnalisation de la barre de navigation a été modifiée en conséquence pour accueillir cette fonctionnalité.







Pour les blogs utilisant le MasterDesign ou un RapidDesign hautement personnalisé, il faudrait très certainement faire quelques ajustements dans votre CSS.

Si vous êtes en MasterDesign et que les sous-menus n'apparaissent pas correctement, ajoutez le code CSS suivant à votre CSS : 

nav ul ul {
    float: none;
    position: absolute;
    display: none;
    background-color: inherit;
    margin: 0;
    padding: 0 20px;
    margin-left: -20px;
    padding-bottom: 10px;
}
nav li:hover ul {
    display: block !important;
}
nav ul ul li {
    display: block;
    white-space: nowrap;
}
nav ul .caret {
    margin: 18px 0 0 10px;
    border-width: 6px;
}


Voici les classes CSS à disposition pour le personnaliser :

La flèche indiquant qu'il s'agit d'un menu avec sous-menus :
nav .caret {
    /* Votre code CSS */
}


Le sous-menu en lui-même :
nav ul ul {
    /* Votre code CSS /
}


Pour tous les éléments du sous-menus que vous souhaiteriez personnaliser, il faudra précéder les éléments de la même chose que ci-dessus. Par exemple :

Pour la ligne du sous-menu :
nav ul ul li {
    /* Votre code CSS */
}


Pour le texte du sous-menu (lien) :
nav ul ul a{
    /* Votre code CSS */
}


N'hésitez pas à nous signaler toute anomalie.
Flora Maelyne
Responsable Blog4ever
Développeuse & Graphiste

614 appréciations
Hors-ligne
Merci beaucoup, c'est une excellente idée !
Très belle journée
Réseau BP

Merci B4E !

Cela fonctionne à merveille et c'est indéniablement un plus.

Bonne journée à vous !

712 appréciations
Hors-ligne


:b2: beaucoup !

Il y a du boulot pour appliquer ceci dans mon blog. Les premiers essais n'ont rien donné. Cela fait un bon bout de temps (des années) que je n'ai plus touché à tous ces codes .

:bye:

712 appréciations
Hors-ligne


ça m'a pris 6 heures, j'ai dû changer le système de design (du Master aujourd'hui trop compliqué pour moi, au Rapid plus abordable et agréable) et refaire tout le blog, mais à la fin je suis satisfait.

J'ai pu mettre une bonne base que je pourrai ajuster au fur et à mesure.

Merci encore pour la possibilité d'avoir les sous-menus.

:am:

97 appréciations
Hors-ligne
Bonjour,

Merci Maelranaidh pour la mise en place de cette nouvelle fonctionnalité, j'ai aussitôt essayé :



Seul problème c'est que le menu est décalé vers le bas par rapport aux autres menus de la barre de navigation et je n'arrive pas l'aligner.
:bye:

Philippe
Fluctuat Nec Mergitur

97 appréciations
Hors-ligne
Bonjour,

Sans rien toucher au CSS et alors que le master design reflète bien l'image ci-dessus, je découvre aujourd'hui ceci :



Qu'est ce qui se passe ?
Fluctuat Nec Mergitur

97 appréciations
Hors-ligne
C'est à ne rien y comprendre.
Je viens de retourner dessus et le blog est redevenu normal
Fluctuat Nec Mergitur

1335 appréciations
Hors-ligne
Bonsoir Gpm,

Je viens de me balader sur ton site à l'instant et je vois comme sur ta première capture d'écran.

Petite précision j'utilise google chrome.

Bonne soirée. Cordialement.  

866 appréciations
Hors-ligne
Bonsoir,

La navigation s'affiche normalement, si ce n'est le problème de décalage de l'élément "cartes".

Tu peux corriger ce problème en ajoutant la propriété "vertical-align: middle;" à la classe nav li dans ton CSS (c'est aux environs de la ligne 20, m'a-t-il semblé voir).
Flora Maelyne
Responsable Blog4ever
Développeuse & Graphiste

97 appréciations
Hors-ligne
Bonsoir Maelranaidh,

Merci pour le déblocage, ça marche.

Par contre cela ne fonctionne pas pour le moteur de recherche qui lui reste décalé 
Fluctuat Nec Mergitur

97 appréciations
Hors-ligne
Merci Thalie d'avoir regardé,

Bonne soirée

Philippe
Fluctuat Nec Mergitur
Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie News de Blog4ever.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6061 autres membres