How to create a pure
CSS horizontal menu
Creating a pure CSS horizontal menu is really easy to accomplish.
For this to happen, you just need to create a couple lines of HTML markup and CSS styles.
Although it is always recommended for you to know HTML and CSS, inside this tutorial I will be providing you everything so you don't need to worry too much if you are a beginner.
Just follow me along.
Remember, we won't be using any JavaScript because we want to keep our things really simple and super fast as always.
Don't waste your time
Before you start, I am going to recommend you to check the demo below so you can be sure this is the right CSS menu you want and need.
DEMO: Pure CSS Horizontal Menu.
If this is what you want, then please proceed.
Your basic HTML structure
Always start with your HTML5 base, see below.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Pure CSS Horizontal Menu</title> </head> <body> </body> </html>
Sample #1
Your HTML Navigation
Because we are using HTML5, we are going to be using the navigation (nav) tag.
Inside this navigation we will be using just simple anchor (a) tags.
Now in here if you want, you can use an unordered (ul) list like below.
<nav> <ul> <li> Menu name </li> <li> Menu name </li> <li> Menu name </li> </ul> </nav>
Sample #2
But because I want to keep it simple, I will just use anchor (a) tags like below.
<nav> <a> Menu name </a> <a> Menu name </a> <a> Menu name </a> </nav>
Sample #3
Let's name our menus as Home, Services, and Contact.
Inside the "href" attribute I will just be using the hashtag symbol.
But keep in mind that you can change this to whatever URL you want.
Like instead of this (#) you can add this (https://supfort.com).
See below how I just added the hashtag for this example.
<nav> <a href="#"> Home </a> <a href="#"> Services </a> <a href="#"> Contact </a> </nav>
Sample #4
Your full menu HTML markup
Let's add together the full HTML markup.
It should look like below.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Pure CSS Horizontal Menu</title> </head> <body> <nav> <a href="#"> Home </a> <a href="#"> Services </a> <a href="#"> Contact </a> </nav> </body> </html>
Sample #5
Adding your CSS
Let's star beautifying this menu with CSS.
First we will give the background color to the main navigation.
On this example we will use the hexadecimal color dark grey (#515151) but you can use any color you want.
If you want to use another color you can use this tool.
See below the hexadecimal color dark grey (#515151).
nav {
background: #515151;
}
Sample #6
Keep in mind that inside the demo I am aligning everything to the center but this is optional.
So just use it if you want it.
But if not, then please keep things simple and don't add it.
nav {
background: #515151;
text-align: center; /* THIS IS OPTIONAL*/
}
Sample #7
Next let's style our anchor (a) elements.
The first thing you need to do in here is to change these inline level elements to inline block elements.
Why?
Because if you don't change them to inline block elements, you won't be able to add paddings and we need paddings to add spacing around the anchors (a).
nav a {
display: inline-block;
}
Sample #8
Finally we will just add the white color, the paddings, eliminate the underline that comes with every link, and a simple transition animation.
nav a {
display: inline-block;
color: #FFF;
padding: 18px 12px;
text-decoration: none;
transition: ease-in .3s;
}
Sample #9
Your CSS menu hover
Your final step will be adding the colors when the user puts the mouse on the top of each menu link.
This is called hovering, so we will be using the ":hover" selector.
Remember you can use any hexadecimal color you want and need.
nav a:hover {
color: #515151;
background: #FFF;
}
Sample #10
Full menu together
To finish this tutorial, let's put everything together.
In this case we will be using internal CSS styles.
But you can also use an external CSS sheet if you want.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pure CSS Horizontal Menu</title>
<style>
nav {
background: #515151;
}
nav a {
display: inline-block;
color: #FFF;
padding: 18px 12px;
text-decoration: none;
transition: ease-in .3s;
}
nav a:hover {
color: #515151;
background: #FFF;
}
</style>
</head>
<body>
<nav>
<a href="#"> Home </a>
<a href="#"> Services </a>
<a href="#"> Contact </a>
</nav>
</body>
</html>
Sample #11
And that's it, really simple.
If you want to download the full demo, please use the link below.
LINK: Download demo
Remember, HTML and CSS works everywhere.
So if you want to add this code inside your favorite CMS like WordPress, Joomla, Drupal, this is possible.
It won't be easy but is possible.
If you need help for this please don't hesitate in sending me a message.
You can just click on the green button below.
Or if you live near Fort Worth Texas, then just visit my home page. and give me a call.
You will be able to find all my info at the bottom of that page.
