gnz11codes, html css navbar web development

Today, I learned how to create a responsive navigation menu with HTML and CSS. It was a bit challenging at first, but I managed to understand it step by step.

To start, I created the HTML structure for my navigation menu using an unordered list, with each list item containing an anchor tag for the menu items. I also added a JavaScript function for the menu button.

Next, I wrote CSS code to style the navigation menu. I set the width of the menu to 100% and added some padding and background color to the list items. I also added a hover effect and changed the color of the text on hover. I used the float property to make the menu items align horizontally and the display property to hide the dropdown icon.

To make the menu responsive, I added a media query for screens with a maximum width of 680px. In this query, I set the display property of all list items except the first child to none, so they are hidden on smaller screens. I also added the dropdown icon and set its display property to block. I set the position of the dropdown icon to absolute, and I added a JavaScript function to show or hide the menu items when the icon is clicked.

Overall, it was an exciting and insightful learning experience for me. I was able to understand how to create a responsive navigation menu that looks good on all screen sizes using HTML and CSS.

Below are my HTML & CSS codes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GN-z11Codes</title>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <nav>
        <ul class="topnav responsive" id="dropdownclick">
            <li><a href="#home">Home</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contacts">Contacts</a></li>
            <li><a href="#about">About</a></li>
            <li class="topnav-right"><a href="#signup">Sign Up</a></li>
            <li class="topnav-right"><a href="#login">Login</a></li>
            <li class="dropdownicon"><a href="javascript:void(0);" onclick="dropdownmenu()">&#9776;</a></li>
        </ul>    
    </nav>

    <script>
        function dropdownmenu() {
            var x = document.getElementById("dropdownclick");
            if(x.className === "topnav") {
                x.className += " responsive";
            } 
             else{
                x.className = "topnav";
                /*change topnav to topnav.responsive*/
            }
        }
    </script>
</body>
</html>

/*DEFAULT*/
nav, header, footer {
    display: block;
}

body {
    line-height: 1;
    margin: 0;
}

/*NAVBAR*/
nav {
    width: 100%;
    margin: 0;
}

 nav ul {
    background-color: #eee;
    overflow: hidden;
    margin: 0;
 }

 ul.topnav li {
    list-style: none;
    float: left;
 }

 ul.topnav li.topnav-right{
    float: right;
 }

 ul.topnav li a {
    display: block;
    text-decoration: none;
    min-height: 16px;
    text-align: center;
    padding: 14px;
    text-transform: uppercase;
    color: black;
 }

 ul.topnav li a:hover {
    background-color: purple;
    color: #fff;
 }

 ul.topnav li.dropdownicon {
    display: none;
 }

 /*MOBILE STYLES*/
 @media screen and (max-width: 680px){
    ul.topnav li:not(:nth-child(1)) {
        display: none;
    }
    ul.topnav li.dropdownicon {
        display: block;
        float: right;
    }

    ul.topnav.responsive li.dropdownicon {
        position: absolute;
        top: 0;
        right: 0;
    }

    ul.topnav.responsive {
        position: relative;
    }

    ul.topnav.responsive li {
        display: inline;
        float: none;
    }

    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
 }

Unlocking the Secrets of Responsive Navigation

My Journey Learning HTML and CSS