Designing a menu can be a tough process. The navigation menu on any website will usually be the first place which visitors use to locate information about your website. Having lots of useful information in your navigation menu will help visitors find the areas of your website which you want to direct them to.

Finished CSS Mega Menu

Screenshot of Mega Menu
Active dropdown menu on the HTML & CSS Mega Menu

URL : HTML & CSS Mega Menu (Opens in new tab)
Download these source files below to use in your own project.

The finished HTML & CSS Mega Menu template shows how the menu will function. This menu can be quickly adapted for many different uses and the sections can be quickly changed and added as you please. This template is a great starting place for a website design project and will quickly get you started. This tutorial is aimed at developers who are looking for a quick start menu template for a website design project. You will need to be comfortable designing and editing HTML & CSS files.

How we build a Mega Menu

Creating a Navigation section.

The first step is to create a nav item which has a list of link elements. These link elements can have lists as children which will be displayed in a dropdown box when the user hovers over the parent list link. You can see from the code below that we have started to give classes to the sections. This will help us when we create the CSS rules for these parts during the design phase of this tutorial.

   <nav class="nav-bar">
        <ul class="main-nav">
            <li class="main-nav-item">
                <a class="nav-main-link" href="#">Home</a>
            </li>
            <li class="main-nav-item">
                <a class="nav-main-link" href="#">About</a>
            </li>
            <li class="main-nav-item menu-item-has-children">
                <a class="nav-main-link" href="#">Services</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a class="nav-drop-item" href="#">Service 1</a></li>
                        <li><a class="nav-drop-item" href="#">Service 2</a></li>
                        <li><a class="nav-drop-item" href="#">Service 3</a></li>
                        <li><a class="nav-drop-item" href="#">Service 4</a></li>
                        <li><a class="nav-drop-item" href="#">Service 5</a></li>
                    </ul>
                </div>
            </li>
            <li class="main-nav-item">
                <a class="nav-main-link" href="#">Portfolio</a>
            </li>
            <li class="main-nav-item">
                <a class="nav-main-link" href="#">Contact</a>
            </li>
        </ul>
    </nav>

The image below shows what you should have displayed in your browser so far. A very simple unordered list with a child section displayed after services.

Basic HTML Navigation Menu
Menu List with a Child List.

Making the Mega Menu full width.

To get this list to display full width across the desktop browser we have used flexbox. Flexbox is a very useful CSS design tool which helps display elements in a one-dimensional way, more information about flexbox can be found on the MDN Web Docs website. We also have to remove the standard styling elements of the body to create a full width page. We have kept the styling elements quite brutal so that you can get an idea of how the design is developing into the mega menu which we want to create.

See the Pen Basic Mega Menu using HTML & CSS by Daniel Broadhurst (@djbroadhurst) on CodePen.

Further Design and Development

URL : HTML & CSS Mega Menu (Opens in new tab)
Once we have the basic functions of the menu created then we can move on to develop the style and content further. In this next step we have added blocks of content to the dropdown menu so that 2 boxes are displayed in the dropdown which contain links and information to lots of potential different areas of the website. The template shows the menu at the top with a Logo and Contact area slightly offset from the main links of the page.

Services will be where the dropdown content will be displayed on hover as you can see in the following image.

Screenshot of Mega Menu
Mega Menu displayed when user hover over Services link.

As you can see in the image, a large number of pages and information can be displayed to visitors. These links can be quickly changed to suit a number of uses for potential websites.

URL : HTML & CSS Mega Menu (Opens in new tab)

Is the Menu Responsive?

This menu is not responsive and further development would be required to turn this menu into a mobile menu. We would usually have a separate mobile menu which we switch the display mode from ‘none’ at a media query breakpoint.

Further Developments

We have some ideas of how you could further develop this menu. You could add some JavaScript to the menu so that when the menu link is clicked it displays the drop down. Animation could be added to the menu so that sections are introduced smoothly. The files could be created in a PHP file so that the menu can be reused and edited for the whole website, currently the code would have to be changed on every page across a whole site which would be very time consuming. The purpose of this template is to give designers a starting point and make the creation of a menu quicker.

Website Menu Templates Design

We have a number of template menus which we use for clients so that our design process is quicker. These basic starter templates can be a great starting point for any website design, we have decided to showcase some of our menus for you to use an adapt for yourselves. If you would like to use this menu on your website design, feel free we are happy to share our work. If you would like to credit us then please link to this page.

Are you looking for a website designer?

If you are looking to have a website designed then we offer a full web development service. We can use these template starting blocks to build your bespoke website to showcase your business. You can find out more information about our web design services or contact us to start a project now.