Login Menu with Twitter Bootstrap

This little tutorial shows how to create a dropdown menu with a login form using Twitter Bootstrap.

What I wanted to have can be seen in the screenshot below.

The basic elements for this widget can be found here http://twitter.github.com/bootstrap/javascript.html


 

The problem was that the basic menus vanished as soon as something is clicked inside. For my form this means that as soon as the user clicks into the textfield, the menu vanished. So here comes the HTML code for the menu (please don't mind inline style attributes!):

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">      
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>

          <!-- here comes the important part -->

           <li class="dropdown" id="menu1">
             <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
               Login
                <b class="caret"></b>
             </a>
             <div class="dropdown-menu">
               <form style="margin: 0px" accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
                 <fieldset class='textbox' style="padding:10px">
                   <input style="margin-top: 8px" type="text" placeholder="Username" />
                   <input style="margin-top: 8px" type="password" placeholder="Passsword" />
                   <input class="btn-primary" name="commit" type="submit" value="Log In" />
                 </fieldset>
               </form>
             </div>
           </li>

        </ul>
      </div>
    </div>
  </div>
</div>

In order to prevent the menu from being closed whenever the user clicks inside, here are some lines of javascript necessary to do the job:

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script language="javascript">
    $('.dropdown-toggle').dropdown();
    $('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
      });
</script>

 
Inhalt © Michael Knoll 2009-2017  •  Powered by TYPO3  •  TypoScript Blogging by Fabrizio Branca  •  TYPO3 Photo Gallery Management by yag  •  Impressum