Code Monkeys

# VuePress Tutorial 14 - Dropdown Menu Styling

By: J the Code Monkey
•Posted: Sep 15, 2022 •Updated: Apr 18, 2023

# What We're Doing

If you hover over Posts in the navbar, the dropdown menu will appear. You'll notice the dropdown menu needs some styling to make it match the rest of the blog. To implement the styling we'll be targeting these CSS classes nav-dropdown and dropdown-item which are provided by the default theme (opens new window).

To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the Elements tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the index.styl file which will globally apply the styles. Finally, we'll be describing the styling in detail.

Make sure you start the local development server which should be running at http://localhost:8080/ (opens new window) to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.

When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.

You can view all of the code in this tutorial by going to the tutorial-14 branch of the code-monkeys-blog-tutorials (opens new window) repository.

# Force Dropdown Menu to Hover

Before we start styling the dropdown menu, we're going to force an element state of hover on the div tag with a class of dropdown-wrapper. This will ensure we can see the changes we're making to the dropdown menu even when we move the cursor away from the dropdown-wrapper class.

To do this we need to select the dropdown-wrapper class in the Elements tab.

Here's the location of the dropdown-wrapper class in the HTML:

After selecting the dropdown-wrapper class in the Elements tab, we need to go to the Styles tab, click on the :hov tab, then force the element state of hover by checking the :hover checkbox.

The dropdown menu should now be shown even when the cursor is moved away from the dropdown-wrapper class.

We're now ready to begin styling the dropdown menu.

# HTML Location

We're going to begin the styling by locating where the nav-dropdown class is in the HTML:

From the HTML above we can see that the nav-dropdown class is attached to a ul tag and is a child of the div tag with a class of dropdown-wrapper which is a child tag of the div tag with a class of nav-item.

# Styling

This means in the index.styl file we can nest the nav-dropdown class inside of the nav-item class and apply the following styles:

  • text-align: center horizontally aligns the text in the dropdown menu.
  • background-color: $backgroundColor sets the background color of the dropdown menu to be $backgroundColor which is a global styling variable we set in the palette.styl file.
  • border: 0.125rem solid $borderColor adds a border around the dropdown menu with a thickness of 0.125rem, a style of solid, and a color of $borderColor which was defined in the palette.styl file.
  • padding: 0.8rem 0 adds a padding of 0.8rem to the top and bottom and 0 to the left and right of the dropdown menu.

We're now ready to style the dropdown-item class.

# HTML Location

Here's the location of the dropdown-item class in the HTML:

From the HTML above we can see that there are two dropdown-item classes. Each one is attached to an li tag and is a child of the ul tag with a class of nav-dropdown.

Also, notice the h4 tag which is a child of the li tag with a class of dropdown-item. We'll be styling this h4 tag as well.

# Styling

In the index.styl file we can nest the dropdown-item class inside of the nav-dropdown class as well as nest the h4 tag inside of the dropdown-item class and apply the following styles:

  • padding-bottom: 0.4rem adds a padding of 0.4rem to the bottom of each of the dropdown items.
  • border-top: 0.0625rem solid $borderColor adds a border to the top of the h4 tag, i.e., the By Topics text with a thickness of 0.0625rem, a style of solid, and a color of $borderColor which was defined in the palette.styl file.
  • cursor: text sets the cursor when pointing over the h4 tag, i.e., the By Topics text to be the text cursor which indicates the text can be selected and is typically in the shape of an I-beam.
  • margin: 0.45rem 0.375rem 0 adds a margin of 0.45rem to the top, 0.375rem to the left and right, and 0 to the bottom of the h4 tag, i.e., the By Topics text.

If you have questions about the CSS discussed above, then check out these resources:

# Next Steps

In the next tutorial we'll be installing and beginning the process of configuring the @vuepress/plugin-blog (opens new window).

Made by & for Code Monkeys 🐵