LÀM THẾ NÀO ĐỂ - Đăng nhập Biểu mẫu trong một Menu
Tìm hiểu cách tạo menu điều hướng đáp ứng với biểu mẫu đăng nhập bên trong.
Cách thêm biểu mẫu đăng nhập trong thanh điều hướng
Bước 1) Thêm HTML:
Thí dụ
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="login-container">
<form action="/action_page.php">
<input type="text" placeholder="Username" name="username">
<input type="text" placeholder="Password" name="psw">
<button type="submit">Login</button>
</form>
</div>
</div>
Bước 2) Thêm CSS:
Thí dụ
* {box-sizing: border-box;}
/* Style the navbar */
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:
17px;
}
/* Navbar links on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Active/current
link */
.topnav a.active {
background-color: #2196F3;
color: white;
}
/* Style the
input container */
.topnav
.login-container {
float: right;
}
/* Style the input
field inside the navbar */
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
width: 150px; /* adjust as needed (as long as it doesn't
break the topnav) */
}
/* Style the button inside the input container */
.topnav .login-container button {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav
.login-container button:hover {
background: #ccc;
}
/*
Add responsiveness - On small screens, display the navbar vertically instead
of horizontally */
@media
screen and (max-width: 600px) {
.topnav .login-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav
.login-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding:
14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}