css - zurb-foundation icon as a dropdown menu -
i'm having trouble using foundation icon set. i'd use icon button dropdown menu in navbar.
<div class="contain-to-grid sticky"> <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large"> <ul class="title-area"> <li class="name"> <a href="#"><img src="http://placehold.it/100x45&text=logo"/></a> </li> <li class="toggle-topbar menu-icon"><a href="#">menu</a></li> </ul> <section class="top-bar-section"> <ul class="right"> <li> <i class="fi-thumbnails has-dropdown"></i> <ul class="dropdown"> <li>all</li> <li>art</li> <li>music</li> <li>lifestyle</li> </ul> </li> <li><i class="fi-list has-dropdown" href="#">menu</i></li> </ul> </section> </nav> </div>
any advice?
try wrapping icon in anchor tag , setting href
attribute #
. also, class="has-dropdown"
should moved parent list item.
<ul class="right"> <li class="has-dropdown"> <a href="#"><i class="fi-thumbnails"></i></a> <ul class="dropdown"> <li>all</li> <li>art</li> <li>music</li> <li>lifestyle</li> </ul> </li> <li class="has-dropdown"> <a href="#"><i class="fi-list">menu</i></a> <ul class="dropdown"> <li>menu item</li> </ul> </li> </ul>
Comments
Post a Comment