1. Accueil
  2. Graph
  3. Sources Graph
  4. Sources WebDesign
  5. Menu "déroulant" css compatible

Menu "déroulant" css compatible

0/5 (3 avis)

Vue 15 421 fois - Téléchargée 1 651 fois

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

Ajouter un commentaire Commentaires
jcomms
Messages postés
2
Date d'inscription
mercredi 4 novembre 2009
Statut
Membre
Dernière intervention
19 mars 2010
19 mars 2010 à 13:27
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 !??).
labotemplates
Messages postés
17
Date d'inscription
vendredi 13 mars 2009
Statut
Membre
Dernière intervention
3 décembre 2009
27 juil. 2009 à 18:01
@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
cs_bormat
Messages postés
13
Date d'inscription
dimanche 29 juin 2008
Statut
Membre
Dernière intervention
26 juillet 2009
26 juil. 2009 à 23:21
il y a mieux là
[url]http://www.commentcamarche.net/forum/affich-4695837-menu-deroulant-en-css-ou-javascript/url
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)