Foundation 5: Create a TopBar Navigation With a Mobile Menu

9/1/2014 3:20:45 PM

Use Foundation 5 to create a simple Top Bar Navigation that adjusts to mobile devices. For mobile you will see three lines giving access to the menu items.

*This requires the Foundation 5 complete files to be downloaded.

<!doctype html>
<html>
<head>
    <title></title>
    <meta name="Title" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation/foundation-5.4.0/css/foundation.css" rel="stylesheet" />
    <link href="foundation/foundation-5.4.0/css/normalize.css" rel="stylesheet" />
    <!-- your css -->
    <script src="foundation/foundation-5.4.0/js/vendor/modernizr.js"></script>

</head>

<body id="body">

    <nav class="top-bar" data-topbar="" role="navigation">
        <ul class="title-area">
            <li class="name">
                <h1><a href="/" title="home">example.com</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a><span></span></a></li>
        </ul>

        <section class="top-bar-section">

            <!-- Right Nav Section -->
            <ul class="right show-for-large-up">
                <li><a href="/login/">Login / Register</a></li>
            </ul>

            <ul class="right hide-for-large-up">
                <li><a href="/forums/">Forums</a></li>
                <li><a href="/blogs/">Blogs</a></li>
                <li><a href="/login/">Login / Register</a></li>
            </ul>

            <!-- Left Nav Section -->
            <ul class="left show-for-large-up">
                <li><a href="/forums/">Forums</a></li>
                <li><a href="/blogs/">Blogs</a></li>
            </ul>
        </section>
    </nav>

    <!-- js jQuery mist be before foundation-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- js Foundation must be at the bottom of the body tag-->
    <script src="foundation/foundation-5.4.0/js/vendor/fastclick.js"></script>
    <script src="foundation/foundation-5.4.0/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>

</body>

</html>