Contact us...Newsletter
dzosoft.com - How to do it ?
dzosoft- order by asc dzosoft- order by desc

 
 
 

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

Windows partition

dzosoft
dzosoft
Auto Europe Car Rentals
Reviews of dzosoft.com   Copyright © 2022  -  dzosoft.com  All rights reserved.  
dzosoft- How to do it ?
What they are cookies
Like most websites, we use data file small
dimensions that are saved on your computer, tablet, mobile phone or other device
Mobile (collectively referred to as 'device') to record certain data whenever
login or interact with our sites, services, apps, messaging systems
and strumenti.I names and specific types of cookies used can change over time.
To help you better understand the rules and \ 'use of such technology, the following are
some terms and their definitions:
Cookies: small text files (usually formed by letters and numbers) that are saved
in memory of the browser or the device when you visit a website or display a message.
Cookies enable a website to recognize a particular device or browser. There
different types of cookies:
Session cookies expire at the end of the browser session and allow us to
connect your actions during that specific session.
Persistent cookies are instead stored in your device even after the end
the browser session and let you remember your preferences or actions at multiple sites.
First-party cookies are set by the site you're visiting.
The third-party cookies are set by a third party site than the site you are visiting.
Cookies can be disabled or removed using the tools available in most
browsers. The cookie preferences must be set separately
for each browser used, because each offers features and specific options.
dzosoft.com - How to do it ?
Licenza Creative Commons
How to do it ?    - download & install software     is licensed under license Creative Commons Attribution - Non-commercial - Share alike 4.0 International.