Menu "déroulant" css compatible

Soyez le premier à donner votre avis sur cette source.

Vue 15 153 fois - Téléchargée 1 621 fois

Description

Après avoir cherché vainement des solutions pré conçues fiables, portables et accessibles, je vais tenter d'apporter ma contribution avec cette autre solution. Elle n'est pas innovante. Elle est simplement réellement testée.

Valid on Windows XP/Vista IE6 IE7, FF1.5, FF2, FF3, Opera 9, Safari 3, Chrome
Valid on Linux (Ubuntu) FF3
Valid on MacosX FF3, Safari 3
Valid on PC Lynx (hierarchical)

Source / Exemple :


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head id="head">
<title>
Menu
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link charset="utf-8" type="text/css" rel="stylesheet" href="css/ul-li-menu.css" media="screen" />

../..

CSS extract :

ul.menu li.level-one a {
	line-height : 30px;
	display : block;
	padding : 6px 15px 0;
	float : left;
	color : white;
	background-image : url(gfx/li-left.png);
	background-repeat : no-repeat;
	background-position : left top; 
}
ul.menu li.active a {
	padding : 3px 15px 3px;
	color : #414141;
	background-position : left bottom;
}
ul.menu li.has-submenu a {
	padding-right : 25px;
}
/* on mouse hover, display background center for first level LI */
ul.menu li.level-one:hover {
	background-position : right center;
	color:black; 
}

ul.menu li.level-one:hover a {
	padding-top : 2px;
	padding-bottom : 4px;
}

Conclusion :


A vous de conclure amis développeurs... :)

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
2
Date d'inscription
mercredi 4 novembre 2009
Statut
Membre
Dernière intervention
19 mars 2010

Sur Mac OSX fonctionne sans aucun probleme sur Safari 4 et FF 3.6. (Chez FF 3.5.7 les menus avaient tendance à disparaître de l'écran, une fois la liste visible, en commençant à déplacer la souris vers le bas !??).
Messages postés
17
Date d'inscription
vendredi 13 mars 2009
Statut
Membre
Dernière intervention
3 décembre 2009

@Bormat
Message laconique et peu constructif... En quoi c'est mieux ?
Ces codes ne sont pas similaires quant à leurs objectifs, capacités et portabilité.
cdlt
Messages postés
13
Date d'inscription
dimanche 29 juin 2008
Statut
Membre
Dernière intervention
26 juillet 2009

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.