create menu bar in html

Comment

3

Tip Tame Tarantula 1 GREPCC

<!--HTML CODE-->
<nav>
     <a href="#">About us</a>
     <a href="#">Photos</a>
     <a href="#">Travel</a>
     <a href="#">Shop</a>
     <a href="#">Reviews</a>
     <a href="#">Seminars</a>
     <a href="#">Events</a>
</nav>

/*CSS: Horizontal title bar*/
nav {
    padding: 0;
    margin-bottom: 9px;
    text-align: center;
}
nav a {
    display: inline-block;
    color: white;
    text-decoration: none;
    background-color: mediumslateblue;
    border: 2px solid black;
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
    padding: 10px 14px 8px 14px;
    font-size: 17px;
    margin-right: 40px;
}
/*to create a vertical bar when the width reaches 599px*/
@media screen and (max-width: 599px) {
    nav a{
        display: block;
    }
}
/*just to decrease the margin-right when it reaches min and max width of 600px and 899px respectively*/
@media screen and (min-width: 600px) and (max-width: 899px) {
    nav a{
        margin-right: 30px;
    }
}

xxxxxxxxxx

<!--HTML CODE-->

<nav>

     <a href="#">About us</a>

     <a href="#">Photos</a>

     <a href="#">Travel</a>

     <a href="#">Shop</a>

     <a href="#">Reviews</a>

     <a href="#">Seminars</a>

     <a href="#">Events</a>

</nav>

/*CSS: Horizontal title bar*/

nav {

    padding: 0;

    margin-bottom: 9px;

    text-align: center;

nav a {

    display: inline-block;

    color: white;

    text-decoration: none;

    background-color: mediumslateblue;

    border: 2px solid black;

    border-radius: 10px 10px 0 0;

    border-bottom: 0;

    padding: 10px 14px 8px 14px;

    font-size: 17px;

    margin-right: 40px;

/*to create a vertical bar when the width reaches 599px*/

@media screen and (max-width: 599px) {

    nav a{

        display: block;

/*just to decrease the margin-right when it reaches min and max width of 600px and 899px respectively*/

@media screen and (min-width: 600px) and (max-width: 899px) {

    nav a{

        margin-right: 30px;

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: css html menu

Share

Link to this answer
Share Copy Link

Contributed on Dec 04 2022

Tame Tarantula

0 Answers Avg Quality 2/10

how to create a menu in html

Comment

6

Tip Kaen-Programing 1 GREPCC

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
              margin: 0;
              font-family: Arial, Helvetica, sans-serif;
            }

            .topnav {
              overflow: hidden;
              background-color: #333;
            }

            .topnav a {
              float: left;
              color: #f2f2f2;
              text-align: center;
              padding: 14px 16px;
              text-decoration: none;
              font-size: 17px;
            }

            .topnav a:hover {
              background-color: #ddd;
              color: black;
            }

            .topnav a.active {
              background-color: #4CAF50;
              color: white;
            }
        </style>
    </head>
    <body>

        <div class="topnav">
            <a class="active" href="#home">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </div>

        <div style="padding-left:16px">
            <h2>Top Navigation Example</h2>
            <p>Some content..</p>
        </div>

    </body>
</html>

xxxxxxxxxx

<html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>

            body {

              margin: 0;

              font-family: Arial, Helvetica, sans-serif;

            .topnav {

              overflow: hidden;

              background-color: #333;

            .topnav a {

              float: left;

              color: #f2f2f2;

              text-align: center;

              padding: 14px 16px;

              text-decoration: none;

              font-size: 17px;

            .topnav a:hover {

              background-color: #ddd;

              color: black;

            .topnav a.active {

              background-color: #4CAF50;

              color: white;

        </style>

    </head>

    <body>

        <div class="topnav">

            <a class="active" href="#home">Home</a>

            <a href="#news">News</a>

            <a href="#contact">Contact</a>

            <a href="#about">About</a>

        </div>

        <div style="padding-left:16px">

            <h2>Top Navigation Example</h2>

            <p>Some content..</p>

        </div>

    </body>

</html>

Popularity 10/10 Helpfulness 5/10 Language html

Source: Grepper

Tags: html

Share

Link to this answer
Share Copy Link

Contributed on Apr 19 2021

Kaen-Programing

0 Answers Avg Quality 2/10

menu bar html

Comment

2

Tip Wrong Wallaby 1 GREPCC

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navigation</title>
    <style>
        .navbar{
            background-color: black;
            border-radius: 30px;
            
        }
        .navbar ul{
            overflow: auto;
        }
        .navbar li{
            float:left;
            list-style: none; 
            margin: 13px 20px;
            
        }
        .navbar li a{
            padding: 3px 3px;
            text-decoration: none;
            color: white;
        }
        .navbar li a:hover{
            color: red
        }
        .search{
            float: right;
            color: white;
            padding: 12px 75px;
        }
        .navbar input{
            border: 2px solid black;
            border-radius: 14px;
            padding: 3px 17px;
            width: 129px;
        }
    </style>
</head>

<body>
    <header>
        <nav class="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact us</a></li>
                <div class="search">
                    <input type="text" name="search" id="search" placeholder="Search this website">
                </div>
            </ul>
        </nav>
    </header>
</body>

</html>

xxxxxxxxxx

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Navigation</title>

    <style>

        .navbar{

            background-color: black;

            border-radius: 30px;

        .navbar ul{

            overflow: auto;

        .navbar li{

            float:left;

            list-style: none;

            margin: 13px 20px;

        .navbar li a{

            padding: 3px 3px;

            text-decoration: none;

            color: white;

        .navbar li a:hover{

            color: red

        .search{

            float: right;

            color: white;

            padding: 12px 75px;

        .navbar input{

            border: 2px solid black;

            border-radius: 14px;

            padding: 3px 17px;

            width: 129px;

    </style>

</head>

<body>

    <header>

        <nav class="navbar">

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">About</a></li>

                <li><a href="#">Services</a></li>

                <li><a href="#">Contact us</a></li>

                <div class="search">

                    <input type="text" name="search" id="search" placeholder="Search this website">

                </div>

            </ul>

        </nav>

    </header>

</body>

</html>

Popularity 10/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: html

Share

Link to this answer
Share Copy Link

Contributed on Aug 28 2022

Wrong Wallaby

0 Answers Avg Quality 2/10

create menu bar in html

Contents

More Related Answers