CÁCH LÀM - Thanh điều hướng trên hình ảnh
Tìm hiểu cách thêm menu điều hướng trên hình ảnh bằng CSS.
Cách tạo một thanh điều hướng trên hình ảnh
Bước 1) Thêm HTML:
Tạo thanh điều hướng:
Thí dụ
<div class="bg-img">
<div class="container">
<div class="topnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
</div>
Bước 2) Thêm CSS:
Tạo kiểu cho thanh điều hướng:
Thí dụ
.bg-img {
/* The image used */
background-image: url("img_nature.jpg");
min-height: 380px;
/* Center and scale the image
nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
/* Needed to
position the navbar */
position: relative;
}
/* Position the navbar container inside the
image */
.container {
position: absolute;
margin: 20px;
width: auto;
}
/* The navbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:
17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}