Dropdown Navigation Menu with Flexbox

Published: 29 March 2021
on channel: Angela Design
41,169
1k

Pseudo Elements Playlist:    • Figma to HTML CSS | Responsive Get St...  

New to CSS Grid? Watch the full Crash Course here:    • CSS Grid Crash Course | Beginners Tut...  

In this video I go over how to create this Dropdown Navigation Bar using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and then add hover effects with a pseudo element.

Enjoying this tutorial? Subscribe to stay up to date with my latest content:    / @angeladesign737  
Codepen: https://codepen.io/angeladelise/pen/w...

In this video I show you:
0:00 - Intro
0:16 - Starting HTML Code
0:35 - HTML Code
3:14 - CSS Code
4:26 - Nav CSS Code
11:08 - ::After Pseudo Element

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

--

Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M

--

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog:   / angeladelise  

--

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!


Watch video Dropdown Navigation Menu with Flexbox online without registration, duration hours minute second in high quality. This video was added by user Angela Design 29 March 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 41,16 once and liked it 1 thousand people.