Hi,
I have come across the sitepoint tutorial for Mega Drop Down Menu’s and was wondering how I can change it to look like the Mega Drop Down Menu used on the following websites :
johnlewis.co.uk or .com
Also in the book JQuery novice to ninja does it cover mega drop down menus in detail ?
Any help would be much appreciated ?
Thanks
This is a CSS issue. Are you familiar with CSS?
You would need to show us the code you are working with.
Hi,
Thanks for your reply, as for my code, at the moment it is back to exactly the same code as in the sitepoint version, as I tried all different things with it and become frustrated it wasn’t working.
I am familiar with CSS, but if its with JQuery then I am a bit lost really. Here’s the sitepoint code, I also don’t want to use H2 as menu items either…
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 11px;
background: #fff;
color: #333;
}
h1, h2, h3, h4, h5, h6, p, ul, li {
font-size: 1em;
margin: 0;
padding: 0;
}
div#banner {
background: transparent url(mega.gif) top left no-repeat;
padding-top: 12px;
padding-bottom: 36px;
}
div#banner h1, div#menu h2 {
margin: 0;
padding: 0;
}
div#banner h1 a {
display: block;
width: 270px;
height: 120px;
}
div#banner h1 a span, div#banner .skip {
position: absolute;
top: -10000px;
left: -10000px;
}
ul#menu {
background: #940;
color: #fff;
margin: 0;
padding: 0.3em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2, ul#menu h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}
ul#menu li a {
color: #fff;
text-decoration: none;
padding: 0 0.4em;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.mega a {
background: transparent url(arrow.gif) center right no-repeat;
padding: 0 1.2em;
}
ul#menu li.mega a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
border: 1px solid #dda;
width: 18em;
position: absolute;
top: 1.6em;
left: 0em;
padding: 1.3em;
background: #ffc;
color: #930;
}
ul#menu li.hovering div {
display: block;
}
ul#menu li.mega div a {
color: #300;
padding: 0;
background-image: none;
text-decoration: underline;
}
ul#menu li div a.more {
color: #390;
font-weight: bold;
}
ul#menu div h3 {
color: #f70;
font-weight: bold;
font-size: 1.1em;
}
ul#menu div p {
margin: 0 0 0.8em 0;
padding: 0;
}
$(document).ready(function() {
function addMega(){
$(this).addClass("hovering");
}
function removeMega(){
$(this).removeClass("hovering");
}
var megaConfig = {
interval: 500,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};
$("li.mega").hoverIntent(megaConfig)
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li>
<h2>
<a href="#">Home</a>
</h2>
<div>
Latest news, special deals, and more...
</div>
</li>
<li class="mega">
<h2>
<a href="#">Stuff for him</a>
</h2>
<div>
<h3>
Menswear
</h3>
<p>
<a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a>
</p>
<h3>
Gifts
</h3>
<p>
<a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
</p>
<h3>
Clearance!
</h3>
<p>
40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a>
</p><a href="#" class="more">More stuff for him...</a>
</div>
</li>
<li class="mega">
<h2>
<a href="#">Stuff for her</a>
</h2>
<div>
<h3>
Ladieswear
</h3>
<p>
<a href="#">Tops</a>, <a href="#">Pants</a>, <a href="#">Skirts</a>, <a href="#">T-shirts</a>, <a href="#">More...</a>
</p>
<h3>
Gifts
</h3>
<p>
<a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
</p>
<h3>
Shop Now for Mother's Day!
</h3>
<p>
Earlybird Mother's Day specials. <a href="#">Shop early, save on shipping!</a>
</p><a href="#" class="more">More stuff for her...</a>
</div>
</li>
<li class="mega">
<a href="#">Stuff for kids</a>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li class="mega">
<a href="#">Stuff for pets</a>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
</ul>
</div>
Thanks once again.
Hi,
We’d need to see exactly how you wanted it to look but here’s an old demo of mine that has the sort of look I think you are after.
http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm
As a basic start in your page you would need something like this:
ul#menu li div div.block {
float:left;
position:static;
display:block;
width:14em;
margin:0 5px 0 0;
}
<li class="mega">
<h2> <a href="#">Stuff for him</a> </h2>
<div>
[B]<div class="block">
<h3> Menswear </h3>
<p> <a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a> </p>
<h3> Gifts </h3>
<p> <a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a> </p>
<h3> Clearance! </h3>
<p> 40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a> </p>
<a href="#" class="more">More stuff for him...</a> </div>
<div class="block">
<h3> Menswear </h3>
<p> <a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a> </p>
<h3> Gifts </h3>
<p> <a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a> </p>
<h3> Clearance! </h3>
<p> 40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a> </p>
<a href="#" class="more">More stuff for him...</a> </div>[/B]
</div>
</li>
Of course you would still need to style the inner elements as you wanted and adjust to suit.
Thanks for your help,
Your demo is like how I would want it but not that many links, also with regard to the code you posted that just changes the inner styles of the actual drop down div.
When it would be the outside div I would want to change, I have seen another example here:
http://www.visibilityinherit.com/code/mega-drop-down-demo.php
but i don’t know how it works properly because it looks like there is no trigger to do access the drop down menus ?
Thanks
Can you explain more by what you mean by outside the div? Mega menus build a pretty deep css structure. That is why your css knowledge was asked about
What I meant by the outside DIV was that in the examples I have given the DIVS don’t overflow the wrapper if you like,
Lets take the Whitehouse site for example, the first three menu options on the left all display inwards towards the page, whereas the last three menu options on the right wrap inwards but float to the right if that makes sense…
That is easily achieved by adjusting the positioning of the drop down element accordingly. Usually it is placed at left:0 to start in line with the tab but when you get to the right you can adjust it to left:-xxpx (where xxpx equals the width of the menu).
You’ll have to throw up a demo of what you have at the moment so that we can help you further as you need to at least take a stab at this so that we can see where you are going wrong or what problems you are having.