Drop Up Menus From Your Footer
Every website has a drop down menu. There is nothing wrong with that, but on my most recent project, I wanted to try something new. I thought, “Why not utilize the footer that isn’t doing anything, and make a drop up menu?” Throughout my research and testing, it turned out to not be that hard at all. Just some simple HTML and CSS. Below I’ve laid out the steps to make your own drop up menu for your projects.
1. MAKE A HTML AND CSS FILE
Let’s make a simple index.html file and a css file. For this example, lets call the css file “footer.css” Also, make sure you link the css file to your html file.
2. ADD YOUR LISTS
We want to create a list. We’ll style this to look more like buttons later, but think of it more like a list for now. For each of your main drop up options, you’ll create a list item inside of an unordered list. Then within each list item, you’ll create another unordered list with it’s own list items as options within that menu. Also, go ahead and put those list items into anchor tags since they will probably link to another page.
Currently your html page should look like this:
3. CREATE SPECIFICITY FOR THE CSS STYLESHEET
Let’s add a two ids and one class to the HTML page. In the div, lets simply give it the id of “footer”. In the immediate unordered list that follows, lets give that the identification of “footerMenu”. Finally, in the remaining unordered lists, give them each the class of “dropupMenu”.
4. STYLE YOUR FOOTER
First, let’s make sure we get our footer on the bottom of the page. We can do this by first setting the position to fixed. Then we’ll make the bottom property 0px so it sits on the bottom of the screen. Let’s go ahead and get rid of the margin & padding. Then we’ll make sure it takes up the whole screen by setting the left and right attributes to 0px and the width to 100%. Give the footer a height of 40px (or whatever you prefer). Finally, let’s add a border to the top and a background so we can see it.
Next let’s also do some simple styling for the list items and unordered list within the footer id. We’ll get rid of the bullet point using list-style and setting it to none. Remove the padding and add a margin-bottom of 20px.
Currently, your page should look like this (note we’re not done styling so don’t worry that you have no buttons or drop ups yet. We’ll get there ;) ).
5. STYLE YOUR FOOTERMENU
To start, let’s just do some simple styling by setting margin and padding to 0px on all sides, and letting the browser worry about the width since we already set the width in the footer section.
Now if we move on to the list items, we again remove the bullet point. We want to ensure it floats to the left so we don’t have it end up somewhere we don’t want it. I went ahead and set the font-size to what I prefer. Next you’ll want to add the padding between each one (this is what will give it the button look). Finally, add the color for the text (I suggest an off-white in order to make it pop in the next section), a border on the right to separate each item, and a background color to make it slightly darker.
Finally, when we hover over the item, let’s make the background get a little darker and the color pop by making it pure white. (NOTE: when you opacity, the opacity will add to itself if you have items overlapping. i.e. the footer is set to .25 opacity and the footer menu item is set to .1, so the over opacity for that section is 1.25. Once we hover, it becomes 3.25).
Currently, your footer should look like this (you’ll notice that the drop up buttons are still not showing, but have taken on some styling. We’re almost there and you’ll see those magical ladies and gents soon!)
6. STYLE THE DROPUP LIST
We’re almost there! Next, let’s grab the dropupMenu class we created. First, we’ll want it to display none so we don’t see it. Then When we hover on the list item that is the parent to the unordered list containing the dropupMenu class, we want to display it with block. We’ll set the position to absolute, and the margin to 0px 0px 0px and -15px. Why -15px? Because this will push the item to the left 15px and ensure that the dropup menu lines up with the parent list item. Then we’ll set the bottom to 40px (which is the height of the footer to make sure it sits on top of the footer). Finally let’s add a quick border and background.
Lastly, let’s add the attributes for each list item when they are displayed. We’ll make sure it doesn’t float away by setting float to none. We don’t need a background or border since we set it that background earlier. We still want the bottom border however so that each button is separated. Then let’s add some padding to make it look like a button.
Finally, you have a dropup menu footer!
