I need help tout do a short and simple deroulant menu with html and css...tank you...

Question

easy deroulant menu

Answer 1

Y'a pas de Css dans cet exemple (pas nécessaire pour que cet élément ait un comportement d'ouverture/fermeture, tant qu'on a pas besoin de le styler différemment, bien sûr ^^)...

Tout au plus, on peut y adjoindre quelque definition pour contourner le fait que l'ouverture 'pousse' les éléments suivant, comme ceci:

details > div { /* target only <div> direct child of <details> / cible seulement <div> descendant direct de <details> */
position:absolute; /* to no reserv place for displaying it (as layer) / pour ne pas prendre de place à l'affichage (comme un calque) */
}

... c'est suffisant si y'a pas besoin des propriétés 'top', 'right', 'bottom' and/or 'left' (pas besoin de déplacer), sinon je conseillerai de mettre 'display:relative;" à <details>, pour qu'il devienne la reference de ses descendants 'positionnés'.

Mais utiliser des éléments 'positionnés' ('relative' ET 'absolute' sont considérés comme tel) fait perdre aux éléments de type 'block' leur principal comportement de prendre toute la largeur disponible, et on a besoin d'en définir une largeur explicite si on veut... Et aussi, les unités relatives peuvent ne pas fonctionner comme attendu, car % est maintenant calculé relativement au premier parent 'positionné' (c'est pourquoi c'est conseillé de mettre 'position:relative' au premier parent ;))...

Answer 2

There's no Css in this example (not necessary for element have behaviour of opening/closing, while we don't need to style it differently, of course ^^)...

All the more, we can add some definition to workaround the fact that opening 'push' next elements, as in this:

details > div { /* target only <div> direct child of <details> / cible seulement <div> descendant direct de <details> */
position:absolute; /* to no reserv place for displaying it (as layer) / pour ne pas prendre de place à l'affichage (comme un calque) */
}

... is enough if you doesn't use 'top', 'right', 'bottom' and/or 'left' properties (no need to move), else I will advise to set 'display:relative;' to <details>, so it becomes the reference for absolute 'positionned' decendants.

But using 'positionned' elements ('relative' AND 'absolute' are considered as so ;P) make block elements loose their main behaviour of taking all width available, and you need to set it explicitly if you want... And also, the relative units could not work as expected, as % refer now to the first 'positionned' parent (that's why too it's advised to set 'position:relative' to the first parent ;))...

Answer 3

https://code.sololearn.com/W4j0UbyzvIDI/?ref=app

Answer 4

Le plus simple et le plus court, ça reste sommaire... après, juste avec Css et sans Js, c'est vite un peu complexe et pas vraiment court:
[The simplest and the shorstest is quite basic... next, only with Css and without Js, it's quickly a few complex and not really short:]

<details>
<summary>my drop-down menu title</summary>
<div>my hidden/shown menu content</div>
<details>

Default is closed (content hidden -- could be changed by adding 'open' boolean attribute: <details open>), and normal block element (open the 'menu' will push next below content)...
[par défaut c'est fermé (contenu caché - peut être changé en ajoutant l'attribut booléen 'open': <details open>), et c'est un élement normal de type block (l'ouverture du 'menu' va pousser le contenu suivant l'élément)]...

Answer 5

je comprends pas bien tes balises.... ya pas de CSS??

Answer 6

je voudrais également le code CSS svp....[i would like the CSS code too please ]

Answer 7

montre moi un exemple stp.... le code et la page