Menu css type Comment ca Marche [Fermé]

Signaler
-
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010
-
Bonjour,
Le passage au web 2.0 nous oblige de changer le look de nos vieux sites html, et donc j'ai procedé a changer entierement mon site en css au lieu des tableaux, mais depuis plus de deux mois, je n'arrive pas a faire un menu horisental de type CCM ci-dessus qui change de couleur au survol de la souris.
Mon souci ne pas le code html, mais ce les images de fond, comment les creer, avec quel logiciel? PS ou IL? de quelle taille?
Ensuite quant on genere le code css, est ce qu'on pourra changer la couleur des different liens. il sera tres utile si qqn pourra nous faire un tuto a ce sujet, je cherché partout sur google, mais les tutos sont rare et/ou incomplet.
J'attend avec impatience vos suggestions et vos idée sur cette nouvelle technologie.
Merci d'avance

10 réponses

Messages postés
18385
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
4 juillet 2020
4 195
Comme c'est un dégradé vertical, une image de 1px de largeur suffit, il faudra le faire répéter horizontalement en CSS. Pour la hauteur, c'est tout simplement la hauteur de ton lien. Si tu n'as pas Photoshop, pas besoin de l'acheter juste pour ça : The GIMP suffit.

Le « web 2.0 » n'est qu'un buzzword qui ne veut rien dire de précis, tu n'es pas obligé de suivre le mouvement. Le Web 2.0 ne s'arrête pas au design : c'est aussi AJAX, les interfaces intuitives (glisser-déposer, ...), Atom, RSS, ...

Si ça peut d'aider : https://css.developpez.com/galerie/?page=menus-horizontaux#barre-navigation

Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
Messages postés
247
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
22 juin 2015
47
Bonjour,

Un (long) tour par là https://www.alsacreations.com/tutoriels est vivement recommandé.
Messages postés
1633
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
110
Je vois pas le dégradé moi, c'est quoi ce délire. ;)

Même sur Google ça doit se trouver.
Messages postés
18385
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
4 juillet 2020
4 195
On parle du menu gris en haut qui devient rouge quand la souris passe dessus.
Messages postés
1633
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
110
Je sais bien F16. C'était de l'auto-dérision. ;)
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010

Merci pour les reponses, j'ai consacré toute la journée pour arriver enfin a créer ce beau menu.
Alors maintenant il me reste les sous menu, c'est encore de la casse tete, je vous montrerais le code html et le code css si qqn pourra peut etre m'aider.
Ici je parle du menu CCM gris qui change de couleur au passage de la souris, mais sauf que cette fois-ci avec des sous menu de type : le journal du net.
Messages postés
18385
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
4 juillet 2020
4 195
Ça se gère en Javascript.
Si tu t'emmêles déjà les pinceaux avec le (x)HTML/CSS ...
Enfin, c'est aussi possible sans JS mais le texte en-dessous disparait quand la souris sort.
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010

Ah oui, s'il s'agit de javascript, j'en parle plus, parce que c'est tres compliqué.
J'aimerais que se soit entierement en CSS, je part pas loin, le menu en question est tout en haut a droite du champ de recherche, sur ce site, la ou y a (langue, nos sites, RSS).
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
206
Si tu veux du CSS pur, il faut aller voir par là :
http://css.mammouthland.net/menu-horizontal-en-css.php#graphique
Messages postés
18385
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
4 juillet 2020
4 195
Pourquoi parles-tu du site « Le Journal Du Net » d'abord ?
Ce que tu veux faire n'est rien d'autre qu'un menu déroulant.
Va sur Google pour faire tes recherches.
Messages postés
1633
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
110
La partie xHTML, tu l'a fais du type :

<ul>

<li>Projet 01
<ul>
<li>Projet 01 - 01</li>
<li>Projet 01 - 02</li>
</ul>
</li>

<li>Projet 02
<ul>
<li>Projet 02 - 01</li>
<li>Projet 02 - 02</li>
</ul>
</li>

</ul>


J'espère qu'il n'y a pas d'erreur, parce que bonjour la honte. ;)
Messages postés
18385
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
4 juillet 2020
4 195
Il n'y a pas d'erreur :)
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010

Merci infiniment pour ta reponse en temps reel
Je veux integrer un sous menu a ce menu, les codes en bas.
Pour qu'il devient comme le menu tout en haut a droite du champs de recherche dans cette page de CCM.

La partie xHTML:

<div id="menu">
<ul>
<li><a href="*">Accueil</a></li>
<li><a href="*">Tourisme</a></li>
<li><a href="*">Emploi</a></li>
<li><a href="*">Formation</a></li>
</ul>
</div>

Voici la partie CSS:

#menu {
background-image: url(cell_background.gif);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
#menu li {
display: inline;
}
#menu li a {
font-weight: bold;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
margin: -1px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#menu li a:hover, #top-menu li a:focus {
color: #FFF;
background-image: url(bg.gif);
background-repeat: repeat;
}
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010

En fait il y a eu une erreur, je fermais la premiere liste </LI>
donc, je faisais ca:
<ul>
<li>Projet 01</li>
<ul>
<li>Projet 01 - 01</li>
<li>Projet 01 - 02</li>
</ul>

<li>Projet 02</li>
<ul>
<li>Projet 02 - 01</li>
<li>Projet 02 - 02</li>
</ul>
</ul>

au lieu de:

<ul>
<li>Projet 01
<ul>
<li>Projet 01 - 01</li>
<li>Projet 01 - 02</li>
</ul>
</li>

<li>Projet 02
<ul>
<li>Projet 02 - 01</li>
<li>Projet 02 - 02</li>
</ul>
</li>
</ul>
Merci encore pour cette rectification
Je vais le reconstruire, et si y a qqchose, je poserai.