In the previous tutorial, we have create a dropdown navbar's menu using Bootstrap3. If you're interested in learning more about it, read up the article : Dropdown Menu with Bootstrap and check up the page source code for example. In this tutorial, we still have the same topic, only different case. We'll create dropdown login form.
The login form located in the middle of our web layout have been often we find and many tutorial explained it. In here, we will se how to create a good looking dropdown login using framework Bootstrap.
Figure.1 is the ouput that we will create by using Bootstrap :
 |
| Fig.1 Dropdown login form |
In the Fig.1 we have dropdown login in navbar, once user click the menu login, the login form appear which contained the textfield username and password as well as button login.
The steps to create Dropdown Login Form
Create a file HTML, given name what you want. In this example, we named dropdownlogin.html
Then copy paste the following script.1 between tag <head>..</head> :
<link rel="stylesheet" href="assets/css/bootstrap.css">
<script src="assets/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<script src="assets/js/bootstrap.min.js"></script>
Script.1
Because the whole web layout using Bootstrap, in the Script.1 we call the library Bootstrap. We assume the library Bootstrap in folder assets and library jquery in the folder assets/js.
Add the following Script.2 in the below of Script.1 :
<style type="text/css">
.navbar-default .navbar-nav > li.clr1 a{
color:#ffffff;
}
.navbar-default .navbar-nav > li.clr2 a{
color: #FFEB3B;;
}
.navbar-default .navbar-nav > li.clr3 a{
color: #5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a{
color: #29AAE2;
}
.navbar-default .navbar-nav > li.clr1 a:hover, .navbar-default .navbar-nav > li.clr1.active a{
color:#fff;
background: #F55;
}
.navbar-default .navbar-nav > li.clr2 a:hover, .navbar-default .navbar-nav > li.clr2.active a{
color: #fff;
background:#973CB6;
}
.navbar-default .navbar-nav > li.clr3 a:hover, .navbar-default .navbar-nav > li.clr3.active a{
color: #fff;
background:#5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a:hover, .navbar-default .navbar-nav > li.clr4.active a{
color: #fff;
background: #29AAE2;
}
.navbar-default{
background-color: #3b5998;
font-size:18px;
}
.navbar-default .navbar-brand {
color: #ffffff;
font-weight:bold;
}
.navbar-default .navbar-text {
color:#ffffff;
}
a{
color: #FFC107;
text-decoration: none;
}
</style>
Script.2
In the Script.2 above, we override some Bootstrap's navbar to create the syle of navbar that will be used in top novbar and in the bottom navbar (as footer). It is not the essential thing in this tutorial. You can skip it if you want the default.
Next step, we create the menu in the top navbar and also create login form. Copey paste the Script.3 in the tag <body>..</body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="about.html">Programming</a></li>
<li class="clr3"><a href="courses.html">English</a></li>
<li class="clr4 dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Login<span class="caret"></span></a>
<ul class="dropdown-menu" style="padding: 20px 10px 5px 10px; width:300px;">
<li>
<form action="login.php" method="POST">
<div class="form-group">
<input type="email" class="form-control" name="username" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary" name="login">Login</button>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Script.3
If we pay attention the Script.3 above, part of the menu begins tag <li>...</li> for Login is different with others. On the login menu, there is a class dropdown-toggle and dropdown-menu, that is make in the login menu appear by the way dropdown.
Final step, we create navbar as footer. Copy paste the Script.4 below the Script.3 :
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
</div>
</div>
