jquery - Foundation 5 - combine top navigation with off canvas? -
i new foundation, have looked @ using multiple times have disregarded doesn't seem have many navigation options available. of options available apply top menu. left or right? need build websites complex navigation , require top menu , left hand menu including searches, drop downs , other sub menus.
i use foundation if possible have both top menu , off canvas navigation left hand column. know if possible , go assistance setting up?
you need keep both menus accessible @ times, make them show using show-for-small
, show-for-medium-up
classes.
you'll need use separate sets of navigation in order achieve you're wanting. in order use both, however, you'll need structure website accommodate off-canvas menu , build top-nav within main-section
.
we came across issue our corporate site , wanted call navigation once, proving extremely difficult. if want see live version of code feel free use our site reference. (we have classes hide off-canvas menu medium-and-up
, can remove it).
here's basic example of how structure look:
<div class="off-canvas-wrap" data-offcanvas> <div class="inner-wrap"> <nav class="tab-bar"> <section class="left-small"> <a class="left-off-canvas-toggle menu-icon" ><span></span></a> </section> <section class="middle tab-bar-section"> <h1 class="title"><a href="/home"><img id="logosmall" src="/images/main/header_logo_small.png" /></a></h1> </section> </nav> <aside class="left-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>menu</label></li> <li><a>link1</a></li> <li><a>link2</a></li> <li><a>link2</a></li> </ul> </aside> <section class="main-section"> <!-- of website goes here --> <!-- including top navigation , jazz --> </section> <a class="exit-off-canvas"></a> </div><!--/innerwrapp--> </div><!--/offcanvaswrap-->
Comments
Post a Comment