Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
1727 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Créer une sidebar verticale CSS only

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Créer une sidebar verticale CSS only

n°2315481
MaybeEijOr​Not
but someone at least
Posté le 19-05-2018 à 23:48:34  profilanswer
 

Bonjour,

 

Je cherche à créer une sidebar verticale dans laquelle pourra apparaître menu / settings / autres. Je voudrais faire cette sidebar uniquement en CSS, que la sidebar prenne toute la hauteur de la fenêtre, soit fixe, soit "rétractable" et soit animée lors de son glissement.

 

Voilà ce que j'ai pu faire : https://codepen.io/anon/pen/KRbLGo

 

Malheureusement, je suis bloqué car je ne peux pas animer la propriété right de ma div "menu", en effet cette propriété passe d'une valeur pre-calculée à une valeur que le navigateur devra calculer (initial), cela semble poser problème pour la transition.
Évidemment je pourrais simplement fixer la largeur de cette div afin de ne pas avoir à lancer de calcule mais le but est aussi d'avoir une barre de largeur variable.

 

Une idée ?

 

Et en spécial bonus, je suis aussi preneur si vous arrivez à la faire fonctionner en position sticky plutôt que fixed afin d'ancrer le bouton plus bas.

 


EDIT : simplification du HTML/CSS.


Message édité par MaybeEijOrNot le 20-05-2018 à 00:16:30

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
mood
Publicité
Posté le 19-05-2018 à 23:48:34  profilanswer
 

n°2315482
MaybeEijOr​Not
but someone at least
Posté le 20-05-2018 à 00:44:11  profilanswer
 

Finalement j'ai fait un compromis. J'ai décalé mon menu sur la gauche de mon max-width. Il met un peu de temps pour apparaître car il doit parcourir de la distance hors de l'écran quand il est plus petit que la max-width. J'ai tenté d'ajuster ça avec une transition rapide au début puis plus lente vers la fin.
 
Résultat : https://codepen.io/anon/pen/BxvgZr


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2315778
xtieu
Posté le 24-05-2018 à 15:42:34  profilanswer
 

Je viens de forker ta sidebar et j'arrive à ça en jouant avec des labels + checkbox (qu'on ne voit pas). Ça utilise les vw pour la taille de la sidebar
 
https://codepen.io/anon/pen/QrRzNm


---------------
"Jean-Claude m'a Tuer" - © OS10
n°2315788
MaybeEijOr​Not
but someone at least
Posté le 24-05-2018 à 17:52:20  profilanswer
 

Oui mais les vw ça ne me va pas, le but c'est d'avoir une sidebar qui aura une largeur définie par son contenu sans excéder 320px et qui pourra occuper, au besoin, toute la largeur de l'écran sur les petites résolutions.
De plus, son contenu doit être fixe et donc suivre avec le défilement vertical.

 

Au final je me suis accordé sur quelque chose du genre : https://codepen.io/anon/pen/pVmmwv

 

Avec, en effet, toujours le problème que pour cacher la sidebar je la déplace vers la gauche du maximum de la largeur qu'elle pourrait faire. Mais je n'ai pas d'autre solution puisque je ne peux pas calculer sa largeur dans la propriété "left" et que pour une transition je suis obligé de passer d'une valeur connue à une autre valeur connue.
Il me reste à gérer le contenu de la sidebar par rapport à sa hauteur, mais avec ton idée de vw j'ai mis un vh de 100 et je pense qu'un défilement vertical à l'intérieur devrait faire l'affaire.

 


EDIT : sinon le coup de le checkbox est intéressant comme idée, je vais peut-être aussi voir de ce côté là.
EDIT2 : avec checkbox je trouve en effet l'idée meilleure : https://codepen.io/anon/pen/NMZPOB


Message édité par MaybeEijOrNot le 24-05-2018 à 21:07:30

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Créer une sidebar verticale CSS only

 

Sujets relatifs
SQL Créer une vue avec Nom Champs et Valeur dans des enregistrements[HTML/CSS][Javascript/Node.js] Formation Toulouse / Haute-Garonne
Qui veut m'aider à créer un ensemble d'applications similaire à java?Creer un fichier Sass avec SublimText
Quel langage pour créer un Youtube bis ?Indication du slide actif avec un slider Html/CSS
[JavaScript]Imprimer une div avec les CSS[CSS] Débutant - Barre horizontale en barre verticale
Créer fiche magasin à partir d'un fichier csv 
Plus de sujets relatifs à : Créer une sidebar verticale CSS only


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR