Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




A MALE SOLUTION TO PROSTATE PROBLEMS!

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>

here how it look first our menu
 

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 */
}


 

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 */
}


 

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 */
}



 

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 */
}


 

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 */
}


 

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;
}



 

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 */
}	



You could download the code here   

Download the code




It might also interest you


How can we do animations with only CSS

How to create menu with css and javascript

How do you make a border radius round in CSS?

How to create sign up form with HTML and CSS

How To make a responsive website

How to create GLITCH effect with CSS

How to change the style of the scrollbars

How to create a Focus effect on hover using CSS

How to create a footer using Bootstrap: tutorial and example


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...     
close publicity
Publish perfectly-optimized content in 1-click