jquery - Fix width and sticky navigation and top bar in Zurb Foundation 4 -
i encountering issue of not being able make left hand side navigation bar have fixed width , @ same time make not top-bar, side navigation bar sticky.
i tried google results , stackoverflow hints find , still no luck.
my html:
<!-- navigation bar --> <div class="sticky"> <nav class="top-bar"> <ul class="title-area"> <!-- title area --> <li class="name"><h1><a href="#"><img src="img/logo.png"> </a></h1></li> <!-- remove class "menu-icon" rid of menu icon. take out "menu" have icon alone --> <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li> </ul> <section class="top-bar-section"> <ul class="left"></ul> <ul class="right"> <li class="has-form"> <form> <div class="row collapse"> <div class="small-8 columns"> <input type="text" name="searchfield"> </div> <div class="small-4 columns"> <a href="#" class="tiny button">search</a> </div> </div> </form> </li> </ul> </nav> </section> </div> <!-- main content --> <!-- nav sidebar --> <div class="row"> <div class="large-2 columns"> <div class="ad"> <ul class="side-nav"> <li><a class="tnav" href="#">nachrichten</a></li> <li><a class="tnav" href="#">kultur</a></li> <li><a class="tnav" href="#">wirtschaft</a></li> <li><a class="tnav" href="#">sport</a></li> <li><a class="tnav" href="#">wissenschaft</a></li> <li><a class="tnav" href="#">englisch</a></li> <li><a class="tnav" href="#">technologie</a></li> </ul> </div> </div> <!-- start tiles --> <div id="tiles" class="large-10 columns"s></div> </div>
my code here: http://jsfiddle.net/tpbhd/2/
see preview here: http://jsfiddle.net/tpbhd/2/embedded/result/
template of idea:
Comments
Post a Comment