Create a single level menu with simple HTML
To make a 1-level menu, there are many solutions. You can use UL and LI tags to enclose menu elements. Or you can also create a div tag, inside it is a list of menu elements.
The result of this article will have the following interface:
Note : The menu will be links, so we must use the a tag to attach links to each of its elements.
Mục lục
Build HTML for 1 level menu
I will choose the solution is to create a div tag to wrap the menus.
<div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div><div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div><div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div><div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div><div class="menu"> <a href="https://hocvietcode.com" title="web888">Trang chủ</a> <a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a> <a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a> <a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a> <a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a> </div>
Now I just need to style the CSS for this HTML to get the desired result.
Add CSS for 1 level menu
Step 1 : I want the menu background to be blue, so I will write CSS for the surrounding div tag.
.menu{ background: #333 }Step 2 : Create white font for menus. Add whitespace and increase the spacing between menus.
.menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; }It looks so much better, doesn't it? Now I want to create an effect when moving the mouse on the menus, the background will change to white, and the text color will change to blue.
To create CSS for mouse movement, we use the CSS :hover property.
.menu a:hover{ color: #333; background: #fdfdfd; }Choose UL and LI tags to build a 1-level menu
This solution, the HTML structure will be a bit complicated, but later if you want to add submenus, it's a lot easier.
The HTML structure will look like this :
<ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul><ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul><ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul><ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul><ul class="menu"> <li><a href="https://hocvietcode.com" title="web888">Trang chủ</a></li> <li><a href="https://hocvietcode.com/hoc-c" title=" web888">Học C/C++</a></li> <li><a href="https://hocvietcode.com/hoc-php" title=" web888">Học PHP</a></li> <li><a href="https://hocvietcode.com/hoc-html-css" title=" web888">Học HTML</a></li> <li><a href="https://hocvietcode.com/hoc-javascript" title=" web888">Học Javascript</a></li> </ul>
Step 1 : By default, the ul tag will have CSS padding and margin. Therefore, we will need to reset to make the menu display like part 1. We also don't forget to add a background to it.
.menu{ margin: 0px; padding: 0px; background: #333 } Step 2 : Since the li tag displays as a block, one is to convert it to inline, the other is to use float to push it to one side. We should also remove the dots using list-style:none .
I will use float.
.menu li{ float:left; list-style: none } Oh, looks like the background is gone. The reason is that we used float:left for li tags, so the height of the menu will no longer depend on the li tag. Let's add overflow:hidden property to .menu and that will solve it.
.menu{ margin: 0px; padding: 0px; background: #333; overflow: hidden }Step 3 : Now we just need to style the a tag like part 1.
.menu a{ display: inline-block; padding: 5px 10px; color:#fff; text-decoration: none; } .menu a:hover{ color: #333; background: #fff; }The results were as expected.
So, I have completed the tutorial on how to build a 1-level menu with simple HTML and CSS. In this article, I want you to practice your skills in handling each situation when building a menu. Later you will encounter many more complex menu types.
