Hey Pixels! This week you’ll be learning
how to create a dropdown menu with HTML5 and CSS3. Take a look at the HTML5 CSS3 Dropdown
Menu Tutorial video below. Be sure to take a look at the source files to see how it’s
made. First, we’re going to code the HTML5. Let’s
start with the unordered list tag. Within the unordered list tag, we’re going to add
three individual links on the menu using the list tag and within the list tag, we’re
going to add the anchor tag since it’s going to be used as a link to other parts of our
hypothetical website. For now, we don’t have a url to point the anchor, so we’re
just going to put the hashtag as a link placeholder. Once we’ve written all of our menu links,
we’re going to write a few lines of code for the the dropdown menu. First, create another
list with the class dropdown. Within the link we’re going to add an anchor tag with the
class dropdown-btn. Let’s label it Dropdown so we know which link will lead to the actual
dropdown menu. Now, we’re going to create a div and give
it the class dropdown-menu. Within this div, we’re going to put four anchor tags. For
this tutorial, I’m just going to give them descriptive names like link 1, link 2, etc.
That’s it for the HTML5. That was super easy! Double check your code and make sure
your opening tags have their respective closing tags and that there’s no missing brackets.
Be sure to check out my video 10 html coding mistakes if you’re having trouble with your
html code. Now, you’re ready to move on to the CSS!
So, we’ve coded all of the html and now we’re on the last step which is coding the
CSS. Let’s get started! First, we’re going to select the body tag and some basic styles,
like, font for the page, width of the page. We’re also going to add 20px of padding
around the perimeter of the website. Next, we’re going to style the unordered
list elements. We’re going to remove the default underline on anchors using using list-style-type:
none. We’re also going to reset themargin and padding by setting their value to 0. We’ll
be setting the overflow property tohidden and setting the background-color of the menu
to #1ebb90. Now we’re going to focus on the list elements.
First, we’re going to float the list items to the left. Then, we’re going to select
both the li a element and the dropdown-btnelement. Selecting more than one elements saves time
if you’re applying the same styles to more than one element. Now, we’re going to display
them inline-block, change the textcolor to #fff, align their text to the center, add
18 px of padding to the top and bottom and 22 pixels of padding to the left and right
and remove the default link underline usingtext-decoration: none.
Next, we’re going to style the list anchor:hover, dropdown:hover and dropdown-btn by making
the hover background to a light grey and changing the text to the same green we used for the
menu. Let’s style the list elements in the dropdown by using the display property and
setting it’s value to inline-block. Finally, we’re going to style the star of
this tutorial, which is the actual dropdown part for this dropdown menu tutorial. To do
this, we’re going to select the dropdown-menuelement and style it by setting it to display: none.
This is to initially hide the dropdown menu. Now we’re going set its position: absolute
so it’s positioned right below the parent anchor link. We’ll give it a light grey
background color, set it’s width to 160 pixels and add a drop shadow to the menu using
the box-shadow property. Now we’re going to style the dropdown menu’s
anchors by styling the color of the font grey, adding 12 pixels of padding to the top and
bottom and 16 pixels of padding to the left right. We’ll also set text decoration: none,
set the display: block, and set text-align: left. We’re going to style the anchors when
the mouse hovers over them using the :hover pseudo class and changing their background
color to green and the the text color to white. Lastly, we’re going to select the dropdown
element and add the pseudo class :hover to it. We’ll also select the dropdown-menu
element, use the property display: block. That way, we only see the dropdown menu items
when the mouse hovers over the button. There you have it! You created your very own
drop-down menu. Now go ahead and use what you learned in this tutorial on your other
coding and web design projects. Feel free to share this video with anyone that’s interested
in learning how to code. Give this video a big thumbs up and subscribe to XO PIXEL for
more great videos just like this one. As always, thank you for watching. I’ll see you in next weeks video.