"Admin Nav Bar with Popup Sign in"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar"> <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#" name="top">Brand Name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#"><i class="icon-home"></i> Home</a></li> <li class="divider-vertical"></li> <li class="active"><a href="#"><i class="icon-file"></i> Pages</a></li> <li class="divider-vertical"></li> <li><a href="#"><i class="icon-envelope"></i> Messages</a></li> <li class="divider-vertical"></li> <li><a href="#"><i class="icon-signal"></i> Stats</a></li> <li class="divider-vertical"></li> <li><a href="#"><i class="icon-lock"></i> Permissions</a></li> <li class="divider-vertical"></li> </ul> <ul class="nav pull-right"> <li><a href="/signup">Sign Up</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a> <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;"> <form method="post" action="login" accept-charset="UTF-8"> <input style="margin-bottom: 15px;" type="text" placeholder="Username" id="username" name="username"> <input style="margin-bottom: 15px;" type="password" placeholder="Password" id="password" name="password"> <input style="float: left; margin-right: 10px;" type="checkbox" name="remember-me" id="remember-me" value="1"> <label class="string optional" for="user_remember_me"> Remember me</label> <input class="btn btn-primary btn-block" type="submit" id="sign-in" value="Sign In"> <label style="text-align:center;margin-top:5px">or</label> <input class="btn btn-primary btn-block" type="button" id="sign-in-google" value="Sign In with Google"> <input class="btn btn-primary btn-block" type="button" id="sign-in-twitter" value="Sign In with Twitter"> </form> </div> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </div> <!--/.navbar-inner --> </div> <!--/.navbar -->
$(document).ready(function(){ //Handles menu drop down $('.dropdown-menu').find('form').click(function (e) { e.stopPropagation(); }); });

Related: See More


Questions / Comments:

It's bad that a right click will close the popup and there is now way to paste email for the avarage user by using mouse :(

Marcel (0) - 3 years ago - Reply 0


Very clever. Here is a work I've done to bring a native megamenu functionality to boostrap http://geedmo.github.io/yamm/

geedmo (0) - 4 years ago - Reply 0


Geedmo,

I really like your menu! Do you have any plans to convert this for Bootstrap 3? I would love it if you did!

Great work! You too msurguy.

Timmy (0) - 4 years ago - Reply 0


Yes, grab it from here http://geedmo.github.io/yamm3/

geedmo (0) - 4 years ago - Reply 0


Ok this is a seriously cool script.

To make this work make sure:
- jquery is defined BEFORE where you put the javascript

If you want to perform validation on this you will need to perform an Ajax request like Weebly.com (check top right corner).

that was it for me. :D

Michael Calkins (0) - 4 years ago - Reply 0


This looks great, I'm going to be hooking it up at NE1UP.com. Is anyone able to suggest a quick way to change the color of the dropdown? Mine comes down blue, which matches the background of my website and doesn't look good.

Thomas O'Hearn (0) - 5 years ago - Reply 0


it doesn't work :(

lala (0) - 5 years ago - Reply 0


What do you use, latest Bootstrap?

Maksim Surguy (0) - 5 years ago - Reply 0


Superb bootsnipper's

Fahim (0) - 5 years ago - Reply 0


Has anyone gotten this login to work with error messages in case the form fails validation or authentication?

hayden (0) - 5 years ago - Reply 0


Do you get it to work at all? Can you click the input fields and type into them without the dropdown closing? I'm having troubles getting it to work even tho I just copied the whole thing.

Bred (0) - 5 years ago - Reply 0


It's working for me in Safari. I haven't tried any other browsers.

Hayden (0) - 5 years ago - Reply 0


Would you mind trying in Google Chrome?

Bred (0) - 5 years ago - Reply 0


Seems to be working in Chrome. I was able to replicate the closing behavior when I added some javascript that tried to reference the dropdown. Heres my code:



<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container-fluid">











My App

<div class="nav-collapse collapse">

<ul class="nav">

<li> Home</li>

@if ( !Auth::guest() )

<li> Admin</li>

@endif

</ul>

<ul class="nav pull-right">

<li class="divider-vertical"></li>

@if (!Auth::guest())

Sign Out

@else

<li class="dropdown">

Sign In

<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">

<form method="post" action="login" accept-charset="UTF-8">



@if (Session::has('login_errors'))

{{ Alert::error("Username or password incorrect.") }}

@endif

<div class="input-prepend"><input style="margin-bottom: 15px;" type="text" placeholder="Username" id="username" name="username"></div>

<div class="input-prepend"><input style="margin-bottom: 15px;" type="password" placeholder="Password" id="password" name="password"></div>

<input class="btn btn-primary btn-block" type="submit" id="sign-in" value="Sign In">

</form>

</div>

</li>

@endif

</ul>

</div>

</div>

</div>

</div>

hayden (0) - 5 years ago - Reply 0


When I click "Sign In" and I try to click the input fields, it closes. I have copied the whole snippet exactly as posted here but have no idea why it does that. Any help would be appreciated, this is very great :-)

Bred (0) - 5 years ago - Reply 0


Having m-dropdown.js causes this problem as i have experienced.
Removing data-toggle="dropdown" can help you overcome this.
Also $('.dropdown-toggle').dropdown() in your js file, as bootstrap recommend http://twitter.github.com/b... causes this problem to occur.

narzac (0) - 5 years ago - Reply 0


Cool :D

DirectXp7 (0) - 5 years ago - Reply 0


It`s really cool, but does not work in IE 7-9,

Матвей Иванов (0) - 5 years ago - Reply 0


Can't get the drop down menu to work for some reason, copied the code as it is, also have the correct files ?

James (0) - 5 years ago - Reply 0


Did you get it to work??

Bred (0) - 5 years ago - Reply 0


genial!

Javier Solis (0) - 5 years ago - Reply 0


The checkbox could be wrapped in a label.checkbox. And the other style attributes can mostly be removed, too.

Franz (0) - 5 years ago - Reply 0


share the socialize functionality for commenting, rating the comment, reply and share. its look great

bunny (0) - 5 years ago - Reply 0


add a

password and confirm password for the same menu in signin and attach it in signup and it is perfect

nunziofiore (0) - 5 years ago - Reply 0