Creating a professional looking Menu with CSS

A menu on a webpage is something that adds functionality to the website. It allows users to browse through your entire site with the ease of a click. Generally a menu is placed on the top of the webpage, below the logo or the name of the company. Designing a menu in Photoshop is pretty easy, but that is a different thing. Today I will tell you how to make  a stylish and professional looking menu for your website or blog. This will be a simple menu.

Before we proceed, I assume that you have basic knowledge of HTML and CSS and are aware of the various attributes that can be applied to an element. Also, I assume that you have a webpage ready where you want to insert this menu. The menu which we are creating will be like the image above. If you want, you can change the colour scheme of the menu as per your choice, using any valid HEX colour code. For better productivity, you might want to use Notepad++. Read more about it here.

• Using Notepad++ for enhanced Programming Experience

Professional Menu in CSS

Let’s begin creating our menu. First we will define the structure of the menu in HTML and link the CSS file to the HTML page. In the second part, we will style the HTML code, i.e. add content to the CSS file.

1. If you do not have a webpage, start by creating a new page and include the following line in the header of the page, i.e. the head tag. It can be placed anywhere before the closing of the head tag. If you already have a webpage, just include this line in your code.

   <link rel="stylesheet" type="text/css" href="menu.css" media="all" />
   

2. Inside the body tag, define what the menu will be. You can do so by creating an unordered list (ul) and adding each menu item as a list item (li). This is how you can create  a list for your page. Simply copy the code below and paste it in your body tag, where you want the menu to appear.

   <ul id="Menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services Offered</a></li>
   <li><a href="#">Partners</a></li>
   <li><a href="#">Offers</a></li>
   <li><a href="#">Contact Me</a></li>
   </ul>
   

3. If you look at your HTML page at this moment, you will see it as follows.
   
4. Now, let’s begin styling our menu. Open the CSS file in your favorite text editor and add the following lines of code to style the background colour of the menu and the rounded corner. Also, the shadow of the menu will be defined here. You can change it as per your own needs.

   ul#Menu{
   margin-left:50px;
   background: #000000;
   box-shadow: 0px 0px 15px rgba(0,0,0,1);
   padding: 3px 10px;
   border-radius: 15px;
   list-style: none;
   }
   
   ul#Menu:after{
   content: "";
   clear: both;
   display: block;
   }
   

5. Now, let’s style individual menu item by adding the text colour, font weight and everything for each menu item.

   ul#Menu li{
   float: left;
   }
   
   ul#Menu li a{
   display: block;
   font-weight:bold;
   padding: 15px 20px;
   color: #16b587;
   text-decoration: none;
   }
   

6. Well, this is what your menu would look now. Even if you take your mouse on any menu item, nothing happens and the user does not get to know what to do at this point. So for this, we do the next step.
   
7. Since we need to add some action to the CSS when we hover it, we add the following lines of code to the CSS file.

   ul#Menu li:hover{
   background:#222222;
   }
   
   ul#Menu li:hover a{
   color: #F2B91A;
   }
   

8. Well, that’s it. You just created a magnificent looking Menu in CSS. It looks professional and simple. This is the final output of our tutorial.
   

If you want, you can download the entire source code for this tutorial from below.

Download Source Code

I hope you learned something new from this blog post. Let me know if you face any problems using the comments section below or by using the contact page to contact me. Stay subscribed to updates of Slash Coding via RSS Feeds, Facebook, or Twitter. See you around! 😉