Menu "déroulant" css compatible

Télécharger le projet
Commenter

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... :)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (labotemplates)