Create a Hybrid nav with Foundation 5’s OffCanvas & Top-Bar

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

JUMP TO: Phase 1 or Phase 3 

Phase 2 – Create a Hybrid navigation with Foundation 5’s OffCanvas & Top-Bar

I got to give credit where credit is due, this implementation mainly came from PETER GRAFF on the Foundation forum. I added some nav elements and a constrain to grid `<div>`.

Go to the Views/Shared folder and open the _Foundation.cshtml and replace all code past the <body> tag and before the @Scripts.Render(“~/bundles/jquery”) line with the following:

<div class="off-canvas-wrap">
    <div class="inner-wrap">

        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li>
                    <label class="first">NAVIGATION</label></li>
                <li><a href="/Home">Home</a></li>
                <li><a href="/Overview">Overview</a></li>
                <li><a href="/Home/Contact">Contact</a></li>
            </ul>
        </aside>

        <nav class="tab-bar show-for-small">
            <a class="left-off-canvas-toggle menu-icon">
                <span>Menu</span>
            </a>
        </nav>

        <!--contains to grid start - Remove to expand nav elements to edge of page-->
        <div class="contain-to-grid">
            <!--use Foundation top-bar element for all but small screens-->
            <nav class="top-bar hide-for-small" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <h1><a href="/Home/">WEBSITE</a></h1>
                    </li>
                </ul>

                <section class="top-bar-section">
                    <ul class="right">
                        <li class="divider"></li>
                        <li class="has-dropdown">
                            <a href="#" class="">Home</a>
                            <ul class="dropdown">
                                <li><a href="#">Overview</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </li>
                        @*@Html.Partial("_LoginPartial")*@
                    </ul>

                </section>
            </nav>

            <!-- Contain to grid end-->
        </div>
        <a class="exit-off-canvas" href="#"></a>
        @RenderBody()
    </div>
    <!--off-canvas inner-->
</div>
<!--off-canvas wrap-->

Thats it. Foundation will do the rest.

Leave a Reply

You must be logged in to post a comment.