Tips for Creating Horizontal Menus With CSS

Navigation is an important thing to be on the website, this is to make it easier for users to explore the contents of the website, Navigation can be called a menu, some menus are Vertical, and some are Horizontal.

Vertical menu is a menu that is lined down, while Horizontal is sideways.

In the following short tips, we will try the basic techniques of how to create a horizontal menu with CSS.

Horizontal Menu

Here we will also learn about CSS :before and :first-child Pseudo-element.

Okay, let’s start by creating an HTML structure like the following

HTML



After creating the HTML structure, now we can beautify it with CSS

CSS
h1{margin:5px}
.demo-container{margin:50px;}
.horizon-menu{list-style-
left:5px;padding:5px;border-radius:5px;
-webkit-transition:background-color 500ms ease-in-out;
-moz-transition:background-color 500ms ease-in-out;
}
.horizon-menu li a:hover{background-color:orange}
Explanation:
The main point in creating a horizontal menu is in line code 4, where it says display:inline

.horizon-menu li{display:inline;margin:5px 0}
Meanwhile, to create a separator we use li:before{content:’ | ‘}, which will write the character [ | ]

So that the separator does not appear at the beginning we need li:first-child:before{content:’ ‘}

Addition:

To make the menu Responsive to the screen width, which will work well if opened on a smaller screen such as a Smartphone or Tablet PC, then we add the following code: