IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Mise en page animée, Nouveautés de CSS
Options
Anard
posté 23 Jan 2019, 15:37
Message #1


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 578
Inscrit : 7 May 2015
Membre no 195 224



Bonjour à tous. Je viens vous voir pour un assistance cosmétique (et non pas cosmique).

Je suis en train de me remettre un peu au développement web. Depuis le temps que je n'y était pas venu, ça a bien bougé ! On peut maintenant faire des animations en CSS biggrin.gif
Du coup pour mon nouveau site, je voudrais créer une interface adaptative et animée sans utiliser de javascript.

J'ai un menu principal "à la con" avec des chapitres principaux répartis autour d'une image. Le survol d'un chapitre doit faire apparaître un sous menu dans un genre de bulle, si possible de manière animée.
J'ai réussi à mettre en place quelques animations sur la couleur des liens, c'est déjà formidable.
Mais je n'arrive pas à faire apparaître ma box de manière progressive.

La construction du menu repose sur cette syntaxe :
Code
<dl><!-- élément de menu -->
    <dt><!-- titre du menu toujours visible, mais mobile-->
    <dd><ul><!-- sous-menu invisible au départ et qui doit apparaitre -->
        <li><!-- les différentes lignes du sous-menu -->


Pour faire apparaitre un <dd>, j'utilise dans mon css :
Code
dl:hover dd {
    display: inline-block;
}


Malheureusement, je n'arrive pas à animer cette appartition, même en indiquant au préalable
Code
dl dd {
    transition: display 1s;
}

En effet, il semble que la transistion doit s'appliquer à l'élément survolé et non à un sous-élément (en l'occurrence, je veux afficher le <dd> au survol du <dl> parent).
Je ne sais pas si je me fais bien comprendre...

Je découvres ces nouvelles fonctionnalités, alors votre aide serait la bienvenue...

Merci beaucoup. Pour plus d'informations, vous pouvez visualiser l'état des choses ici


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
Philippe64
posté 23 Jan 2019, 15:56
Message #2


Adepte de Macbidouille
*

Groupe : Membres
Messages : 247
Inscrit : 31 Aug 2002
Lieu : Saint-Jean-de-Luz
Membre no 3 355



Bonjour,

transition: display, ça n'existe pas à ma connaissance


Tu peux éventuellement faire avec opacity pour faire apparaitre en fondu.

Code
transition: opacity 1s ease-in-out 0s;



--------------------
En activité : Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone SE - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran)
A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s

Crea64 : creation de site internet à Saint-Jean-de-Luz (64)
Go to the top of the page
 
+Quote Post
Anard
posté 23 Jan 2019, 16:23
Message #3


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 578
Inscrit : 7 May 2015
Membre no 195 224



Merci pour ta réponse.

Donc en effet, j'ai réussi à faire une apparition progressive avec opacity (voir site mis à jour.

Pour ceci, j'utilise donc ce CSS
Code
.menu dd {
    display: none;
    opacity: 0;
}
.corps dd {
    transition: opacity 2s ease;
}
.corps dd:hover {
    opacity: 1;
}
.corps .menu dl:hover dd {
    display: inline-block;
}


Le problème est toujours présent : ainsi, au passage sur une balise dl, la balise dd s'affiche (avec une opacité nulle), mais je n'arrive pas à créer la transition à ce moment. La seule solution que j'ai trouvée, c'est de faire la transitiuon au passage sur la balise dd directement, mais ce n'est pas très naturel.

Aurais-tu une idée de la bonne syntaxe ?

Ce message a été modifié par Anard - 23 Jan 2019, 16:24.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
Philippe64
posté 23 Jan 2019, 18:14
Message #4


Adepte de Macbidouille
*

Groupe : Membres
Messages : 247
Inscrit : 31 Aug 2002
Lieu : Saint-Jean-de-Luz
Membre no 3 355



Je trouve que tu imbrique trop tes classes css.
tu te compliques la vie pour rien.

j'ai pas trouvé ce dont tu parles dans ton lien. (il est affiché ceci :Erreur : SQLSTATE[HY000] [2002] No such file or directory)

par contre, je ne vois pas pourquoi tu tiens à passer de display bloc à display inline-bloc.

choisi l'un ou l'autre une fois pour toute.

Ce message a été modifié par Philippe64 - 23 Jan 2019, 18:17.


--------------------
En activité : Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone SE - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran)
A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s

Crea64 : creation de site internet à Saint-Jean-de-Luz (64)
Go to the top of the page
 
+Quote Post
Anard
posté 23 Jan 2019, 20:21
Message #5


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 578
Inscrit : 7 May 2015
Membre no 195 224



Je suis d'accord que ça fait beaucoup d'imbrications, c'est surtout pour me permettre de selectionner plus facilement tel ou tel élément ensuite. Aussi, j'essaie de respecter à la lettre les recommendations du W3C. Ce qui fait par exemple que je suis obligé d'insérer une balises dd dans une dl, même si le dd est vide...

Concernant les "display", en fait j'utilise un fichier Menu.php qui sera le même pour tout le site. En revanche, l'affichage n'est pas du tout le même sur la page d'accueil que sur les autres : sur la page d'accueil, le menu prend presque toute le place, entourant un gros phono (image) alors que sur les autres pages, ce sera un menu classique vertical sur le côté gauche avec un petit phono qui indique là où on est. Ca explique peut-être aussi certaines de ces imbrications bizarres... Sur le principe de mon code actuel, si les balises de menu sont incluses dans un "<div class="corps">, c'est qu'on est sur la page d'accueil, ce qui me permet de faire la différence sans PHP, juste en CSS.
Il y a donc dans mon "menu.css" l'ensemble des balises normales puis (à partir de "/* Cas de la page Accueil */") les corrections pour la page d'accueil.

Bref, je ne suis pas un warrior (le dernier site que j'ai fait remonte à 5-7 ans smile.gif) C'est d'ailleurs pour ça que je ressens profondément le besoin de vos conseils.

Pour le moment, pour contourner mon problème et que ça reste utilisable, lors d'un hover sur une balise dl, j'affiche le sous menu (dd) en opacité 0.1. Il suffit alors de positionner la souris sur la balise dd pour que l'opacité disparraisse (opacité 1 avec transition). Dans l'idéal, j'aimerais que ceci arrive dès le survol d'un élément dl.

Pour l'accessibilité du site en ligne, j'avais laissé la config locale de la base de données dans le fichier de configuration unsure.gif , c'est corrigé et la page d'accueil est maintenant visible. Ce sera sûrement plus clair.
J'ai fait évoluer un peu les choses depuis, mais il me reste des erreurs PHP à corriger avant de vous partager la suite wink.gif Je suis en train d'essayer de mettre en place une première page qui n'est pas la page d'accueil. Ce sera aussi plus clair sur ce que je veux obtenir au final...

En tout cas merci de te pencher sur mon cas jap.gif

Ce message a été modifié par Anard - 23 Jan 2019, 20:37.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
Philippe64
posté 23 Jan 2019, 21:08
Message #6


Adepte de Macbidouille
*

Groupe : Membres
Messages : 247
Inscrit : 31 Aug 2002
Lieu : Saint-Jean-de-Luz
Membre no 3 355



Je regarderai mieux demain, mais déjà un conseil.
Je ne trouve pas très commode que le texte du menu bouge lorsque tu passes par dessus (de gauche à droite ok, mais problème quand le sous menu apparait)
ça manque un peu de fluidité.
pour le sous menu tu devrais le traiter en position absolu par rapport à son parent (à mettre en position relative)
ça permettrait de garder les menus là où ils sont sans subir l'agrandissement dû à l'apparition des sous-menus




--------------------
En activité : Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone SE - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran)
A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s

Crea64 : creation de site internet à Saint-Jean-de-Luz (64)
Go to the top of the page
 
+Quote Post
Anard
posté 24 Jan 2019, 03:05
Message #7


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 578
Inscrit : 7 May 2015
Membre no 195 224



Merci. Je suis d'accord avec toi pour la navigation.

Je n'avais pas réussi jusque là à placer correctement les différents sous-menus du coup, j'ai gardé cette solution un peu bâtarde et moyennement pratique. J'avoue que je m'y perds avec ces notions de fixed, absolute, relative etc... Je bricoles à tâtons. En plus, j'essaie de garder en tête de pouvoir ré-adapter tout ça pour les petits écrans wacko.gif

Ce sera peut-être plus compliqué de décaler sur la droite pour le menu vertical, encore que je trouve les ouvertures de celui-ci moins dérangeantes.

Bref, j'ai mis à jour pour pouvoir visualiser plusieures ébauches de pages.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
Philippe64
posté 24 Jan 2019, 09:20
Message #8


Adepte de Macbidouille
*

Groupe : Membres
Messages : 247
Inscrit : 31 Aug 2002
Lieu : Saint-Jean-de-Luz
Membre no 3 355



Je t'ai fais un petit code pour que tu testes (je sais que ça marche j'ai testé de mon côté)
ce n'est pas parfait, mais c'est pour l'exemple.

Mais franchement, laisse tomber tous tes dt, dl et compagnie... simplifie ton code.
c'est le conseil que je peux te donner après 20 ans d'expérience (j'ai commencé en 1999 et c'est mon métier depuis)

ce sera d'autant plus simple pour basculer sur la version mobile (avec le même css)


Code
/* @override
    http://test.musiquesmagiques.fr/Styles/menu.css */

.menu {
    vertical-align: top;
    position: fixed;
    top: 180px;
}

#phono {
    display: none;
}

.menu, .menu a {
    text-decoration: none;
    color: black;
    max-width: 200px;
}

#curMenu, #curMenu a {
    color: #5e0505;
}

.menu dd {
    display: none;
    opacity: 0;
}

.menu dt, .menu dt a {
    font-weight: bold;
}

.menu dl ul {
    list-style-type: none;
    padding: 10px 0 0 0;
}

/* Petit phono */
.menu dt:not(#curMenu) img, .menu li:not(#curMenu) img {
    display: none;
}
.menu dt img, .menu li img {
    width: 20px;
    margin: 0px 5px;
    vertical-align: middle;
}
.menu dt#curMenu, .menu li#curMenu {
    magin: 10px 5px;
}

/* Cas de la page Accueil */
.corps .menu {    
    position: relative;
    top: auto;
    max-width: 100%;
}

.corps #phono {
    display: block;
    z-index: 1;
    padding-top: 20px;
}

.corps .menu li img {
    display: none;
}

#chapitres {
    position: absolute;
    top: 0;
    left: 240px;
    z-index: 2;
}

.corps .menu dl {
    position: relative;
    display: block;
    height: 40px;
    z-index: 1;
}

.corps .menu dt {
    display: block;
}

.corps .menu dd {
    vertical-align: middle;
    margin: 10px;
    display: block;
    position: absolute;
    left: 110px;
    top: -40px;
    width: 200px;
    transform: scale(0.2);
    transform-origin: 0 0;
}

.corps .menu ul {
    border: 1px inset black;
    border-radius: 10px;
    padding: 5px 15px;    
    background-color: #f3e2c7;
}

#menu0 {
    display: none;
}
#menu1 {
    left: 30px;
}
#menu2 {
    left: 55px;
}
#menu3 {
    left: 72px;
}
#menu4 {
    left: 85px;
}
#menu5 {
    left: 89px;
}

/* Animations */
.corps .menu dl {
    transition: margin-left 1s ease;
}
.menu dd {
    transition: opacity 1s ease, transform 1s ease;
}



.corps .menu dl:hover {
    margin-left: 20px;
    z-index: 10;
}
/*
.corps #menu0:hover {
    left: 20px;
}
.corps #menu1:hover {
    left: 50px;
}
.corps #menu2:hover {
    left: 75px;
}
.corps #menu3:hover {
    left: 92px;
}
.corps #menu4:hover {
    left: 105px;
}
.corps #menu5:hover {
    left: 109px;
}*/

.menu dt, .menu a {
    transition: color 0.2s ease-out;
}
.menu dt:hover, .menu a:hover {
    color: brown;
}

.corps .menu dl:hover dd, #openMenu {
    opacity: 1;
    transform: scale(1);
}
/*
.menu dl:hover dd, #openMenu {
    display: block;
}

.corps .menu dl:hover dd {
    display: inline-block;
}*/


--------------------
En activité : Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone SE - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran)
A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s

Crea64 : creation de site internet à Saint-Jean-de-Luz (64)
Go to the top of the page
 
+Quote Post
Anard
posté 24 Jan 2019, 10:31
Message #9


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 578
Inscrit : 7 May 2015
Membre no 195 224



Ouaah ! thumb.gif Merci infiniement, c'est exactement ce que je voulais au départ jap.gif

Il faut maintenant que je comprenne précisément ce que tu as modifié et comment tu as obtenu ce résultat pour pouvoir le reproduire moi-même wink.gif En l'occurrence, chez moi en tout cas, le menu vertical ne fonctionne plus (dans les autres pages que l'accueil), mais ça ne doit pas être grand chose.

Je vais étudier également comment supprimer des balises inutiles. J'avoue qu'au départ, j'ai simplement récupéré le code que j'avais mis au point il y a plus de 10 ans sur mon site perso. Mais lui utilisait du javascript pour faire apparaître/disparaître les sous-menus. Bref, comme tu dis, il y a certainement moyen de simplifier tout ça.

Ce message a été modifié par Anard - 24 Jan 2019, 10:32.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
scoch
posté 24 Jan 2019, 12:00
Message #10


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 493
Inscrit : 1 Jul 2010
Membre no 156 073



@Philippe64 a bien taisons de te conseiller de ne pas utiliser des éléments dl, dd et dl. Ces éléments indiquent au navigateur (et aux lecteurs d'écran ainsi qu'aux robots des moteurs te recherche) qu'il s'agit d'une liste de définitions, or ce n'est pas le cas.
Pour un menu, il suffit d'utiliser des éléments ul et li, en les imbriquant dans ton cas :
Code
<ul>
     <li>XXX
     ‎     <ul>
                <li>ZZZ</li>
     ‎     </ul>
     ‎</li>
</ul>

Puis adapter les sélecteurs CSS : ul ul pour une liste imbriquée.

Ce message a été modifié par scoch - 24 Jan 2019, 12:01.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post
Philippe64
posté 24 Jan 2019, 12:00
Message #11


Adepte de Macbidouille
*

Groupe : Membres
Messages : 247
Inscrit : 31 Aug 2002
Lieu : Saint-Jean-de-Luz
Membre no 3 355



Pour le menu vertical, j'ai pas fait attention, je n'ai pas navigué dans le reste du site.

en gros pour ton menu, ce que tu devrais faire c'est l'intégrer dans une balise <nav> pour signifier que c'est un menu puis pour le contenu, faire quelque chose dans ce genre :

Code
<nav class="menu_principal">

   <ul class="menu">
       <li class="menu_element">element menu 1
            <ul class="sous_menu">
                  <li>élément sous menu 1</li>
                  <li>élément sous menu 2</li>
                  <li>élément sous menu 3</li>
            </ul>
       </li>
       <li class="menu_element">element menu 2
            <ul class="sous_menu">
                  <li>élément sous menu 1</li>
                  <li>élément sous menu 2</li>
                  <li>élément sous menu 3</li>
            </ul>
       </li>
       <li class="menu_element">element menu 3
            <ul class="sous_menu">
                  <li>élément sous menu 1</li>
                  <li>élément sous menu 2</li>
                  <li>élément sous menu 3</li>
            </ul>
       </li>
  </ul>

</nav>


--------------------
En activité : Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone SE - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran)
A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s

Crea64 : creation de site internet à Saint-Jean-de-Luz (64)
Go to the top of the page
 
+Quote Post
Anard
posté 24 Jan 2019, 16:06
Message #12


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 578
Inscrit : 7 May 2015
Membre no 195 224



Voilà, j'ai corrigé pour suivre vos conseils, en effet, je préfère toujours utiliser des balises adaptées quand je peux plutôt que de mettre des class et id.
Je ne me souvenais plus de nav par exemple.
J'ai donc mis à jour avec la structure que vous me conseilliez. jap.gif

J'ai finalement décidé de n'utiliser que mon gros menu pour plus de simplicité. La version verticale (ou horizontale, je ne sais pas encore) sera utilisée, mais uniquement en vue adaptative pour les écrans limités en largeur.
Ca me parait plus logique au niveau de la navigation que le menu ne change pas de place en fonction de la page visitée...

Je voulais d'ailleurs éviter de mettre des class="menu" class="ssmenu" partout mais je crois que je vais être obligé.
Je m'explique : lors du survol d'un lien, je fais donc apparaître un mini phono à côté du lien. Pour le moment comme ceci :
Code
/* apparition petit phono */
nav li li img {
    transition: opacity 1s ease, transform 0.5s ease;
}
nav li li:hover img {
    transform: scale(1);
    opacity: 1;
}


Le "li li" ne sélectionne que les sous-menus. Pour obtenir la même chose pour tous les liens (menus et sous-menus), j'ai essayé :
Code
/* apparition petit phono */
nav li img {
    transition: opacity 1s ease, transform 0.5s ease;
}
nav li:hover img {
    transform: scale(1);
    opacity: 1;
}

Malheureusement, du fait de l'héritage en CSS, les sous-menus se retrouvent avec le petit phono sur chaque ligne... Je ne sais pas encore précisément comment lui demander de ne pas sélectionner les enfants mais j'espère pouvoir trouver avec des classes.

EDIT : j'ai trouvé une solution sans ajout de id et classes.
Mon img doit être le premier enfant du li et alors je peux le sélectionner par
Code
li > img

Les balises img suivantes ne sont pas prises en compte, même si elles sont également enfant du li. thumb.gif

Ce message a été modifié par Anard - 24 Jan 2019, 18:06.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
Philippe64
posté 28 Jan 2019, 09:50
Message #13


Adepte de Macbidouille
*

Groupe : Membres
Messages : 247
Inscrit : 31 Aug 2002
Lieu : Saint-Jean-de-Luz
Membre no 3 355



D'une manière générale, je te conseille de mettre des classes pour cibler tes éléments plus facilement et d'éviter par contre de cibler par des id si cela n'est pas absolument nécessaire.
Les classes sont là pour aider au ciblage alors autant s'en servir.


--------------------
En activité : Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone SE - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran)
A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s

Crea64 : creation de site internet à Saint-Jean-de-Luz (64)
Go to the top of the page
 
+Quote Post
scoch
posté 28 Jan 2019, 14:52
Message #14


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 493
Inscrit : 1 Jul 2010
Membre no 156 073



@Philippe64 Bien d’accord pour limiter l’utilisation de l’attribut id.
Par contre, pas vraiment d’accord quand tu écris que les classes sont là pour simplifier la sélection d’éléments. C’est vrai que l’attribut class simplifie la sélection mais les sélecteurs avancés de CSS sont là pour ça aussi. Le principal avantage des sélecteurs avancés de CSS est d’éviter le mélange structure(HTML)/apparence (CSS) dans le code source HTML. Utiliser les sélecteurs avancés de CSS apporte également davantage de souplesse : cela peut permettre au web designer d’arriver à ses fins sans être complètement tributaire du code généré par le développeur web php par exemple (c’est flagrant dans le cas d’une refonte du design avec une structure HTML inchangée).

Dans le code HTML que tu as posté plus haut, il n’est pas compliqué de cibler les éléments en CSS sans utiliser les attributs class :

- le sélecteur .menu devient nav > ul
- le sélecteur .menu_element devient nav > ul > li
- le sélecteur .sous_menu devient nav > ul > li > ul
- et ses enfants directs li : nav > ul > li > ul > li

Attribuer un nom de classe à la nav peut être justifié dans le cas où il y aurait d’autres éléments nav, et pas de parent permettant de créer un contexte de sélection.
La version simplifiée du HTML et du CSS :

Code
<nav>
    <ul>
        <li>element menu 1
            <ul>
                <li>élément sous menu 1</li>
                <li>élément sous menu 2</li>
                <li>élément sous menu 3</li>
            </ul>
        </li>
        <li>element menu 2
            <ul>
                <li>élément sous menu 1</li>
                <li>élément sous menu 2</li>
                <li>élément sous menu 3</li>
            </ul>
        </li>
        <li>element menu 3
            <ul>
                <li>élément sous menu 1</li>
                <li>élément sous menu 2</li>
                <li>élément sous menu 3</li>
            </ul>
        </li>
    </ul>
</nav>


Code
nav > ul {
    margin: 1em;
    background-color: pink;
}
nav > ul > li {
    margin: 1em;
    background-color: gold;
}
nav > ul > li > ul {
    margin: 1em;
    background-color: cyan;
}
nav > ul > li > ul > li {
    margin: 1em;
    background-color: orange;
}


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 24th August 2019 - 08:20