Creating an HTML menu from scratch involves using HTML and CSS to structure and style the menu. Here’s a step-by-step guide:

1. Basic Structure with HTML

First, you'll define the structure of your menu using an unordered list (<ul>). Each menu item will be a list item (<li>).

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basic HTML Menu</title> <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file --> </head> <body> <nav> <ul class="menu"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </body> </html>

2. Styling the Menu with CSS

Now, let's add some CSS to style the menu. You can place this in a separate CSS file (e.g., styles.css) or within a <style> tag in the HTML file.

/* Reset default list styles */
ul.menu {
    list-style-type: none; /* Removes the bullet points */
    margin: 0;
    padding: 0;
    display: flex; /* Aligns the items horizontally */
    background-color: #333; /* Background color for the menu */
}

ul.menu li {
    padding: 14px 20px; /* Spacing around each menu item */
}

ul.menu li a {
    text-decoration: none; /* Removes underline from links */
    color: white; /* Text color */
    display: block;
}

ul.menu li a:hover {
    background-color: #111; /* Changes background color on hover */
}

3. Adding Submenus

If you want to add submenus (dropdowns), you can nest additional <ul> elements within a list item.

<nav>
    <ul class="menu">
        <li><a href="#home">Home</a></li>
        <li>
            <a href="#about">About</a>
            <ul class="submenu">
                <li><a href="#team">Our Team</a></li>
                <li><a href="#history">Our History</a></li>
            </ul>
        </li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

And then style the submenu:
 

/* Submenu styles */
ul.menu li ul.submenu {
    display: none; /* Hides the submenu by default */
    position: absolute; /* Positions the submenu relative to the parent */
    background-color: #333; /* Same background as the main menu */
    padding: 0;
    margin-top: 0;
}

ul.menu li:hover ul.submenu {
    display: block; /* Shows the submenu on hover */
}

ul.menu li ul.submenu li {
    padding: 10px 20px;
}

ul.menu li ul.submenu li a:hover {
    background-color: #444; /* Different background color for submenu on hover */
}

4. Responsive Design

To make your menu responsive (e.g., work on mobile devices), you might want to add a media query.

@media (max-width: 600px) {
    ul.menu {
        flex-direction: column; /* Stacks items vertically */
    }

    ul.menu li {
        text-align: center; /* Centers the text */
    }
}

5. Additional Enhancements

  • Dropdown Arrow: You can add an arrow next to the items with submenus to indicate they contain more links.
  • Animations: Use CSS transitions to add smooth opening and closing effects for dropdowns.
  • JavaScript: For more complex interactivity, like closing the submenu when clicking outside, you can incorporate JavaScript.

Full Example

Here’s how the entire HTML and CSS might look:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Menu Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul class="menu">
            <li><a href="#home">Home</a></li>
            <li>
                <a href="#about">About</a>
                <ul class="submenu">
                    <li><a href="#team">Our Team</a></li>
                    <li><a href="#history">Our History</a></li>
                </ul>
            </li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #333;
}

ul.menu li {
    padding: 14px 20px;
    position: relative; /* Necessary for dropdown positioning */
}

ul.menu li a {
    text-decoration: none;
    color: white;
    display: block;
}

ul.menu li a:hover {
    background-color: #111;
}

ul.menu li ul.submenu {
    display: none;
    position: absolute;
    background-color: #333;
    padding: 0;
    margin-top: 0;
    list-style-type: none;
}

ul.menu li:hover ul.submenu {
    display: block;
}

ul.menu li ul.submenu li {
    padding: 10px 20px;
}

ul.menu li ul.submenu li a:hover {
    background-color: #444;
}

@media (max-width: 600px) {
    ul.menu {
        flex-direction: column;
    }

    ul.menu li {
        text-align: center;
    }
}

This example demonstrates how to create a basic, yet functional HTML menu. You can customize the styles further to match your design needs.

For professional web design in Newport visit: https://www.portside.wales

 
xx