A twitter like navigation topbar with Bootstrap

I want to show you how to create a twitter like navigation topbar in few minutes using Bootstrap.

“Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.”

As usual I am going to show you the code using Mootools or jQuery.
The html code that you need to add at your page is the same in both cases:

<div class="topbar" id="topbar">
    <div class="fill">
        <div class="container">
            <a class="brand" href="#">Project name</a>
            <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>
            </ul>
            <ul class="nav secondary-nav">
                <li class="menu">
                    <a href="#" class="menu">mconventi</a>
                    <ul class="menu-dropdown">
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Help</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

You need to add the stylesheet given by Bootstrap (you can start from it then you can download the uncompressed file to customize it).

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

If you want to use jQuery all you need is to add jQuery, bootstrap-dropdown.js and call the dropdown function on the topbar:

<script src="<your_path_here>/jquery-1.7.1.min.js"></script>
<script src="<your_path_here>/bootstrap-dropdown.js"></script>
<script>
    $(window).load(function(){
        $('#topbar').dropdown();
    });
</script>

If you prefer Mootools you need to add the core library, the element shortcuts and the classes Bootstrap and Bootstrap.Dropdown:

<script src="<your_path_here>/mootools-core-1.4.2.js"></script>
<script src="<your_path_here>/mootools-element.shortcuts-1.4.0.1.js"></script>
<script src="<your_path_here>/Bootstrap.js"></script>
<script src="<your_path_here>/Bootstrap.Dropdown.js"></script>
<script>
    window.addEvent('domready', function(){
        new Bootstrap.Dropdown($('topbar'));
    });
</script>

Here a demo of what you get

Download the complete code

Thanks to Twitter to have released the Bootstrap toolkit and to Aaron Newton for the “MooTools for Bootstrap” library.

Personally I think that the Bootstrap toolkit can be really useful, it contains other interesting features that I hope to show you soon. Let me know what do you think about this post, thanks

Tags: css, javascript, jquery, layout, mootools, template