Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s\u2019attaque \u00e0 un autre script de menu. M\u2019enfin script\u2026 pas cette-fois. M\u00eame si sur gloubiweb cela est pr\u00e9sent\u00e9 comme un script, il s\u2019agit en fait de CSS.<\/p>\n\n\n\n
Ce menu, qui est visible sur cette page<\/a>, utilise la technique des sprites CSS<\/a>.<\/p>\n\n\n\n Cette technique consiste \u00e0 ne montrer qu\u2019une petite partie d\u2019une image plus grande, qui contient plusieurs \u00e9l\u00e9ments graphiques de notre mise en page, dans notre cas, tous les \u00e9tats des boutons de notre menu.<\/p>\n\n\n\n Pour ne montrer qu\u2019une partie de cette image plusieurs techniques sont possibles : image dans un conteneur plus petit qui masque tout ce qui est en dehors (propri\u00e9t\u00e9 C\u2019est cette deuxi\u00e8me technique qui utilis\u00e9e ici, en modifiant la position de l\u2019image de fond au survol de la souris.<\/p>\n\n\n\n Le fait que l\u2019image de fond change de position au survol de la souris est visible sur la page originale, car les liens sont l\u00e9g\u00e8rement surdimensionn\u00e9s et laissent voir plus qu\u2019un seul et unique \u00ab bouton \u00bb.<\/p>\n\n\n\n\n\n\n\n Le menu est organis\u00e9 de mani\u00e8re plut\u00f4t classique, en utilisant une liste non ordonn\u00e9e dont on masque les marqueurs.<\/p>\n\n\n Ensuite, chacun des liens est stylis\u00e9 de mani\u00e8re \u00e0 \u00eatre affich\u00e9 en mode bloc, dont la taille correspond \u00e0 celle d\u2019un bouton de l\u2019image, avec le texte centr\u00e9.<\/p>\n\n\n Le changement de la partie de l\u2019image de fond \u00e0 afficher est g\u00e9r\u00e9 gr\u00e2ce \u00e0 la pseudo-classe Pour afficher les liens sur la m\u00eame ligne, diff\u00e9rentes m\u00e9thodes sont possibles. Une de ces m\u00e9thodes est les grilles CSS<\/a>. Pour une grille de 4 colonnes d\u2019une largeur de 200px (largeur de nos boutons) et une s\u00e9paration de 8px entre chacune des ces colonnes, le CSS est le suivant :<\/p>\n\n\n L\u2019assemblage final des diff\u00e9rents bouts de code pr\u00e9sent\u00e9s ci-dessus donne ce r\u00e9sultat<\/a>.<\/p>\n\n\n\n J\u2019esp\u00e8re encore vous avoir appris quelque chose ou alors que ma pr\u00e9sentation vous ai permis de vous d\u00e9bloquer.<\/p>\n\n\n\n Je vous dis \u00e0 bient\u00f4t pour de nouvelles aventures codesques.<\/p>\n","protected":false},"excerpt":{"rendered":" Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s\u2019attaque \u00e0 un autre script de menu. M\u2019enfin script\u2026 pas cette-fois. M\u00eame si sur gloubiweb cela est pr\u00e9sent\u00e9 comme un script, il s\u2019agit en fait de CSS. Ce menu, qui est visible sur … Continuer la lecture Pr\u00e9sentation de la technique des sprites<\/h2>\n\n\n\n
overflow : hidden<\/code>) ou encore l\u2019utilisation de la grande image comme image de fond d\u2019un conteneur plus petit, positionn\u00e9e de mani\u00e8re \u00e0 ne laisser voir que la partie qui nous int\u00e9resse.<\/p>\n\n\n\nLe code<\/h2>\n\n\n\n
\n<div id="myMenu">\n <ul>\n <li><a id="a" href="#">A<\/a><\/li>\n <li><a id="b" href="#">B<\/a><\/li>\n <li><a id="c" href="#">C<\/a><\/li>\n <li><a id="d" href="#">D<\/a><\/li>\n <\/ul>\n<\/div>\n\n<style type="text\/css">\n #myMenu > ul > li {\n list-style-type: none;\n }\n<\/style>\n<\/pre><\/div>\n\n\n\n#myMenu > ul > li > a {\n display:block;\n text-align: center;\n padding: 8px 0 0 8px;\n width: 192px;\n height: 24px;\n background-image: url('assets\/files\/img\/gloubi\/menuours.gif');\n text-decoration: none;\n color: #000;\n}\n<\/pre><\/div>\n\n\n:hover<\/a><\/code>.<\/p>\n\n\n\n#myMenu > ul > li > a:hover {\n background-position-y: -32px;\n}\n<\/pre><\/div>\n\n\n\n#myMenu > ul {\n display: grid;\n grid-template-columns: repeat(4, 200px);\n gap: 8px;\n}\n<\/pre><\/div>\n\n\n
\n\n\n\n