Menu déroulant en diagonal

Bonsoir,

Je suis nouveau sur ce forum et ceci est mon 1er message.. Youpi

Voilà je dois faire un menu déroulant un peu particulier car il est en diagonal... En gros le menu sera horizontal et au passage sur un titre les sous-rubrique doivent se dérouler en diagonal vers la gauche, un peu comme un genre d'escalier... J'espère avoir été clair...

Je ne sais pas trop par quoi commencé et je viens vers vous pour savoir si vous auriez une bonne idée ?

Merci d'avance !

Stick

Bonjour,

Je pense qu'il va nous falloir un schéma pour visualiser la chose.

sinon pour commencer, le code HTML c'est bien, ensuite tu pourra styler ton menu ouvert puis l'animer avec JS.

Merci pour ta réponse

J'ai vu que la question avait déjà été posé... il y a 5 ans et sans réponse lol

ici

Je comprends que personne ne m'aide car pour l'instant je n'ai rien... Je reviendrai vers vous quand j'aurai fait quelque chose à la limite

bonjour,

voici un sujet similaire de 2007 avec des reponses (si je ne me trompe).

http://forum.alsacreations.com/topic-4-30544-2-Defi-pour-les-CSS-Masters.html

<edit> attention de se souvenir que le topic date de 2007. IE6 a perdu de son importance, les solutions proposées peuvent etre simplifiées, enfin voir ie7 </>
Modifié par gc-nomade (03 Mar 2011 - 21:14)

Bonsoir !

Merci beaucoup pour ton message, j'ai lu le forum et cela finalement répond qu'en partie à mon problème, et c'est déjà bien lol

Je joins l'Image qui montre en gros ce que je veux obtenir, et je ne vois pas comment gérer le décalage du menu vers la gauche...

Je vais essayé de vois ça demain, en tout cas merci et bonne nuit

Bonjour, bonsoir

Si on envisage les navigateurs actuels, le filtre matrix pour IE ( transform:matrix(); pour les autres) on peut reproduire l'image.
http://gcyrillus.free.fr/essai/matrix-menu-css3.html
(désolé la demo ne comporte pas de js pour le support du survol, juste css pour l'exemple).

Pour un menu avec de nombreux liens , on retrouve les defauts de touts les menus deroulants.

bonne continuation

GC

Bjour gc-nomade,

Quelle bonne surprise que ton message, c'est vraiment nickel même si cela ne fonctionne pas sur IE7/8 lol Mais c'est vraiment bien et je vais maintenant me bouger le "zouk" pour le faire marcher sur IE !! Va falloir quand même que j'étudie à fond ton code car je ne connaissais pas les matrix

En tout cas merci, je m'y plongerai la semaine prochaine car là j'ai bcp de travail, et je reviendrai vers vous car vous êtes vraiment efficace et sympathique !

Je vous montrerai bien sûr le résultat final !

A++++

A priori, le filtre pour IE fonctionne même sur les versions les plus ancienne.

Avec une gestion du menu déplier via javascript il me semble qu'il n'y ai aucun soucis. Dans le pire des cas les boites de liens seront a angles droit.

J'ai mis a jour la demo pour un aperçu possible des sous-niveau dans IE6.
(IE6,7 et 8 me montre de jolies boites bleu etirées )
IE8 ne pose aucun probleme au survol.
IE7 a du mal a réactualisé.
IE6 se voit affublé d'une bidouille pour tester le hover et voir les effets de bords du au positionement relatif/absolu avec menu ouvert.

JS needed anyway

++

Ouah je n'en attendais pas autant de votre part

Merci beaucoup je vous kiffe lol

- Sympa graphiquement.
- Pas utilisable au clavier il me semble.
- Pas utilisable sur un écran tactile (smartphone ou tablette).
- Utilisabilité problématique à la souris (déjà quand le menu est droit c'est parfois pénible, là c'est pas complètement rédhibitoire mais on a tendance à vite perdre un sous-menu).

Une grande partie de ces problèmes peut être résolue avec l'une des deux solutions suivantes:
1. Ne pas faire de putain de menu déroulant. Non mais. Réfléchir à des solutions intelligentes pour les problématiques d'architecture de l'information et de rédaction qui ont amené à choisir un menu déroulant au départ... des solutions éditoriales, quoi.
2. Faire un menu déroulant qui s'active au clic et pas au survol. Ça résoud pas mal de problèmes techniques ou d'utilisabilité. Par contre pour que ça «fonctionne» pour l'utilisateur il vaut mieux se limiter à un seul niveau de sous-menu, et il faut penser le design en fonction.

</rant>

@fvsh je n'osais pas la mise en garde aussi affirmer que ça pour la gestion obligatoire via javascript, j'en remet donc une couche. 100% d'accord avec toi, même s'il m'a fallu du temps pour bien saisir le pourquoi du comment, une etape probablement a passer et comprendre chez les intégrateurs débutants et moins débutants.

Pour le défaut (classique) du menu qui se referme grrrrr! , j'avais fais mumuse avec les pseudo:after ou :before pour elargir les zones réactives: http://yidille.free.fr/plux/valign/?31-before-content-et-rotate-au-service-des-zones-reactives
( a prendre au second degrés, CSS n'est pas la solution pour régler les problèmes ergonomiques mais peut en être la cause).

Du topic on devrait relever l'usage obligatoire du js pour les menus déroulant et les évités ou minimisés au maximum (amha).

Ensuite, petite mise en lumiere de transform:matrix(); et l'anecdote que cette effet n'est pas nouveau chez IE ... enfin , c'est vendrediiiii .

Je suis d'accord avec vous et je ne vois pas grand intérêt pour un menu du style... Après le client est roi et moi je fais ce qu'on me demande lol Même si j'ai rien fait au final...