CSS, Javascript, jQuery

Facebook Top Bar/Bottom Bar Sticky Navigation Bar

This snippet shows you how to make a Facebook bottom bar like they used to have before the latest redesign.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Facebook Navigation Example</title>

    <script>
        // This is the JavaScript that controls the menu
        var SubMenutimer;
        var last_o;

        $(".mainbar").ready(function () {
            $(".staticMenu dt a").click(function () {

                $(".staticMenu dd ul").not($(this).parents(".staticMenu").find("ul")).hide();
                $(".staticMenu dt a").not($(this)).removeClass("selected");
                $(this).parents(".staticMenu").find("ul").toggle();

                if ($(this).parents(".staticMenu").find("ul").css("display") == "none") {
                    $(this).removeClass("selected");
                } else {
                    $(this).addClass("selected");
                }

            });

            $(".staticMenu dd ul li a").click(function () {
                var text = $(this).html();
                $(".staticMenu dt a span").html(text);
                $(".staticMenu dd ul").hide();
            });

            $(document).bind('click', function (e) {
                var $clicked = $(e.target);
                if (!$clicked.parents().hasClass("staticMenu")) {
                    $(".staticMenu dd ul").hide();
                    $(".staticMenu dt a").removeClass("selected");
                }

            });
        });

        function openSubMenu(o) {
            cancelSubMenuClose();

            if (last_o) $(last_o).parent().find("div").hide();

            last_o = o;
            $(o).parent().find("div").show();
        }

        function closeSubMenu() {
            SubMenutimer = setTimeout("close()", 500);
        }

        function cancelSubMenuClose() {
            clearTimeout(SubMenutimer);
        }

        function close() {
            $(last_o).parent().find("div").hide();
        }
    </script>

    <style>
        div.mainbar {
            top: 0;
            z-index: 99;
            padding: 0;
            position: fixed;
            width: 100%;
        }

        div.mainbarInner {
            background: url(/images/pre_top.png);
            border: 1px solid #bcb6aa;
            border-top: 0;
            border-bottom: 0;
            margin: 0 15px;
        }

        ul.mainMenu {
            list-style: none;

        }

        ul.mainMenu li {
            float: left;
            border-right: 1px solid #bcb6aa;
        }

        .mainMenu li a {
            padding: 5px 4px 5px 4px;
            margin-bottom: 1px;
            display: block;
            font-weight: bold;
            color: #444444;
            line-height: 15px;
            text-decoration: none;
        }

        .mainMenu li a:hover {
            background: white;
            text-decoration: none;
        }

        .staticMenu dl {
        }

        .staticMenu dd {
            position: relative;
        }

        /* DT styles for sliding doors */
        .staticMenu dt a {
            padding: 5px 4px 5px 4px;
            margin-bottom: 1px;
            display: block;
            font-weight: bold;
            color: #444444;
            line-height: 15px;
            text-decoration: none;
        }

        .staticMenu dt a.selected {
            background: white;
            position: relative;
            z-index: 99;
            padding-bottom: 6px;
        }

        /* UL styles */
        .staticMenu dd ul {
            display: none;
            list-style: none;
            position: absolute;
            cursor: pointer;
        }

        ul.mainMenuSub {
            position: absolute;
            top: -2px;
            left: -1px;
            padding: 2px;
            border: 1px solid #b4a291;
            background: white;
        }

        ul.mainMenuSub li {
            border: 0;
            width: 223px;
        }

        ul.mainMenuSub li.seperator {
            width: 223px;
            height: 2px;
            display: block;
            background: url(/images/mainmenusep.png) repeat-x;
            margin-bottom: 6px;
            margin-top: 4px;
            overflow: visible;
        }

        ul.mainMenuSub li a:link {
            display: block;
            font-weight: bold;
            text-align: left;
            overflow: hidden;
            padding: 2px 4px 3px 19px;
            color: #444444;
            text-decoration: none;
        }

        ul.mainMenuSub li a:hover {
            background: #444444;
            color: white;
            text-decoration: none;
        }

        ul.mainMenuSub li a img {

            border: 0;
        }

        ul.mainMenuSmall li {
            width: 173px;
        }

        div.mainMenuSubTwo {
            display: none;
            left: 220px;
            position: absolute;
            top: 3px;
            z-index: 99;
            background: white;
        }

        div.mainMenuSubTwo ul {
            border: 1px solid #b4a291;
            padding: 2px;
            background: white;
        }

        a.MainSubExpandable {
            background: white url(/images/mainmenuexpandable.png) no-repeat right top;
        }

        ul.mainMenuSub li a.MainSubExpandable:hover {
            background: #444444 url(/images/mainmenuexpandable.png) no-repeat;
            background-position: right -20px;
        }
    </style>

</head>
<body>
    <div class="mainbar">
        <div class="mainbarInner" style="overflow:visible; position:relative; display:block; height:26px;">
            <ul class="mainMenu">
                <li>
                    <dl style="" class="staticMenu">
                        <dt><a href="/applications" onclick="return false;">Applications</a></dt>
                        <dd>
                            <ul class="mainMenuSub">
                                <li><a>There are no applications here</a></li>
                            </ul>
                        </dd>
                    </dl>
                </li>
                <li>
                    <dl style="" class="staticMenu">
                        <dt><a href="/places" onclick="return false;">Places</a></dt>
                        <dd>
                            <ul class="mainMenuSub">
                                <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Library</a>

                                    <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        <ul>
                                            <li><a href="#">Videos</a></li>
                                            <li><a href="#">Favourites</a></li>
                                            <li><a href="#">Playlists</a></li>
                                            <li><a href="#">Subscriptions</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="seperator"><!-- --></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Networks</a></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Groups</a></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Friends</a></li>
                                <li class="seperator"><!-- --></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Inbox</a></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Channel</a></li>
                            </ul>
                        </dd>
                    </dl>
                </li>
                <li>
                    <dl style="" class="staticMenu">
                        <dt><a href="/settings" onclick="return false;">Settings</a></dt>
                        <dd>
                            <ul class="mainMenuSub">
                                <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Preferences</a>
                                    <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        <ul>
                                            <li><a href="#">About Me</a></li>
                                            <li><a href="#">Appearence</a></li>
                                            <li><a href="#">Main Menu</a></li>
                                            <li><a href="#">Privacy</a></li>
                                            <li><a href="#">Notifications</a></li>
                                            <li><a href="#">Adverts</a></li>
                                            <li><a href="#">Safe Search</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Administration</a>
                                    <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        <ul>
                                            <li><a href="#">Block List</a></li>
                                            <li><a href="#">Parental Controls</a></li>
                                            <li><a href="#">Email Options</a></li>
                                            <li><a href="#">Username</a></li>
                                            <li><a href="#">Password</a></li>
                                            <li><a href="#">Payments</a></li>
                                            <li><a href="#">Linked Accounts</a></li>
                                            <li><a href="#">Security Question</a></li>
                                            <li><a href="#">Deactivate Account</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="seperator"><!-- --></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Help Center</a></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">About StageX</a></li>
                                <li class="seperator"><!-- --></li>
                                <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Developers</a></li>
                            </ul>
                        </dd>
                    </dl>
                </li>
            </ul>
            <div style='float:right;'>
                <ul class="mainMenu" style="float:right;">
                    <li style="border-right:0;">
                        <dl class="staticMenu">
                            <dt><a href="/settings" onclick="return false;">Sam</a></dt>
                            <dd>
                                <ul class="mainMenuSub" style="right:-1px; left:auto;">
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="A" style="cursor:pointer;">Available</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Busy</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Away</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Appear Offline</a></li>
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Log out</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Switch User</a></li>
                                </ul>
                            </dd>
                        </dl>
                    </li>
                </ul>
                <div class="notificationArea" style='float:right;'>
                    Notification Icons
                </div>
            </div>
        </div>
    </div>
</body>
</html>

3 thoughts on “Facebook Top Bar/Bottom Bar Sticky Navigation Bar

  1. Um, the link shows only:

    Videos Channels Community
    sam.millman@googlemail.com | My Library | Settings | Help | Logout
    cheese

    Logout array(6) { [“logged”]=> bool(true) [“uid”]=> string(24) “4c9f8ed96803faaa211d0000” [“server_key”]=> string(24) “uyeiTFFRUVE7QSk+PVBcLVs=” [“AUTH_TIER2”]=> bool(true) [“email”]=> string(26) “sam.millman@googlemail.com” [“form_hash”]=> string(32) “690a0a28628d9f78d0b35da4e1e3658c” } 4ca227bb6803faef03040000

    1. Oops yeah sorry I reformatted the server recently to try something and now everything has changed. I forgot that all my wordpress links no longer work.

      I’ll try and get the examples back up and working asap.

      Thanks for reminding me 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s