begin process at 2010 02 10 08:41:49
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Menu & Co

 > MENU AVEC ROULETTE

MENU AVEC ROULETTE


 Information sur la source

Note :
Aucune note
Catégorie :Menu & Co Classé sous :roulette, menu, dynamique, position, tourner Niveau :Initié Date de création :23/03/2009 Date de mise à jour :24/03/2009 22:18:35 Vu / téléchargé :4 403 / 593

Auteur : jdmcreator

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

 Description

Cliquez pour voir la capture en taille normale
C'est un menu qui utilise une roulette pour se déplacer. C'est un projet que j'ai trouvé dans mes dossiers il y a quelques temps. Pour meilleurs résultats, utiliser Safari ou Firefox, car IE ne gère pas encore la propriété CSS border-radius.

Source


 Conclusion

Je crois qu'il y a un moyen de comprimer encore plus ma source avec des tableaux et des boucles mais je ne m'y suis pas encore arrêté. J'ai encore quelques petits problèmes à règler (transformer les champs caché en variable, transformer le div en image...)

 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


 Historique

23 mars 2009 18:26:47 :
Modification de la présentation
24 mars 2009 22:18:36 :
Version 1.0. : Grosse mise à jour, remplacement des champs cachés par des variables, compatibilité W3C, correction de bugs.

 Sources du même auteur

OUTIL DE SÉLECTION
DÉTECTER SI CSS EST ACTIVÉ
ÉMULER OUTERHTML
Source avec Zip Source avec une capture MOTEUR DE RECHERCHE SANS PHP
TROUVER LES FACTEURS D'UN NOMBRE

 Sources de la même categorie

Source avec Zip Source avec une capture MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma
Source avec Zip Source avec une capture MENU VERTICALE EN TRANSPARENCE par dlvains
Source avec Zip Source avec une capture MENU DÉROULANT EN IMAGES par dlvains
Source avec Zip TBFRAME: TAB BROWSING FRAME par triumphs
Source avec Zip Source avec une capture MENU PRINCIPAL par ali1987

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MENU HORIZONTALE RÉALISÉ AVEC DYNAMIC par Kimjoa
Source avec Zip DYNAMIC MENU AND NAME (SUB) MENUS V1.0 par astro53
Source avec Zip Source avec une capture MENU VERTICAL DYNAMIQUE par ads31
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12
Source avec Zip EXTRACTEUR DES IMAGES ET DES LIENS par abdelaziz_info

Commentaires et avis

Commentaire de Arto_8000 le 24/03/2009 02:39:58

L'idée est intéressant, mais la façon que c'est codée l'est moins.

Côté HTML :

- Tout le style CSS ne doit normalement pas se trouver dans ton code HMTL. Dans un fichier externe est l'idéal.
- Les balises dans ton code sont soit tous en majuscule ou tous en minuscule pas les deux.
- Les valeurs des attributs dans ton code HTML doivent être toujours entre guillemet.
- Quand une balise n'a pas de balise de fin comme la balise br ou link, on doit mettre un "/" à la fin de la balise (ex.: <br/>).
- Mettre un doctype à ta page est bon, mais assure toi au moins que ta page rencontre les normes pour avoir ce doctype. Pour savoir si tout est correct, valide le sur : http://validator.w3.org/.

Côté Javascript :

- Ton code est illisible. Indente le et met des commentaires.
- Des variables globales sont à préférer au lieu de passer par des inputs de type caché. Une variable globale peut être déclaré de deux façons. Quand tu es à l'extérieur d'une fonction, on écrit "var nomDeTaVariable='une valeur'" et quand on est dans une fonction c'est la même chose, mais sans le "var".
- Des noms plus significatif que "test", aiderai aussi beaucoup à la compréhension de ton code.

Commentaire de kazma le 24/03/2009 11:03:52

c'est vrais que l'idée est intéressante mais il y a encore du travaille afin d'obtenir quelque chose de fiable

Commentaire de bw_hades le 24/03/2009 16:17:21

Je rejoins Kazma, le concept est sympa. Par contre, niveau ergonomie et intuitivité, étant donné qu'on voit déjà les différents éléments accessibles, il est plus "logique" de vouloir cliquer dessus plutôt que de "tourner" la roulette pour les atteindre.
Il faudrait voir la réaction d'utilisateurs si on cache la liste des éléments !

Une remarque : sous firefox, lorsque je déplace la souris dans le carré jaune (le bouton), c'est comme si je me déplaçais dans la roulette, l'élément sélectionné change...

Je n'ai pas regardé le code, donc pas de commentaire dessus.

Bonne continuation en tout cas.

P.-S. : c'était mon premier commentaire !!

Commentaire de jdmcreator le 24/03/2009 22:05:54

Bonjour,

@ Arto_8000 : J'ai créé une nouvelle version. Cette fois les styles CSS sont entièrement dans le fichier css.css . Le fichier HTML est validé par le validateur W3C et tu avais raison, j'ai mis la mauvaise doctype. Aussi j'ai mis les balises en minuscules.

Pour le code javascript, je l'ai espacer et j'ai rajouter quelques commentaires. J'ai remplacé les champs cachés par des variables au nom intuitifs.

Merci, pour tes commentaires constructifs ;)

@ Kazma : Merci mais pourrais-tu donner plus de détails sur un résultat fiable ?

@ BW_Hades : Que veux tu dire par cacher la liste des éléments, je comprends mal le concept. Quand au carré jaune, c'est normal cela faisais ça dans tous les navigateurs, j'ai réglé le problème dans cette nouvelle version.

Merci beaucoup,

JDMCreator

Commentaire de bw_hades le 25/03/2009 09:30:20

@ JDMCreator : je vais essayer d'être un peu plus clair... En l'état aujourd'hui, le visiteur du site voir la liste des options possibles et doit tourner la roulette pour sélectionner celle qu'il veut puis appuyer sur bouton pour la valider.
En terme de praticité, je pense que bon nombre de visiteurs préfèreraient cliquer directement sur l'option voulue plutôt que de tourner la roulette.
Ce que je proposais, c'était de ne pas afficher cette liste d'options justement. En tournant la roulette, l'utilisateur verrait qu'elle option est sélectionnée, mais les autres options possibles ne seraient pas visibles à l'écran.
Ca pose le problème de ne pas connaître à l'avance les options possibles mais bon, ce qui n'est pas forcément plus agréable pour l'utilisateur.

Commentaire de kazma le 25/03/2009 10:57:58

un résultat fiable

c'est a dire qui fonctionne parfaitement
sinon pour les defaults quand je me promene anarchiquement le menu change de position heureusement on arrive a retrouver la position en retournant autour il y avait un autre default mais apparemment corrige qui etait le deplacement dans le jaune qui faisait changer l'élément.
au niveau du cercle qui est carre sur ie on aura compris que ie ne supporte pas radius
et pour finir ce serait peut être mieux de mettre une image voir quatres (une par position) qui aurait la forme d'une molette afin que l'on comprenne que l'on doit tourner.
++


Commentaire de jdmcreator le 25/03/2009 13:05:21

Bonjour,

Il est vrai que niveau pratique, le menu est plus ou moins bon. Mais il pourrait être utilisé pour (par exemple) une liste de lecture de musique. Pour cacher les éléments, c'est simple. Il faut ajouter (dans le fichier css.css) dans le contenu de ELEMENT

visibility:hidden;

et rajouter dans ELEMENTFOCUS

visibility:visible;

@ Kazma : Merci pour le bug, je vais essayer de le reproduire pour le corriger. Quand au DIV, je vais le remplacer par une image dans la prochaine mise à jour avec de nouveaux éléments (comme plus besoin de position:absolute). Par contre, qu'elle ressemble à une roulette, je ne suis pas graphiste et cela risque d'être simplement un cercle :P ET oui, le bug du cercle jaune à été corrigé ;)

Un grand merci à vous,

JDMCreator

Commentaire de plarts le 30/03/2009 15:24:19

C'est bien de faire des petits outils,
mais j'aimerai voir des exemples ou ils peuvent être vraiment utiles ?

Commentaire de jdmcreator le 01/04/2009 00:51:35

Bonjour,

La fonction est faite afin de trouver si la roulette va vers le haut ou vers le bas. Ensuite, tu peux l'utiliser comme tu le souhaites (ici, dans l'exemple, un menu)

Il peut être utilisé pour a peut prêt n'importe quoi. Pour imiter une barre de défilement, pour faire augmenter la valeur d'un nombre (plus rapide que cliquer sur un bouton ;) ) pour un jeu...

Il y a de multitude de possibilité. Mais tu as raison et lors de la prochaine mise à jour (version 1.1), je rajouterai d'autres exemples ;)

JDMCreator

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Javascript - Menu dynamique en fonction de la position du curseur sur celui-ci [ par sebastiengoret ] Bonjour à tous, Je cherche un moyen de créer un menu dynamique verticalement. Ce menu contient une série d'image provenant d'une base de données et pe menu déroulant dynamique mysql [ par cobra176 ] bonjour a tous je cherche le moyen de faire 2 menu déroulant utilisant une base de données.la premier permet de faire un choix generale et l'autre plu menu horizontal dynamique [ par mitia07 ] Bonjour à tous, je suis nouveau sur le forum;je vois le code pour faire le menu horizontal dynamique avec fondu et je le teste,il marche bien mais mon Menu avec position absolue [ par zakmanengineer ] bonjour tout le monde,j'ai un problème avec un menu, j'ai découpé une page web avec photoshop, la page est dans une balise &lt;center&gt; quand j'ai i Problème alignement menu déroulant [ par Sandra28 ] Bonjour,J'aurais besoin de votre aide pour un problème sur un menu déroulant.Mon menu se déroule bien, mes liens fonctionnent, mais le problème que je menu dynamique déroulant [ par ajor ] Bonjour à tous,Je souhaiterais inclure un menu déroulant sur mon site PHP/MySQL. On m'a dit que c'était assez facile à faire avec Javascript, mais com Menu dynamique à partir des fichiers d'un répertoire [ par dircom13 ] Bonsoir,Débutant cherche, désespérément, à comprendre comment construire un menu dynamique composé à partir des fichiers d'un répertoire.Merci d'avanc menu dynamique et javascript qui ne se lance pas [ par sxmcrow ] menu dynamique [ par mamy ] Bonjour,voilà je dois créer une page web pour un site de vente en lignesur ma page d'accueil je vais afficher le menu avec les grandes catégories de p Menu dynamique [ par bside8 ] Bonjour,je souhaite réaliser un menu somme toute classique consistant à faire apparaître un menu détaillé lors du passage de la souris sur l'un des it


Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
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 : 1,045 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales