How to create horizontal menu in css

ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY

Publish perfectly-optimized content in 1-click




How to create horizontal menu in css


Step 1

Implementation of HTML5 code

The first thing to do is to build the HTML code for our menu.
To do this, we will simply create a list with one link per line.
We then add the menu id which will allow us to target the menu as well as the elements that compose it with CSS.

<ul id="menu">
    <li>
        <a href="home.html">Home>/a>
    </li>
    <li>
        <a href="login.html">Login</a>
    </li>
    <li>
        <a href="contact.html">Contact</a>
    </li>
</ul>

<ul id="menu">
    <li>
        <a href="home.html">Home>/a>
    </li>
    <li>
        <a href="login.html">Login</a>
    </li>
    <li>
        <a href="contact.html">Contact</a>
    </li>
</ul>

here how it look first our menu
Home Login Contact

Step 2


Horizontal positioning of links

Now we will use the #menu selector to manipulate the <ul> element.
So let's start by turning our list into a flex box with flexbox with the display: flex; property.
We then take the opportunity to remove the internal margins that are present by default in the lists with padding: 0;.

And we finish by adding a background color with background-color: #fff;

#menu {
    display: flex;              /* Conversion to flexbox */
    padding:0;                  /* Deletion of internal margins */
    background-color: #fff;     /* Add the background color */
}

#menu {
    display: flex;              /* Conversion to flexbox */
    padding:0;                  /* Deletion of internal margins */
    background-color: #fff;     /* Add the background color */
}

Home Login Contact


Step 3


Deletion of the bullet points


As you can see, the links fit nicely next to each other, but the bullet points are still there, so they need to be removed.
To do this, we are going to use the .menu li selector to manipulate the different lines of the list. This selector matches
all HTML <li> elements that are inside the element with id=menu.

#menu li {
    list-style-type: none ;       /* Deletion of the bullet points */
}

#menu li {
    list-style-type: none ;       /* Deletion of the bullet points */
}

Home Login Contact


Step 4



Dimensions of links

We will now work directly on the links with the #menu selector a. This selector matches all HTML <a> elements that are
inside the element with id = menu.
We start by turning the links into block-like elements,so that they can be easily sized.

I recommend the min-width property to size the links
The advantage of min-width over width is that the button can be wider if one of the links contains too much text.
You can also choose not to put dimensions and let the content define the width of the buttons.

#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width */
}

#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width */
}


Home Login Contact


Step 5

Formatting buttons

The links are sized, now we have to manage their display settings to make them look like buttons.
The customization options are numerous. Here is an example of customization, vary the values to see what happen.

#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width  */   
    margin: 0.5rem;               /* External margins (1 values = 4 directions) */
    padding: 0.4rem 0;            /* Internal margins (2 values = top/bottom and left/right)*/
    text-align: center;           /* Text centering */   
    background-color: #99CCFF;    /* Background color */
    color: #000099;               /* Text color */
    text-decoration: none;        /* Remove underline */
    border: 1px solid #000099;    /* Adding a border*/
    border-radius: 4px;           /* Rounded edges */
}

#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width  */   
    margin: 0.5rem;               /* External margins (1 values = 4 directions) */
    padding: 0.4rem 0;            /* Internal margins (2 values = top/bottom and left/right)*/
    text-align: center;           /* Text centering */   
    background-color: #99CCFF;    /* Background color */
    color: #000099;               /* Text color */
    text-decoration: none;        /* Remove underline */
    border: 1px solid #000099;    /* Adding a border*/
    border-radius: 4px;           /* Rounded edges */
}


Home Login Contact

Step 6


Horizontal alignment of the links

The advantage of having created a flexible box is that we will be able to easily choose how to position the different
links on the line. Just add a flexible alignment property with the value of our choice:
center, flex-end, space-around, space-between, space-evenly.

#menu { display: flex; /* Transformation en flexbox */ padding:0; /* Suppression des marges internes */ background-color: #fff; /* Ajout de la couleur d'arrière-plan */ justify-content: center /* Alignements des liens dans le menu */ }

#menu {
    display: flex;              /* Transformation en flexbox */
    padding:0;                  /* Suppression des marges internes */
    background-color: #fff;     /* Ajout de la couleur d'arrière-plan */
    justify-content: center     /* Alignements des liens dans le menu */
}


Home Login Contact

Step 7

Adding the link hover effect

To add an effect to button hover, we use the :hover pseudo-selector. All you have to do is make all the formatting
variations you want. This will only apply to mouse hover.

#menu a:hover {
  background-color: #000099;
  color: #fff;
  border-color: #fff;
}

#menu a:hover {
  background-color: #000099;
  color: #fff;
  border-color: #fff;
}





Step 8

Adding a transition to have gradual hover effects

To make the effects on hover apply gradually, just add a transition.
We therefore use the transition property with the values all and 1s.
The all property means that all properties that change on hover will be animated and 1s is the animation duration.

#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width  */   
    margin: 0.5rem;               /* External margins (1 values = 4 directions) */
    padding: 0.4rem 0;            /* Internal margins (2 values = top/bottom and left/right)*/
    text-align: center;           /* Text centering */   
    background-color: #99CCFF;    /* Background color */
    color: #000099;               /* Text color */
    text-decoration: none;        /* Remove underline */
    border: 1px solid #000099;    /* Adding a border*/
    border-radius: 4px;           /* Rounded edges */
    transition: all 1s ;          /*Adding a transition to have gradual hover effects */
}

#menu a {
    display:block;                /* Displays an element as a block element */
    min-width: 80px;              /* Minimum link width  */   
    margin: 0.5rem;               /* External margins (1 values = 4 directions) */
    padding: 0.4rem 0;            /* Internal margins (2 values = top/bottom and left/right)*/
    text-align: center;           /* Text centering */   
    background-color: #99CCFF;    /* Background color */
    color: #000099;               /* Text color */
    text-decoration: none;        /* Remove underline */
    border: 1px solid #000099;    /* Adding a border*/
    border-radius: 4px;           /* Rounded edges */
    <b>transition: all 1s ;</b>          /*Adding a transition to have gradual hover effects */
}