28172 sujets

CSS et mise en forme, CSS3

Menu avec logo au milieu du menu

Bonjour
Je cherche à réaliser un nouvel header avec un logo au milieu du menu, uniquement pour les PC.
J'ai trouvé plusieurs solutions mais aucune ne conviennent parfaitement d'ou plusieurs questions :

1/ comment mettre une image à la place du texte (la plupart des exemples)
2/ peu utilise nav !, du coup je me demande quelle est la meilleure pratique (si vous pensez comme moi) pour le prendre en compte: html, class=nav ?
3/ quelle serait celui qui serait préférable selon votre expérience ?
4/ pas besoin de l'afficher en mode responsive, je partirai sur un hamburger plus simple avec le logo au dessus du hamburger (si conseil)

Voici les exemples trouvés:
a) https://codepen.io/andrewmanswell/pen/pBbMKZ
b) https://codeconvey.com/responsive-navigation-with-centered-logo/
c) https://stackoverflow.com/questions/50832095/how-to-create-menu-with-a-logo-in-the-middle-using-html-and-css
le plus simple, peut-être le meilleur ?
d) https://colorlib.com/wp/template/website-menu-10/
celui là est accessible via inscription. Je reçois un zip de ~2mo, déjà un frein pour extraire l'info utile (je peux l'envoyer pour les réfractaires à l'inscription, mais je pense que l'on peut quand même l'étudier comme cela)
e) https://codepen.io/Navedkhan012/pen/QdgVpY
me semble moins bien.

@+
Modérateur
Bonjour,

Ton logo peut faire partie du code via une balise img , ce n'est pas qu'une simple décoration.

Si ton menu est ta navigation principal, alors utilise nav sans craintes.

En considérant le <del>premier</del> deuxieme exemple que tu donnes, flex est effectivement simple pour la mise en œuvre, mais préfère la règle order pour repositionner tes éléments, celle-ci est officielle.

:nth-child(n) et le sélecteur ~ te seront utiles pour appliquer order à telle ou telle balise selon leur position dans leur conteneur.

Si le nombre de lien peut varier, tu peut aussi préparer quelques règles en fonction des nombres de liens que tu peut avoir (note que ça marche bien avec les chiffres pairs) en comptant leur position depuis le dernier (se trouvant être aussi leur position depuis le premier element, le logo faisant partie des éléments à compter).
par exemple avec le logo + 6 liens (7 elements) :
* le 3eme lien se trouve en position 4
* en comptant depuis le dernier liens, il se trouve aussi en position 4
Pour le cibler , uniquement dans une liste de 7 éléments, il te suffit de faire pour qu'il réponde aux deux conditions précédentes 
a:nth-child(4):nth-last-child(4) {}

A partir de là, tu peut modifier l'ordre d'affichage des éléments.
par défaut order à la valeur 0.
En appliquant order:1 à img , elle s'affichera derrière tous les liens.
Sur une liste de 7(6 liens) , on sait où se trouve le 3éme lien, il faut donc modifier order pour tous ceux qui le suivent, on reprend la règle précédente à laquelle on ajoute le sélecteur d'adjacence ~ ce qui donne .
a:nth-child(4):nth-last-child(4) ~ a {order:1;}

les trois derniers liens vont donc repasser derrière l'image du logo A valeur identique pour order, l'ordre reprend celui du code HTML , defaut est 0 .

Exemples avec des série de lien différentes et une série de sélecteurs préparés à l'avance. https://codepen.io/gc-nomade/pen/RwMpMdP Si le nombre de liens est connu et toujours le même, alors une seule règle suffit. Pour les séries impaires, à toi de choisir si tu veut que le LOGO soit décentré à droite ou à gauche ou juste relégué en fin ou début.

Cdt
Modifié par gcyrillus (20 Jul 2022 - 09:21)
Bonsoir
@gcyrillus
Merci pour cette solution qui est encore une autre façon de faire.
Je reformule pour mes questions pour être sûr d'avoir bien compris
1/ bien utiliser une balise IMG
2/ bien utiliser une balse NAV
Bon déjà cela me rassure même en étant pas un pro du css, il me semblait que c'était de meilleures pratiques.
3/ tu me fais une proposition. Chouette néanmoins heureusement qu'il y a la démo car je suis pas assez bon pour tout comprendre l'explication et l'intérêt par rapport aux autres?

4/ bon la suite est maintenant de l'adapter par rapport à mon menu actuel
https://cochanger.eu/organisations/lieu/cochanger-eu
Il faut savoir qu'avant je subissais le menu standard du cms joomla, maintenant je fais un module HTML personnalisé ou je peux mettre le HTML que je veux. Il en découle que je dois gérer ce que faisait avant le cms !
Du coup, je vois 2 problèmes
5/ c'est à moi de détecter pour que le menu soit responsive (test rapidement fait avec tous les exemples dont le tien ou il n'est pas pris en compte).
Quelle valeur et comment le faire ?
Après j'imagine qu'il faudra que je fasse un 2ème menu avec un code type hamburger!
6/ En fait je passe à cette structure de menu car sur ce site asso, j'ai plus de 7 items. Je vais donc devoir gérer les sous-menus et je ne sais pas faire!
Est-ce tjs envisageable avant que je m'enfonce ?

La structure du menu HTML serait proche de
ACCUEIL / DOCUMENTS / EXPÉRIENCES / LOGO / ORGANISATIONS / QUE FAIRE ?
Le sous-menu de DOCUMENTS étant composés de 6 items
Le sous-menu d'ORGANISATIONS étant composés de 4 items
Modérateur
Bonsoir,

Si il y a des sous menu, alors, une liste devient utile et pertinente .
On applique les css à partir de ul devenu le parent principal au lieu de nav.
Pour les sous menu , c'est un classique menu déroulant via display et position.

pour le changement d'aspect, il y a les mediaqueries. @media en fonction de l'écran pour modifier l'affichage.

Pour le menu burger, éventuellement un label + input checkbox[

Ce qui peut donner un menu du genre https://codepen.io/gc-nomade/pen/LYdWayg break à 768 et 1024px arbitraire. Ce ne sont que des exemples.

Cdt
Bonjour
petit point d'étape avant de partir manger. Smiley smile
Déjà merci pour cet exemple bien avancé et bien documenté.
Néanmoins, je vois ma difficulté à avancer.

1/ Premier souci avec le logo, je ne vois pas comment le déplacer puisque sa place serait plutôt après "EXPERIENCES" ? Après du fait du nombre d'item, il ne semble pas possible de le centrer "vraiment", c'est çà ?

2/ Ensuite je voudrais coller l'effet que j'ai déjà bien eu du mal à réaliser ( encadrement d'un tiem de menu), je dois (si je comprends bien) placer ".container-header" et " #navbar1" de mon CSS
.container-header .mod-menu > li > a {
    text-transform: uppercase;
  padding: 1px 1px;
    color:#000;    
}
.container-header .mod-menu > li > a:hover {
  /*background-color: red;
  border-bottom:none;*/
}
#navbar1 .nav-item:hover {
  border:2px solid black;
}
#navbar1 .current {
  border:2px solid black;
}

cochanger.eu/organisations/lieu/cochanger-eu
Est-ce que je dois créer des nouvelles balises ou est-ce que je peux utiliser celles existantes ?

3/ responsive
Bon sur mon smartphone, le logo se place sur le hamburger. Je pense que je gérerai plutôt dans un autre module pour gérer cela sur smartphone. Cela simplifierait le code et plus clair pour moi.
Les questions restant que j'ai compris que l'on peut gérer cela via les mediaquerie mais qu'elle serait l'arbre de décisions, car dans la réalité il y a plein de taille intermédiaire entre mon écran > 1920px et un petit smartphone ?
Déjà tu as mis @media screen and (max-width: 1024px) ...
A part le fait que je ne savais pas que l'on pouvait mettre des logiques 'and", cela veut dire que sur les plus écrans comme le mien (1920px) , on ne fait pas mise en page ?
Modifié par HDcms (20 Jul 2022 - 12:42)
Modérateur
bonne digestion Smiley cligne

Pour commencer:

1) tu peut modifier les chiffre des selecteur de positionement (:nth-x(n)) ex: ul > :nth-last-child(3):nth-child(4) qui va trouver le li "expériences" (voir mon post précédent)

2) je tenterais pour commencer, seulement d'appliquer les css de base de mon exemple à ta liste imbriquée ( le flex , position et les display) , puis le selecteur ;nth-machin-truc pour cibler ton élément de liste qui doit se trouver juste devant le logo.(LOGO manquant dans le source actuelle de ta page)

3) tu peut garder ton button et ton span qui fonctionnent, je ne vois pas de logo sur ta page, donc pas d'avis à te proposer. Idem pour tes points de ruptures, si ils te conviennent gardes les.

Enfin, tu as deux balises NAV imbriquées, conserves en une seule avec les class dont tu as réellement besoin. L'architecture de ton code est similaire à mon exemple, ce qui t’intéresse c'est éventuellement les styles de la liste en flex et du menu déroulant, le burger tu en as déjà un, donc zap celui de mon exemple(et ses styles) et pour le makeup, idem, tu as déjà.
exemple repris avec moins de style https://codepen.io/gc-nomade/pen/abYWdNM?editors=1100 et un pseudo élément pour injecter un élément supplémentaire vide pour mettre le logo au centre.

Cdt
Modifié par gcyrillus (20 Jul 2022 - 14:21)
Merci
Bon je me suis peut-être mal exprimé mais sur le site cochanger, le html est généré par joomla.
Maintenant j'ai trouvé une autre façon de faire, (mais plus que difficile que prévu) de mettre dans un module joomla le code HTML (+ CSS). Ce qui fait que je n'aurai plus l'affichage actuelle comme pour le menu smartphone ...
Oui je n'ai pas mis le logo sur e site en construction cochanger, j'essaie de tout reporter sur mon site de test j4test.88h.ovh/index.php
Je continue à essayer de connecter les neurones pour fusionner les 2
Modérateur
Bonsoir,

Ce que je te proposais été de reprendre l'architecture que tu avais (voir le code source avec les class appliquées) en faisant un copier/coller du HTML et lui ajouté le logo, puis le supplément de style. CSS -> flex au moins pour appliquer order et repositionner tes éléments comme tu le souhaites .
Le dernier codepen était simplifié coté CSS pour que tu reperd au mieux les styles qui t’intéressent et surcharger ceux que tu as déjà.

Pour les points de rupture, les outils de développement des navigateurs aide à retrouver ceux utilisés pour finaliser et mettre en cohérence la surcharge de style.

En testant divers menu et en essayant de les injecter en copier/coller , tu t'éparpilles sans prendre le temps de voir comment ils fonctionnent. Je ne connais pas non plus joomla. La dernière fois que je m'y suis intéresser remonte a une dizaine d'années. , si tu peut y injecter du HTML, c'est probablement le plus simple pour le moment.

Cdt
Sujet clos
Aller à