Je souhaite créer un menu latéral en HTML uniquement en utilisant CSS si possible. Le hic 22 est que j'ai besoin que le menu se déplace de la gauche vers la droite de l'écran à l'aide d'un interrupteur / bouton. La raison en est que j'ai un ami qui n'a qu'une main et ce serait une fonctionnalité d'accessibilité pour lui. J'en savais assez pour faire du codage Web, mais je ne connais pas la terminologie pour trouver ce que je recherche.
Les trois seules façons dont je comprends de faire cela sont les suivantes.
Iframe: je ne veux pas l'utiliser car je ne peux pas le styliser.
Div: je ne sais pas comment je cacherais ou afficherais div sans casser une mise en page Web.
Coder un code HTML séparé: il semble qu'il devrait y avoir un meilleur moyen.
Toutes les ressources ou suggestions que vous pouvez me fournir et qui peuvent m'aider dans ce projet seraient INCROYABLES !!! Merci pour votre temps et votre aide !!!
3 Réponses :
Si j'ai bien compris, vous souhaitez changer la position d'un menu lorsqu'un utilisateur clique sur un bouton.
Pour cela, nous devons d'abord créer un menu simple et un bouton en HTML, comme ceci:
togglePosition = () => {
const menu = document.querySelector('ul')
if(menu.className == 'left') {
menu.className = 'right';
} else {
menu.className = 'left';
}
}
Pour ce HTML, nous devons écrire le CSS correspondant. p >
.left {
float: left;
}
.right {
float: right;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0
}
button {
display: block;
}
La propriété CSS float peut positionner des éléments HTML à gauche et à droite. C'est pourquoi j'ai créé deux classes CSS pour eux. L'application d'une de ces classes au menu le fera changer de position ( .left pour une position à gauche, .right pour une position à droite).
Veuillez noter que le menu dans le HTML a un nom de classe de .left . C'est la position initiale de l'endroit où vous voulez que votre menu soit.
Nous devons maintenant faire basculer le menu entre les classes .left et .right en cliquant sur le bouton dans le HTML. Nous pouvons le faire en écrivant une fonction en javascript et en l'appelant à l'aide de la touche onClick dans le bouton. Dans ce cas, la fonction togglePosition () sera appelée pour basculer les noms de classe du menu. Cette fonction peut ressembler à ceci:
<ul class="left">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
<br class="clearFloat" />
<button onClick={togglePosition()}>Change position</button>
Tout cela est très basique et il existe des moyens meilleurs / plus optimisés de le faire, mais j'espère que vous comprendrez le concept et que vous pourrez apprendre à partir de cela. Lien vers une aire de jeu interactive: https://jsfiddle.net/udwfnzme/4/ p >
Oui, le code que vous avez fourni était ce que j'essayais de comprendre! Après avoir lu votre code, je me sens un peu idiot. La réponse était devant moi et je ne pouvais tout simplement pas la voir. Merci pour la ressource vraiment intéressante que vous venez de me fournir. si vous êtes prêt à fournir une ressource pour les optimisations dont vous avez parlé, je vais étudier comment les mettre en œuvre.
Je ferais quelque chose comme ceci:
Si j'ai mon menu dans un Et quand j'appuie sur le commutateur, j'ajoute une classe à ce conteneur en utilisant JS. Cette classe serait quelque chose comme ça. appelons-le # my-menu-container . Je styliserais le menu avec quelque chose comme ceci: #my-menu-container.menu-right {
right: 0;
}
let btn = document.getElementById('my-switch');
btn.onclick = () => {
let menu = document.getElementById('my-menu-container');
menu.classList.add('menu-right')
}
#my-menu-container {
position: absolute;
top: 0;
left: 0;
}
Cela semble vraiment utile et étonnamment simple, mais je n'ai pas encore de formation Js. Je vais voir comment mettre en œuvre cela et comprendre comment cela fonctionne. Rien de tel qu'une formation en cours d'emploi !!! Merci pour l'exemple et je vais voir si je peux le mettre en œuvre.
cela peut être fait avec des variables CSS: https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/
Cool, je vais certainement relire celui-ci! Peu d'avance mais j'aime les défis. Merci pour votre temps et votre suggestion.
Pourriez-vous publier ce que vous avez essayé jusqu'à présent afin qu'il puisse être amélioré?
Je travaille sur l'accessibilité des sites Web et j'essaie de comprendre pourquoi avoir un bras nécessiterait qu'un menu soit affiché à gauche ou à droite. la souris fonctionne de la même manière quelle que soit la main que vous utilisez, et limiter la distance dont vous avez besoin pour déplacer la souris ne serait pas vraiment un problème. Je n'utilise de toute façon qu'une seule main lorsque j'utilise la souris et je n'ai pas trouvé les menus des deux côtés difficiles à utiliser. pouvez-vous expliquer plus en quoi un menu de droite ou de gauche facilite l'accessibilité?
Mon ami n'a pas une très bonne mobilité dans sa main restante. Cela lui permettrait d'utiliser le site Web à partir de n'importe quel écran tactile avec un peu plus de facilité. J'espère que cela lui permettra de ne pas avoir à poser la tablette sur une table et à picorer l'écran pour ainsi dire.