28173 sujets

CSS et mise en forme, CSS3

Menu dynamique, réglage du css

Bonjour,

Je tourne sous oscommerce et j'ai installé une contribution me permettant d'avoir un menu dynamique qui utilise le css.
Pour le moment je n'ai qu'une sous catégorie dans la rubrique "complément" afin de faire un test.

css provenant de ce site :

http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones3.html

Ayant un niveau de css de proche du zéro, je souhaiterai obtenir ce type de résultat :

http://www.htmldog.com/articles/suckerfish/dropdowns/example

Par défault vous pouvez constater que le menu devient orange au passage de la souris, et ne possède pas de séparation.

voici mon code css : 

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: 10px;
}

	
/* Menu items with subcategories */	
#nav a.daddy {

}

/* Selected items with subcategories */	
#nav li.selected {
    background-color: #FFCC00;
}


et voici mon site :

http://www.naturopathie-renovee.fr/catalog/
Modifié par kervano (06 Sep 2007 - 00:06)
Si tu veux que seul le lien survolé ait un fond coloré, il faut que tu déclares cette couleur (ou d'autres propriétés, border, text-decoration, etc.) seulement à ton lien au survol, c'est-à-dire via le sélecteur a:hover au lieu de ul que tu utilises pour l'instant, et qui lui concerne la liste en entier.
Bonjour,

L'utilisation de la pseudo-classe CSS :hover pour construire des menus déroulants est généralement déconseillée, car peu efficace. De plus, ce n'est pas à la feuille de styles de gérer le comportement dynamique des éléments d'une page. On utilisera donc plutôt Javascript.

Donc:
- menu déroulant via Javascript (pour tous les navigateurs);
- de préférence, utilisable au clavier (ici, ça n'est pas le cas);
- éviter de faire une menu sur plusieurs niveaux (ergonomie déplorable)... si on a besoin d'une telle profondeur, faire un plan de site, imaginer d'autres systèmes de navigation, etc.

Bonne continuation. Smiley smile
a écrit :
L'utilisation de la pseudo-classe CSS :hover pour construire des menus déroulants est généralement déconseillée, car peu efficace. De plus, ce n'est pas à la feuille de styles de gérer le comportement dynamique des éléments d'une page. On utilisera donc plutôt Javascript.

Donc:
- menu déroulant via Javascript (pour tous les navigateurs);
- de préférence, utilisable au clavier (ici, ça n'est pas le cas);
- éviter de faire une menu sur plusieurs niveaux (ergonomie déplorable)... si on a besoin d'une telle profondeur, faire un plan de site, imaginer d'autres systèmes de navigation, etc.

Bonne continuation.


Merci à toi mais n'y connaissant pas grand chose je me suis contenté d'utiliser une contribution officiel pour oscommerce, j'ai commencé à modifier le code du css en revanche je constate un décallage sous IE7 alors que sous FF cela marche bien. En fait il m'est impossible d'accéder à la rubrique "parfum" : afin de constater mon pb aller dans complément > bain douche > parfum. Que dois je régler pour ne pas avoir ce pb sous IE?

voici le code de mon css modifié

<style type="text/css">

body {
	font: 78%/1.5 arial, helvetica, serif;
	background: white url(bgbaba.gif);
	text-align: center;
	padding: 0;
	margin: 2em;
}

#container {
	width: 36em;
	background: #F4ECD9;
	text-align: left;
	border: 1px solid #eda;
	margin: 0 auto;
}

p {
	background: url(remorabg.gif) center no-repeat;
	margin: 1em 2em;
}

p#smurf {
	background: transparent;
	font-style: italic;
	text-align: center;
	font-weight: bold;
	color: #7C6240;
}

#smurf strong {
	font-size: 1.2em;
	color: black;
}

h1 {
	height: 108px;
	background: url(perciformes3.gif) bottom center no-repeat;
	text-indent: -999em;
	margin: 1em 0 0 0;
}

#nav, #nav ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 1;
	background: white;
	font-weight: bold;
	padding: 0;
	border: solid #eda;
	border-width: 1px 0;
	margin: 0 0 1em 0;
}

#nav a {
	display: block;
	width: 10em;
	w\idth: 6em;
	color: #7C6240;
	text-decoration: none;
	padding: 0.25em 2em;
}

#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
	float: left;
	padding: 0;
	width: 10em;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
}

#nav li li {
	padding-right: 1em;
	width: 13em
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: #eda;
}

#content {
	clear: left;
}

#content a {
	color: #7C6240;
}

#content a:hover {
	text-decoration: none;
}

#scaffolding {
	height: 70px;
	background: white url(/images/header_bg.gif) no-repeat;
	border: solid #eda;
	border-width: 1px 0 0 0;
	margin: 1em 0 0 0;
}

#scaffolding a {
	text-decoration: none;
	text-indent: -999em;
	display: block;
	height: 70px;
	background: url(/images/hdlogo_flip2.gif) no-repeat;
	background-position: 181px 0;
}

#scaffolding a:hover {
	background-position: 181px -70px;
}

</style>
Sujet clos
Aller à