Most of the times I don’t like to code hard and want to make it look like something that already exists. Do you feel the same? I usually prefer the things somebody left it as a template over the internet and use it with convenience. For the Mashable like menu – I have always wanted. So here’s something I want to share – A Mashable like menu.
Mashable Like Menu
No Copyright infringement shall be entertained! The names and things come as part of my experiments.
Here’s the brief of how you begin.
First, make up an ordered list for your header menu. Just make a simple div like this:
<div id="header-area">
<div class="container">
<ul class="menu">
...
</ul>
</div>
</div>
Your menu content goes inside the <ul>. I have categorized submenus so as to make them look different and treat different. The one with class “logo” is for displaying your logo and one with class “submenu” will be treated as a general submenu. The one with class “submenu” + “dropable” is for submenu that scrolls down some content while hovered over it as most of the Mashable submenus do.
The content of the menu shall look like:
<li class="logo">MyMenu</li> <li class="submenu">HOME</li> <li class="submenu dropable">TECH</li>
Next you will place content inside the dropable submenu and you will do it by bundling the content to be shown inside <div class=”dropmenu”>…</div>. This div will the child of <li>.
Here’s a sample for this purpose.
<li class="submenu dropable">TECH <span class="caret"></span>
<div class="dropmenu">
<div class="container">
<div class="tag">
<ul>
<li><a href="#">All Techs</a></li>
<li><a href="#">Apps and Software</a></li>
<li><a href="#">Tablets</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Cellular</a></li>
</ul>
</div>
<div class="feature">
<ul>
<li>
<a href="#">
<img src="image.png" />
<p>Caption to the post</p>
</a>
</li>
<li>
<a href="#">
<img src="image.png" />
<p>Caption to the post</p>
</a>
</li>
<li>
<a href="#">
<img src="image.png" />
<p>Caption to the post</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<li>
The class “tag” is for the list of tags that will appear at left of scrolled content after hovering. And “feature” is for showing thumbnails just at the right of tag lists.
Now you make contents to show for each dropable submenu as explained and place it inside the <li> which is dropable. And your’re done.
Let’s style them.
#header-area{
background: #50b7dc;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
border-bottom: 1px solid #2693ba;
z-index: 1000;
}
.container{
width: 1440px;
margin-right: auto;
margin-left: auto;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: center;
border-top: 4px solid #fff;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
#header-area > .container{background: rgba(124, 124, 124, 0.2);}
.menu{
list-style: none;
margin: 0px;
font-size: 12px;
color: #fff;
cursor: pointer;
}
.menu > li.logo{
font-weight: bold;
font-size: 14px;
}
.menu > li{
display: inline-block;
padding: 13px 10px 13px 10px;
min-width: 100px;
text-align: center;
}
.menu > li.submenu:hover{ background: rgba(124, 124, 124, 0.3);
.menu > li.dropable:hover{ color: #50b7dc; background: #ddf0f9;}
.dropmenu{
color: #fff;
position: absolute;
left: 0;
z-index: 999;
display: none;
width: 100%;
margin: 0px 0 0;
height: 200px;
list-style: none;
border-bottom: 5px solid #50b7dc;
}
.dropmenu > .container{
font-size: 14px;
font-weight: bold;
}
.dropmenu > .container > .tag{
width: 200px;
min-height: 200px;
background: #c7e6f5;
color: #0698dd;
display: block;
margin-bottom: 6px;
position: relative;
float: left;
}
.dropmenu > .container > .tag > ul{list-style: none; padding-top: 10px;}
.dropmenu > .container > .tag > ul > li{padding: 5px; text-align: right; padding-right: 20px;}
.dropmenu > .container > .tag > ul > li > a{ text-decoration: none; color: inherit;}
.dropmenu > .container > .tag > ul > li:hover{background: #ddf0f9;}
.dropmenu > .container > .feature > ul{list-style: none; display:block;}
.dropmenu > .container > .feature{
float: left;
}
.dropmenu > .container > .feature > ul > li{
width: 200px;
padding: 10px;
margin: 5px;
display: inline-block;
}
.dropmenu > .container > .feature > ul > li > a{ text-decoration: none; }
.dropmenu > .container > .feature > ul > li > a > img{ width: 200px; }
.dropmenu > .container > .feature > ul > li > a > p{ text-align: center; color: #000;}
And the bit of javascript to bind the hovering job.
$(document).ready(function(){
$('.dropable').hover(function(e){
e.preventDefault();
var topY = $(this).offset().top + $(this).outerHeight();
var drop = $(this).find('.dropmenu');
drop.css('top',topY);
drop.stop().slideDown('normal');
}, function(e){
e.preventDefault();
$(this).find('.dropmenu').stop().slideUp('normal');
});
});
Now you’re ready to go with the Mashable like menu of your own.
Demo | Download
It would be convenient for you to download the files and edit as per your need rather than beginning from an empty project.
The content of submenu doesn’t loads up via ajax. May be lack of time or may be that it is all I needed, I just made up to here.
