J'aimerais créer la page Web suivante, où la barre de navigation diminue et est inclinée.
Donc, lorsqu'un utilisateur ouvre le site Web, sa première page a l'air
] 1
Puis lorsqu'un utilisateur appuie sur la "touche MENU" (que je n'ai pas dessiné), la barre de menus suivante apparaît (glisse idéalement en tant qu'amimation)
J'ai vraiment besoin d'aide pour concevoir la barre de navigation inclinée et ajouter l'animation ultérieure. Merci!
3 Réponses :
Une façon de le faire est si vous avez une image triangle, avec une hauteur de 0. Et tous vos éléments de menu sont en haut de l'écran, hors de vue. Lorsque vous souhaitez que le menu glisse vers le bas, utilisez JQuery Animate pour augmenter la hauteur de l'image et glisser tous les éléments de menu vers le bas.
Vous pouvez utiliser une forme SVG comme arrière-plan et vraiment n'importe quelle forme que vous souhaitez faire.
Codepen lien avec une animation
html: CSS:
J'ai fait un petit moyen à l'aide d'un piston Clip-Chemin et de CSS. De cette façon, vous pouvez éviter JavaScript et le code n'est pas sensible aux pixels nécessaires.
html lien vers Code Pen pour ceci:
https://codepen.io/mfortunato/pen/jowmxvl