Trong một trang web menu là phần thiết yếu. Nó được dùng để điều hướng người dùng tới những khu vực khác trên website. Menu có dọc hoặc ngang tuỳ theo cách bố trí của lập trình viên web. Trong khuôn khổ bài viết này mình sẽ hướng dẫn Cách tạo thanh menu ngang trong Html và Css chi tiết.
Để tạo menu ngang trong Html bạn cần những gì?
Code một chiếc menu bạn cần phải có kiến thức về Html và một số thuộc tính Css chẳng hạn như background, color, height, width, float. Những thứ này trên Google rất nhiều hoặc vào trang w3school để tìm hiểu.
Cách bước tạo thanh menu ngang trong Html
Bước 1: Viết code HTML
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
</ul>
</div>
</body>
</html>Bước 2: Viết code Css để trang trí (Đặt trước thẻ </head>)
<style type="text/css">
.navbar {
background: blue;
overflow: auto;
height: 50px;
display: flex;
align-items: center;
}
.navbar ul {
list-style-type: none;
margin-top: 0;
margin-bottom: 0;
}
.navbar ul li {
float: left;
margin-right: 20px;
}
.navbar ul li a {
color: #fff;
text-decoration: none;
position: relative;
font-size: 16px;
font-weight: 700;
}
.navbar ul li a:before {
content: '';
width: 1px;
height: 20px;
background: #fff;
position: absolute;
right: -7px;
top: 0px;
}
.navbar ul li a:hover {
color: red;
text-decoration: underline;
}
</style>Việc tạo menu ngang trông có vẻ đơn giản và nhàm chán. Tuy nhiên với người mới bắt đầu học html và Css nó là bài tập cực kỳ hữu ích dành cho bạn. Hãy nên luyện tập đi tập lại và sáng tạo thêm bằng cách thêm mội số hiệu ứng trong đẹp mắt hơn.
