begin process at 2012 02 05 02:55:57
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

WebDesign

 > MENU "DÉROULANT" CSS COMPATIBLE

MENU "DÉROULANT" CSS COMPATIBLE


 Information sur la source

Note :
Aucune note
Catégorie :WebDesign Niveau :Débutant Date de création :13/03/2009 Vu / téléchargé :11 932 / 1 138
Auteur : labotemplates

Ecrire un message privé
Site perso
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 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

  • <?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;
  • } 
<?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... :)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip CUSTOMISATION DE BUTTON TAGS AUTOMATIQUE
Source avec Zip CASCADING MENU CSS
Toutes les sources de labotemplates

 Sources de la même categorie

Source avec une capture MAQUETTE WEB 002 ( EN PSD) par yacdj
Source avec une capture MAQUETTE WEB 001 par yacdj
Source avec Zip DECOUPE MARS par sliper69
Source avec Zip MENU DÉROULAN par sliper69
Source avec Zip CUSTOMISATION DE BUTTON TAGS AUTOMATIQUE par labotemplates
Toutes les sources de la catégorie WebDesign

Commentaires et avis

Commentaire de bormat le 26/07/2009 23:21:57

il y a mieux là
[url]http://www.commentcamarche.net/forum/affich-4695837-menu-deroulant-en-css-ou-javascript[/url]

Commentaire de labotemplates le 27/07/2009 18:01:48

@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

Commentaire de jcomms le 19/03/2010 13:27:08

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 !??).

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Archos Tablette PC ARNOVA ARNOVA 10 4GB
Entre 200€ et 210€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Renewable Energy is Within ReachPhoto Framed Landscape Image of Monument Valley
Photo El Capitan View in Yosemite Nation Park 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,655 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)