Comment créer un menu déroulant "collant" en CSS pur?

effet que je suis en train de réaliser:Comment créer un menu déroulant "collant" en CSS pur?

Dans la nouvelle refonte de Twitter, ils ont mis en place un menu déroulant « collant » pour la zone de paramètres de compte. Fondamentalement, lorsque vous cliquez sur votre nom d'utilisateur dans la barre de navigation globale noire en haut, un menu est ouvert et reste ouvert jusqu'à ce que vous cliquez à nouveau sur l'un des liens ou sur votre nom d'utilisateur pour le fermer.

Je voudrais obtenir exactement le même effet d'un menu collant avec juste CSS et HTML. Je suis d'accord avec l'utilisation des fonctionnalités CSS3, mais si cela peut être réalisé sans compter sur CSS3, c'est encore mieux.

Ce que j'ai essayé jusqu'à présent

Je peux créer le menu de navigation de base avec menu déroulant travail avec CSS et HTML pur, mais seulement en utilisant: hover pseudo-classe. J'ai essayé le: pseudoclass actif, mais malheureusement il ne "colle" pas et reste ouvert.

Cet effet déroulant "collant" est-il possible même sans javascript? Si ce n'est pas possible sans compter sur javascript, comment dois-je gérer cela afin qu'il se dégrade gracieusement?

Source

2010-09-28 Andrew De Andrade

jsfiddle (http://www.jsfiddle.net) s'il vous plaît ou du code ... – EKet

jsfiddle, hein? Tu veux que je poste du code? Étant donné la question, je ne pensais pas qu'il était nécessaire d'afficher du code. –

@AndrewDeAndrade Par _code_, il signifie html/css que vous avez essayé jusqu'à présent. – canon

Je m'en vais de mémoire car je ne peux pas accéder à Twitter depuis mon lieu de travail. Si je me souviens bien, le même script est utilisé sur la page principale pour se connecter. Il crée une petite fenêtre de type popup qui reste là même après avoir déplacé la souris.

Si c'est de cela que vous parlez, vous ne pouvez pas le faire avec CSS seulement; c'est un langage de style, pas un langage de script. Les styles de pseudo-classe :hover/:active se désappliqueront tous dès que cet événement s'arrêtera. L'alternative avec Javascript impliqué serait de faire du bouton un lien qui vous mène à une page réelle. Puis lier onclick pour faire apparaître un div positionné par défaut qui est caché par défaut (return false dans l'onclick pour éviter de suivre le lien). Ce div n'est pas caché jusqu'à ce que vous vouliez le cacher, et il commence par être caché, donc s'il n'a pas de Javascript, il ne saura pas ce qu'il manque.

Source

2010-09-28 22:50:52 Robert

C'est exactement l'effet que je vais faire. J'ai pensé que cela ne serait possible que si javascript était activé.En fait, cet effet est utilisé dans tout le site et je pense qu'il augmente considérablement la convivialité de Twitter pour la plupart des gens. Je ne pense pas qu'il soit nécessaire que cela mène même à une page réelle. Je pense qu'il peut être un href pointant vers "#" et javascript à la recherche d'un événement onclick. Si elle n'est pas active, elle s'active et si elle est inactive, elle est déchargée. Malheureusement, cette solution ne se dégrade pas correctement car elle ne permet pas de prendre en compte les paramètres avec un "#" href. –

C'est pourquoi le 'href' est un lien valide, et pas seulement #, de sorte que si javascript est désactivé, il ne renverra pas false, et ils seront redirigés vers la page. – Robert

Mais serai-je toujours en mesure de maintenir le clic pour ouvrir et cliquez pour fermer l'effet? Si je pointe ce lien vers une vraie page, les utilisateurs de javascript ne seront-ils pas redirigés vers cette page au lieu de voir le menu déroulant? Puis-je faire en sorte que seuls les utilisateurs avec Javascript désactivé ne soient pas redirigés vers une autre page et que ceux avec javascript activé restent sur la page actuelle et voient le menu déroulant? –

Il est possible d'obtenir avec l'aide de l'étiquette utilisation de CSS en combinaison avec l'entrée [type = "checkbox"] et : vérifié pseudoselector pour stocker l'état

Voir exemple à https://developer.mozilla.org/en/CSS/%3achecked

Source

2012-06-15 18:56:06

Utilisez la classe pseudo:focus au lieu de :active. Vous devrez peut-être également utiliser tabindex="" dans votre code HTML pour qu'un élément accepte le focus.

Toutefois, les écrans tactiles iOS ne semblent pas reconnaître tabindex="".

Source

2013-02-09 22:16:34 grant

Comment créer un menu déroulant "collant" en CSS pur?

Répondre

Questions connexes