Come fare per - Modulo di accesso in un menu
Scopri come creare un menu di navigazione reattivo con un modulo di accesso al suo interno.
Come aggiungere un modulo di accesso in Navbar
Passaggio 1) Aggiungi HTML:
Esempio
<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>
Passaggio 2) Aggiungi CSS:
Esempio
* {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;
}
}