-
-
Save jfeliweb/9f99a390ca20b0ff569d39ff55ff013b to your computer and use it in GitHub Desktop.
Foundation Mega-menu html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html class="no-js" lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Foundation Mega Menu</title> | |
<link rel="stylesheet" href="css/app.css" /> | |
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet"> | |
<script src="bower_components/modernizr/modernizr.js"></script> | |
</head> | |
<body> | |
<nav class="mega-menu"> | |
<div class="row collapse"> | |
<div class="medium-3 columns"> | |
<img src="assets/img/duality.png" alt="company logo"> | |
</div> | |
<div class="medium-7 columns"> | |
<ul class="button-group even-3"> | |
<li><a href="#" class="button" data-dropdown="living" data-options="is_hover:true; hover_timeout:500">Living Room Furniture</a></li> | |
<li><a href="#" class="button" data-dropdown="bedroom" data-options="is_hover:true; hover_timeout:500">Bedroom Room Furniture</a></li> | |
<li><a href="#" class="button" data-dropdown="storage" data-options="is_hover:true; hover_timeout:500">Storage<br>Furniture</a></li> | |
</ul> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="medium-12 columns"> | |
<div id="living" data-dropdown-content class="f-dropdown content mega"> | |
<div class="row"> | |
<div class="small-3 columns"> | |
<h4>Shop by Category</h4> | |
<ul class="categories"> | |
<li><a href="#"><i class="fi-fast-forward"></i>Sofas</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Beanbags</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Lounges</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Comfy Stuff</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Coffee Tables</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Poofs</a></li> | |
</ul> | |
</div> | |
<div class="small-5 columns"> | |
<h4>Shop by Style</h4> | |
<ul class="small-block-grid-3"> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
</ul> | |
</div> | |
<div class="small-4 columns"> | |
<h4>Need Help?</h4> | |
<form> | |
<div class="row collapse"> | |
<label>Search Our Inventory</label> | |
<div class="small-9 columns"> | |
<input type="search" placeholder="find something" /> | |
</div> | |
<div class="small-3 columns"> | |
<span class="postfix">Search</span> | |
</div> | |
</div> | |
</form> | |
<h4>Contact Us</h4> | |
<ul class="contact"> | |
<li><i class="fi-telephone"></i> 1-877-000-0000</li> | |
<li><i class="fi-mail"></i> [email protected]</li> | |
<li><i class="fi-social-twitter"></i> @dualityfurniture</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div id="bedroom" data-dropdown-content class="f-dropdown content mega"> | |
<div class="row"> | |
<div class="small-3 columns"> | |
<h4>Shop by Category</h4> | |
<ul class="categories"> | |
<li><a href="#"><i class="fi-fast-forward"></i>Beds</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Wardrobe</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Nightstands</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Mirrors</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Lamps</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Duvets</a></li> | |
</ul> | |
</div> | |
<div class="small-5 columns"> | |
<h4>Shop by Style</h4> | |
<ul class="small-block-grid-3"> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
</ul> | |
</div> | |
<div class="small-4 columns"> | |
<h4>Need Help?</h4> | |
<form> | |
<div class="row collapse"> | |
<label>Search Our Inventory</label> | |
<div class="small-9 columns"> | |
<input type="search" placeholder="find something" /> | |
</div> | |
<div class="small-3 columns"> | |
<span class="postfix">Search</span> | |
</div> | |
</div> | |
</form> | |
<h4>Contact Us</h4> | |
<ul class="contact"> | |
<li><i class="fi-telephone"></i> 1-877-000-0000</li> | |
<li><i class="fi-mail"></i> [email protected]</li> | |
<li><i class="fi-social-twitter"></i> @dualityfurniture</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div id="storage" data-dropdown-content class="f-dropdown content mega"> | |
<div class="row"> | |
<div class="small-3 columns"> | |
<h4>Shop by Category</h4> | |
<ul class="categories"> | |
<li><a href="#"><i class="fi-fast-forward"></i>Benches</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Bookshelves</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Bookcases</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Floating Shelves</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Ottomans</a></li> | |
<li><a href="#"><i class="fi-fast-forward"></i>Secret Passages</a></li> | |
</ul> | |
</div> | |
<div class="small-5 columns"> | |
<h4>Shop by Style</h4> | |
<ul class="small-block-grid-3"> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
<li> | |
<img src="http://placehold.it/250x150"> | |
<p>Description</p> | |
</li> | |
</ul> | |
</div> | |
<div class="small-4 columns"> | |
<h4>Need Help?</h4> | |
<form> | |
<div class="row collapse"> | |
<label>Search Our Inventory</label> | |
<div class="small-9 columns"> | |
<input type="search" placeholder="find something" /> | |
</div> | |
<div class="small-3 columns"> | |
<span class="postfix">Search</span> | |
</div> | |
</div> | |
</form> | |
<h4>Contact Us</h4> | |
<ul class="contact"> | |
<li><i class="fi-telephone"></i> 1-877-000-0000</li> | |
<li><i class="fi-mail"></i> [email protected]</li> | |
<li><i class="fi-social-twitter"></i> @dualityfurniture</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</nav> | |
<script src="bower_components/jquery/dist/jquery.min.js"></script> | |
<script src="bower_components/foundation/js/foundation.min.js"></script> | |
<script src="js/app.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.mega-menu { | |
.button { | |
background: transparent; | |
color: #999; | |
} | |
.categories { | |
@include side-nav; | |
li a { | |
color: #999; | |
&:hover { | |
color: black; | |
} | |
} | |
} | |
.contact { | |
@include side-nav; | |
} | |
i { | |
padding-right: .5rem; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment