Menu CSS avec logos
Jean
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
j'ai crée un menu CSS avec 5 logos (ce sont 5 images indépendantes de couleur grise).
J'ai 5 autres images (de couleur rouge) qui me servent à changer l'apparence du logo lorsque je clique dessus et que j'atterri sur la page qui lui correspond .
Ce que je cherche à faire c'est donc de faire en sorte que lorsque je clique sur un de ces 5 logos (logos gris) et que j'arrive sur la page lui correspondante, ce logo soit différent (en rouge) des 4 autres et qu'il le reste tant que l'utilisateur ne change pas de page.
J'ai un peu de mal à décrire explicitement ce à quoi je souhaite aboutir, j'espère que vous m'aurez compris.
Merci
j'ai crée un menu CSS avec 5 logos (ce sont 5 images indépendantes de couleur grise).
J'ai 5 autres images (de couleur rouge) qui me servent à changer l'apparence du logo lorsque je clique dessus et que j'atterri sur la page qui lui correspond .
Ce que je cherche à faire c'est donc de faire en sorte que lorsque je clique sur un de ces 5 logos (logos gris) et que j'arrive sur la page lui correspondante, ce logo soit différent (en rouge) des 4 autres et qu'il le reste tant que l'utilisateur ne change pas de page.
J'ai un peu de mal à décrire explicitement ce à quoi je souhaite aboutir, j'espère que vous m'aurez compris.
Merci
A voir également:
- Menu CSS avec logos
- Jeu des logos - Télécharger - Jeux vidéo
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
4 réponses
En JavaScript, au clique sur le menu, tu injectes une classe CSS que tu nommes, par exemple, active, et qui rend le logo rouge. C'est une piste.
Reprendre le code dans votre propre editeur car l'indentation est catastrophique quand on poste du code ici..
Niveau css je ne poste pas tout le code de mon menu c'est inutile, pour le moment j'ai juste un hover avec une opacité mais ça n'est ce qui m'intéresse de faire évidemment.
div#content {
position: relative;
width:1024px;
height:800px;
background-color:#FFFFFF;
}
.second-nav{
position: absolute;
font-size: 20px;
line-height: normal;
margin-top: -87px;
}
.second-nav ul li a:hover{
opacity: 0.95;
}
Je me rend compte que mon souci vient peut-être + du coté php car en réalité, à la fin de mon projet je n'aurai qu'une seule page index.php qui permettra de rediriger dynamiquement sur chacune de mes catégories, autrement dit: je n'ai pas une page dédiée à chacune de mes rubriques.
Pour mieux me faire comprendre: c'est comme si je travaillais avec un wordpress et que j'éditais la page menu.php pour faire mes propres modifs
<!-- BEGIN CONTENT -->
<div id="content">
<!-- BEGIN Second navigation -->
<div class="second-nav">
<ul>
<li>
<a href="#"> <img src="img/logo1.png" alt="" /> <span>Rubrique 1</span> </a>
</li>
<li>
<a href="#"> <img src="img/logo2.png" alt="" /> <span>Rubrique 1</span> </a>
</li>
<li>
<a href="#"> <img src="img/logo3.png" alt="" /> <span>Rubrique 1</span> </a>
</li>
<li>
<a href="#"> <img src="img/logo4.png" alt="" /> <span>Rubrique 1</span> </a>
</li>
<li>
<a href="#"> <img src="img/logo5.png" alt="" /> <span>Rubrique 1</span> </a>
</li>
</ul>
</div>
<!-- END Second Navigation -->
</div><!-- END Content -->
Niveau css je ne poste pas tout le code de mon menu c'est inutile, pour le moment j'ai juste un hover avec une opacité mais ça n'est ce qui m'intéresse de faire évidemment.
div#content {
position: relative;
width:1024px;
height:800px;
background-color:#FFFFFF;
}
.second-nav{
position: absolute;
font-size: 20px;
line-height: normal;
margin-top: -87px;
}
.second-nav ul li a:hover{
opacity: 0.95;
}
Je me rend compte que mon souci vient peut-être + du coté php car en réalité, à la fin de mon projet je n'aurai qu'une seule page index.php qui permettra de rediriger dynamiquement sur chacune de mes catégories, autrement dit: je n'ai pas une page dédiée à chacune de mes rubriques.
Pour mieux me faire comprendre: c'est comme si je travaillais avec un wordpress et que j'éditais la page menu.php pour faire mes propres modifs
Salut
sinon en css c est tres simple
sur chaque page qui corespond a la page ouverte tu donne une id ou une class a la balise ou tu as mis l image , et tu lui donne le background que tu veux !
exemple simple
a+
EDIT: j ai poste pendant que tu disais que c est une includ php !! donc cela change tout ! je laisse la reponse si elle sert a d autre en css
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
sinon en css c est tres simple
sur chaque page qui corespond a la page ouverte tu donne une id ou une class a la balise ou tu as mis l image , et tu lui donne le background que tu veux !
exemple simple
<!DOCTYPE html>
<html>
<head>
<title>
RAD ZONE Webcreation
</title>
<meta charset="utf-8">
<style type="text/css">
<!--
ul {
list-style-type: none;
}
.logos{
height: 42px;
width: 194px;
background: url(data:image/gif;base64,R0lGODlhJgEqAHcAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQICgAAACwAAAAAJgEqAMcFHT4TNGMZPnILKE9QcZoIIkcVN2gPLlkdQ3sHIUUYPW8NKlQJJUsbQXYRMV0WOmsFH0EQL1oSEhITExMUFBQVFRUWFhYXFxcYGBgZGRkaGhobGxscHBwdHR0eHh4fHx8gICAhISEiIiIjIyMkJCQlJSUmJiYnJycoKCgpKSkqKiorKyssLCwtLS0uLi4vLy8wMDAxMTEyMjIzMzM0NDQ1NTU2NjY3Nzc4ODg5OTk6Ojo7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NERERFRUVGRkZHR0dISEhJSUlKSkpLS0tMTExNTU1OTk5PT09QUFBRUVFSUlJTU1NUVFRVVVVWVlZXV1dYWFhZWVlaWlpbW1tcXFxdXV1eXl5fX19gYGBhYWFiYmJjY2NkZGRlZWVmZmZnZ2doaGhpaWlqampra2tsbGxtbW1ubm5vb29wcHBxcXFycnJzc3N0dHR1dXV2dnZ3d3d4eHh5eXl6enp7e3t8fHx9fX1+fn5/f3+AgICBgYGCgoKDg4OEhISFhYWGhoaHh4eIiIiJiYmKioqLi4uMjIyNjY2Ojo6Pj4+QkJCRkZGSkpKTk5OUlJSVlZWWlpaXl5eYmJiZmZmampqbm5ucnJydnZ2enp6fn5+goKChoaGioqKjo6OkpKSlpaWmpqanp6eoqKipqamqqqqrq6usrKytra2urq6vr6+wsLCxsbGysrKzs7O0tLS1tbW2tra3t7e4uLi5ubm6urq7u7u8vLy9vb2+vr6/v7/AwMDBwcHCwsLDw8PExMTFxcXGxsbHx8fIyMjJycnKysrLy8vMzMzNzc3Ozs7Pz8/Q0NDR0dHS0tLT09PU1NTV1dXW1tbX19fY2NjZ2dna2trb29vc3Nzd3d3e3t7f39/g4ODh4eHi4uLj4+Pk5OTl5eXm5ubn5+fo6Ojp6enq6urr6+vs7Ozt7e3u7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7///8I/wABCBxIEILBgwgTJkzAsKHDhwkKSCzAoKLFixgzatw4oOOABSBDihxJsiTJAyhTqozAsqWDlzBjyoQZoKbNmzhz6sxpoKeBB0CDCh1KtKiCo0iPCljKtKlTpw2iSp1KVSqCq1izat2KlaBXAArDhoVItuFEihvTquXo0aTbtyVVyj3Q0uXMuzF36t2r0+fPooADB02a9Klhw1UTU+XKuPHXgmIjGyxb9uzay5g9foTL+e3clXUj4B3tgK9pvn4FqzZKWOnh10sVy27QuLbWxwMlS6ZM1jLm32w7dh4e9zPK0KJJ3z3NvK/P1dAHt1YAG/ZsxbazI8AtUHdk3hB9A/8fb1Ez8fMhjR8PrXx58/c1U0eHPp169cPXE2vfz7+///8ABijggAQWaOCBCP7HHVjejQWeQ+KRN5556J2nHl3stScTfPDJN59q9d2HX36LEbhggw4+yFCEEv5GYYXDXYichhty2JyHHwYWoohPkVjigLgRIOSQKE6m4ooTtUjeizByJmOGNL5k443P5SjYjjw25eNUBZ5YJEJHIimRkhO21WRnT9YVJU1TnoajlURhmWVsW0bVJXdfghkmi2SqxeSZbqVp15ptulklnKy1NqeWddJmIp55Gnkkn30Gtxmgnqk345qlFYraoYgOJeecjToKJKSRhhlRkpVe9iemJ2n/CmWUnn7aU6iJErYoU6XeiVukkqpIaasYvQqrSIKyxGmnte70Jq4PjJplr4/+CqyqwxJbnpnHFmfcpoQ26yyo0EY73a501umrV0MSWSS2rGprabcmJZtcuOLyRC600vJI7alftSvkl/COKe+89Mb67aw05uvcreVKpyi6/wroZap7xntwsdwmnJ6sanLqsL4QR2zuxLtWHODFeRaM1sYcC+cxsiAPSuvINz2La78iqgwgywRnbDDMFxlLr73L4pzzvjufS3Gj634FLAQuEx3zpTMvgLTISsfHdKg83+ezgqi2LPTLVjNgdLdb46u0zmA7nTLU1T42ddVpV7T2sW3f/9w13IiGXd3Y/gH97tl5693xzH033HUAgMMpuHV0A2z3tYgnvjesjWv4OORfBy73ooT3ZziKeOe9Oaadt/d55FZO/lrp/J3eYOpprw5o68q9Hrrko5NaucVlBz2pxlbrfibvpPlecsSyj6hu3VJjfvzQuS/uMfOjOf+XydEjNvzKxR9+PdrJa58w93h5bzJQ4fc4/s+PCUyA8cIiT7TyTbLv3t+/i13wpjU/sgVMYPh7ULbkxT8Y+W8m7ntf/KBSwMLVD4Hmyx/20iezrGmtZsriGgCfV64JMmp6lqsexs6XOLWp72ggvJff3hbAHJmQVxU0XflQlznVvZBtMUza45RgZ8MB+iuHtdvh7XqYvQ5m7YE1GuH3oGfEniFxP7bzDu44iDXGBVGENCQhv6ootitqJ4u62eL+fsi3L7oNZ0T80A3TtaWoeeVuTOSiB0ECxbwMsYZyJOPgzJgdNO4mj2t0ohcXFrI3jiyO85mjAGiHRSVqEZEwa2CF+sgmKb7vZLp6GgoTRMpSmvKUqEylKleJoIAAADs=);
margin: 5px;
text-align: center;
color: #E6E6E6;
}
/* la j ai mis les 2 ensemble pour raccourcir et vue qu il ni a pas d autre valeurs a ces 2 balises */
.logos:hover, #ouvert{
background: url(data:image/gif;base64,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);
}
-->
</style>
</head>
<body>
<ul>
<li class="logos">Page 1 Ferme
</li>
<li class="logos" id="ouvert">Page 2 Ouverte <!-- Ajour d'une id ou d une class sur la page ouverte -->
</li>
<li class="logos">Page 3 Ferme
</li>
<li class="logos">Page 4 Ferme
</li>
<li class="logos">Page 5 Ferme
</li>
</ul>
</body>
</html>
a+
EDIT: j ai poste pendant que tu disais que c est une includ php !! donc cela change tout ! je laisse la reponse si elle sert a d autre en css
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣