Foundation 5.5.0 Custom Topbar with Mega Menu

by Charles Butler

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"></script>
<div id="head-bar">
    <header>
        <div class="nav">
            <section class="head-bar-section clearfix">
                <ul class="right">
                    <li><a href="#"><i class="fa fa-home"></i></a>

                    </li>
                    <li><a href="#"><i class="fa fa-user"></i></a>

                    </li>
                    <li><a href="#"><i class="fa fa-bell-o"></i></a>

                    </li>
                    <li><a data-options="align:bottom" data-dropdown="autoCloseExample" aria-controls="autoCloseExample" aria-expanded="false"><i class="fa fa-search"></i></a> 
                        <div id="autoCloseExample" class="f-dropdown small" data-dropdown-content tabindex="-1" aria-hidden="true" aria-autoclose="false" tabindex="-1">
                            <form class="s-bar">
                                <div class="small-10 columns">
                                    <input type="text" placeholder="Search..." />
                                </div>
                                <div class="small-2 columns"> <a href="#" class="button expand postfix"><i class="fa fa-search"></i></a>

                                </div>
                            </form>
                        </div>
                    </li>
                </ul>
            </section>
        </div>
    </header>

CSS

body {
    background: #888 url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/Purple-wallpaper-7.jpg);
    background-size: cover;
    overflow-x: hidden;
}
/* Wrapped around .top-bar to contain to grid width */
 #head-bar {
    width: 100%;
    background: #efefef;
}
#head-bar .nav ul {
    list-style: none;
    background-color: #efefef;
    padding: 0;
    margin: 0;
}
#head-bar .nav li {
    font-family:'Open Sans', sans-serif;
    font-size: 1.2em;
    line-height: 50px;
    height: 50px;
    width: 50px;
    text-align: center;
    display: inline-block;
    margin-right: -4px;
}
#head-bar .nav a {
    text-decoration: none;
    color: #888;
    display: block;
    transition: .3s background-color;
}
#head-bar .nav a:hover {
    color: #F82C2C;
    background-color: #FFF;
}
.head-bar-section {
    transition: none 0 0;
    left: 0 !important;
}
.head-bar-section ul {
    width: auto;
    height: auto !important;
    display: inline;
}
.head-bar-section ul li {
}
#head-bar .f-dropdown {
    position: absolute;
    margin-top: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
#head-bar .f-dropdown:before, #head-bar .f-dropdown:after {
    border: none;
}
#head-bar .s-bar {
    margin:0;
    border: 0;
    box-shadow: none;
}
#head-bar .s-bar input[type="text"] {
    margin:0;
    border: 0;
    box-shadow: none;
}
#head-bar .s-bar .button {
    margin:0;
    border: 0;
    box-shadow: none;
    border: none;
}

JavaScript

$(document).foundation();