IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Un Menu déroulant avec des images


Sujet :

CSS

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Points : 47
    Points
    47
    Par défaut Un Menu déroulant avec des images
    Bonjour à vous.
    Je souhaite attaquer mon menu déroulant.
    Par contre, je souhaite avoir votre avis sur certains points.
    1/ Je souhaite savoir si c'est mieux un MENU flash ou HTML / CSS ?
    2/ Je voudrai savoir s'il existe des tutos pour faire un menu ( Comme l'onglet "Participez" par exemple ). C'est à dire insérer des images dans les sous menus par rubrique.
    3/ Existe t'il des inconvénients à utiliser du Javascript ?
    Merci de me conseiller et de m'aider.

  2. #2
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2007
    Messages
    469
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Janvier 2007
    Messages : 469
    Points : 525
    Points
    525
    Par défaut
    Oublie déjà Flash pour tes menus, les liens sont plus facilement indexables si ton menu est réalisé en CSS voir CSS / JS (JQuery).

    Exemple CSS / JQuery :
    http://www.sohtanaka.com/web-design/...-w-css-jquery/
    accompagné d'un tutoriel

    Exemple full CSS :
    http://www.snoupix.com/demo/css3-meg...menu/demo.html

  3. #3
    Membre actif Avatar de firehist
    Homme Profil pro
    Intégrateur Web Freelance
    Inscrit en
    Février 2008
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France

    Informations professionnelles :
    Activité : Intégrateur Web Freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2008
    Messages : 151
    Points : 214
    Points
    214
    Par défaut
    Bonjour!

    Je vais essayer de te répondre:

    1/ Pour ma part je te conseille de bannir le Flash. Un menu en HTML/CSS est faisable, tu peux également y rajouter du javascript (ou jQuery) pour animer le pâté!

    2/ Google is your best friend
    Rien ne t'empêche d'utiliser la méthode du Sideduzero, c'est à dire de construire ton menu simplement:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul><li>menu1</li><li>menu2</li></ul>
    avec évidemment le style qui te convient.
    Puis de capturer l'évènement onmouseover sur tes balises <li></li>, et au passage de la souris, afficher une balise <div> qui contiendras tous ce que tu veux: image, titres, etc.
    En jQuery cela donnerai par exemple:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
     
    <script type="text/javascript">
    	$().ready(function() {
    		$("#menuBar li").hover(function() {
    			// Quand la souris passe dessus
    			var currentId = $(this).attr("id");
    			$(currentId + "_content").css("display", "block");
    		}, function() {
    			// Quand la souris s'en va ...
    			var currentId = $(this).attr("id");
    			$(currentId + "_content").css("display", "none");
    		});
    	});
    </script>
    <div id="menuBar">
    	<ul>
    		<li id="menu1">menu1</li>
    		<li id="menu2">menu2</li>
    	</ul>
    	<div id="menu1_content" style="display:none">
    		<h1>Trop cool</h1>
    		<img src="ton_image.png" alt="mmh" title="pouet" />
    	</div>
    	<div id="menu2_content" style="display:none">
    		<h1>Trop cool</h1>
    		<img src="ton_image.png" alt="mmh" title="pouet" />
    	</div>
    </div>
    Après il faut bien évidemment appliquer le style à tes divs pour que tous soit en forme!

    3/ Je ne vois aujourd'hui que très peu d'inconvénients à utiliser JavaScript. Le plus important est le risque que l'utilisateur est désactivé ce dernier sur son poste, ce qui est extrêmement rare, environ 10% des gens sont dans ce cas. Il faut compter dans ce pourcentage (totalement approximatif) tous les gens qui utilisent des navigateurs où Javascript n'est pas installé nativement (Lynx, certains PDA, etc.).

    Bon dév'

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Points : 47
    Points
    47
    Par défaut
    Gaëtan et Firehiste,
    Merci de vos conseils et de m'avoir aidé, et merci pour les cours CSS et la FAQ CSS.
    Vos conseils m'ont beaucoup aidé et m'ont fait avancé.
    Cependant je pose une question qui n'a peut être rien à voir :
    - Je suis entrain de construire ma page web, c'est à dire ma page index. Lorsque je fais un test dan le navigateur FIREFOX en local, tout marche nickel, et quand je l'ouvre dans Internet Explorer 8, la page ne s'affiche pas du tout et il m'affiche le message suivant : "Internet Explorer ne peut pas afficher cette page Web " Et juste en dessous, j'ai un onglet "Diagnostiquer les problèmes de connecxion".
    Savez vous d'où peut venir le problème ?

Discussions similaires

  1. [OpenOffice][Tableur] Comment réaliser une liste déroulante avec des images
    Par flexi2202 dans le forum OpenOffice & LibreOffice
    Réponses: 0
    Dernier message: 30/04/2015, 10h34
  2. [WD-2002] Menu déroulant avec des smiley
    Par fracine dans le forum Word
    Réponses: 1
    Dernier message: 01/10/2013, 07h39
  3. Variable menu avec des images
    Par Loadlucas dans le forum ActionScript 1 & ActionScript 2
    Réponses: 3
    Dernier message: 17/12/2008, 21h31
  4. [MySQL] Menu déroulant avec des données d'une base MySQL
    Par kamclasse dans le forum PHP & Base de données
    Réponses: 23
    Dernier message: 06/08/2008, 17h02
  5. problème menu déroulant avec des images
    Par -Neo- dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 19/02/2008, 17h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo