CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designzurb-foundation
Draconar
Draconar

Reputation: 1195

how is Zurb's Foundation Menu button coded?

In Zurb's Foundation 4, whenever we have the following top-bar navigation

<nav class="top-bar">
<ul class="title-area">
 <!-- Title Area -->
 <li class="name"><!-- Leave this empty --></li>
 <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
 <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
.
.
.

and we use a mobile or just shrinks the browser are a lot, whatever is in the top navigation bar collapses and its contents are replaced by a cool menu icon. As in the picture bellow:

enter image description here

I've tried to use Firebug/Chrome Dev tools and the only thing I'm certain about this button is that is doesn't use a picture. Was it built using only CSS? If so, how?

Googling around I found this site:

http://css-tricks.com/three-line-menu-navicon/

It seems that Foundation uses the "Pseudo Element w/ box-shadow" trick, but I wasn't able to find it in Zurb's code.

My aim is to use this 'menu button' in other parts of my code, not related to the shrinking of the browser's area.

Upvotes: 0

Views: 2919

Answers (1)

imcconnell
imcconnell

Reputation: 844

It's not difficult to find in the code, just inspect the element .toggle-topbar .menu-icon a span

I've made a Fiddle that just has the code for the menu icon:

http://jsfiddle.net/3HPLu/

The only code you really need to generate the three lines is: 

#menu-icon {
    display: block;
    -webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black; 
    box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;   
}

But Zurb just use a mix of positioning tricks to add the 'Menu' text.

Upvotes: 1

Related Questions