You are here

How to Make a Mega Drop-Down Menu

Mega drop-down menus are not actually new, but more and more we see them on popular websites and blogs. With the ever increasing quantity of content on the web we have to figure out solutions to display content and navigation but still keep everything usable and provide a good user experience. It’s no wonder mega drop-downs are now used more often.

Today we’ll take a look at creating a simple HTML site with a horizontal navigation bar where a menu item will have a mega drop-down attached to it. I used jQuery for the drop-down and some CSS3 for the rounded corners.

First of all we’ll need a design:

screenshot_thumbnail

Step 1 – The Markup

Before we can start working on the mega drop-down menu we will need a working site so let’s write our HTML. Of course for the purpose of this tutorial the links in the menu won’t work.

Let’s start with the header. We’ll include our style.css file and the jQuery library (you can download the jQuery library here.)

01 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
02 &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
03 <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
04  
05 <head>
06 <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
07 <title>Mega Drop-Down Menu Demo</title>
08 <link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />
09 <script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.3.2.min.js&quot;></script>
10 </head>

Then we will add a H1 and a paragraph that explains what the demo site is about:

1 <body>
2 <h1>Mega Drop-Down Menu Demo Site</h1>
3 <p>This page is an example of a mega drop-down menu, but with more options than the usual suckerfish drop downs. We used jQuery, CSS3 and HTML to create this mega drop down menu.</p>

And then our navigation bar (without the drop-down for now):

01 <div>
02 <ul>
03 <li><a href=&quot;#&quot;>home</a></li>
04 <li><a href=&quot;#&quot;>about</a></li>
05 <li><a href=&quot;#&quot;>services</a></li>
06 <li><a href=&quot;#&quot;>products</a></li>
07 <li><a href=&quot;#&quot;>portfolio</a></li>
08 <li><a href=&quot;#&quot;>contact</a></li>
09 </ul>
10 </div>

We have 6 menu items and we will use the ‘services’ tab and attach our drop-down to it. But before we do that let’s add some content to our site. We’ll put 2 paragraphs with some Lorem Ipsum inside a div.

1 <div>
2 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
3  
4 <p>Ut purus metus, fermentum vitae pulvinar vel, elementum eget nulla. Pellentesque posuere, enim ut dapibus vestibulum, leo nunc porttitor neque, sed pulvinar orci sem eleifend sapien. Nullam at odio nibh, eu pharetra ipsum. Pellentesque eget ante nec ante consequat ullamcorper a vitae mauris. Integer lacus lorem, sollicitudin vulputate posuere at, commodo a sapien. Vivamus lobortis vehicula imperdiet. Donec a congue tortor. Fusce augue tortor, pretium pharetra pellentesque ornare, laoreet nec sapien. Ut eget magna tellus. Pellentesque posuere accumsan condimentum.</p>
5 </div>

And then we can end our document with the closing body and html tags.

Before we dive into the CSS, let’s add our drop-down. Here’s the new markup for the menu. I added a class to the ‘services’ list item since this is the one that will have the mega drop-down and I added a div with some content in it.

01 <div>
02 <ul>
03 <li><a href=&quot;#&quot;>home</a></li>
04 <li><a href=&quot;#&quot;>about</a></li>
05 <li><a href=&quot;#&quot;>services</a></li>
06  
07 <div class=&quot;servicesdropped&quot;>
08 <p>Here's an example of a paragraph inside the drop-down panel. We placed this paragraph in the left column. Then we have 2 more columns on the right with a H3 for the section title and then we have unordered lists.</p>
09 <ul>
10 <h3>Design Services</h3>
11 <li><a href=&quot;#&quot;>Web Design</a></li>
12 <li><a href=&quot;#&quot;>Hosting Solutions</a></li>
13 <li><a href=&quot;#&quot;>Logo Design</a></li>
14 <li><a href=&quot;#&quot;>e-Commerce</a></li>
15 <li><a href=&quot;#&quot;>WordPress Integration</a></li>
16 <li><a href=&quot;#&quot;>PSD/PNG Conversion</a></li>
17 </ul>
18 <ul>
19 <h3>Writing Services</h3>
20 <li><a href=&quot;#&quot;>Freelance Writing</a></li>
21 <li><a href=&quot;#&quot;>Blogging</a></li>
22 <li><a href=&quot;#&quot;>Proofreading</a></li>
23 <li><a href=&quot;#&quot;>Copywriting</a></li>
24 <li><a href=&quot;#&quot;>Ghost Writing</a></li>
25 <li><a href=&quot;#&quot;>Marketing Plan</a></li>
26 </ul>
27 </div>
28  
29 <li><a href=&quot;#&quot;>products</a></li>
30 <li><a href=&quot;#&quot;>portfolio</a></li>
31 <li><a href=&quot;#&quot;>contact</a></li>
32 </ul>
33 </div>

As you can see the whole mega drop-down panel is contained within the div=”servicesdropped”. I put a paragraph and some unordered lists in there (later styled using CSS)

Now we have a working HTML website. Of course without CSS it doesn’t look very good as you can see:

unstyled_screenshot

Part 2 – jQuery

Now let’s work on the jQuery part. It’s actually very simple. I want the ‘services’ tab to open up a mega drop-down panel when clicked. And I want the panel to close the ‘services’ tab is clicked again.

Let’s insert this code in the head of our document:

1 <script type=&quot;text/javascript&quot;>
2 $(document).ready(function(){
3 $(&quot;.downservices&quot;).click(function(){
4 $(&quot;.servicesdropped&quot;).toggle(&quot;fast&quot;);
5 });
6 });
7 </script>

This will tell the browser to toggle the panel with a class of .servicesdropped up and down when the list item with a class of .downservices is clicked. Simple huh?

Step 3 – CSS3

I used some CSS3 to give our divs and paragraphs some rounded corners. Of course the rest of the CSS file is pretty straight forward:

001 body {
002 background:#eee;
003 text-align:left;
004 color:#666;
005 width:700px;
006 font-size:16px;
007 font-family:georgia, 'time new romans', serif;
008 margin:0 auto;
009 padding:0;
010 }
011  
012 h1 {
013 font-size:46px;
014 font-family:'Trebuchet MS', helvetica, arial, sans-serif;
015 letter-spacing:-1px;
016 color:#000;
017 font-weight:400;
018 padding:20px 0 0;
019 }
020  
021 h2 {
022 font-size: 34px;
023 font-family: 'Trebuchet MS', helvetica, arial, sans-serif;
024 color:#21211f;
025 font-weight: 400;
026 padding: 20px 0 10px; 0
027 }
028  
029 h3 {
030 font-size:14px;
031 font-family:verdana, helvetica, arial, sans-serif;
032 letter-spacing:-1px;
033 color:#fff;
034 font-weight:400;
035 text-transform:uppercase;
036 margin:0;
037 padding:8px 0 8px 15px;
038 }
039  
040 p {
041 color:#aaa;
042 font-style:italic;
043 line-height:22px;
044 padding:0 0 30px;
045 }
046  
047 img {
048 border:none;
049 }
050  
051 .content {
052 margin:10px 0 50px;
053 padding:0;
054 }
055  
056 .content p {
057 font-style:normal;
058 font-family:helvetica, arial, verdana, sans-serif;
059 color:#676767;
060 background:#fff;
061 border:1px solid #fff;
062 -moz-border-radius:5px;
063 -webkit-border-radius:5px;
064 margin:35px 0;
065 padding:20px;
066 }
067  
068 .megamenu {
069 background:#9FC54E;
070 border:1px solid #9FC54E;
071 -moz-border-radius:5px;
072 -webkit-border-radius:5px;
073 font-family:helvetica, arial, sans-serif;
074 font-size:24px;
075 width:698px;
076 height:60px;
077 color:#FFF;
078 margin:0;
079 padding:0;
080 }
081  
082 .megamenu ul {
083 text-align:center;
084 list-style-type:none;
085 margin:0;
086 padding:16px;
087 }
088  
089 .megamenu ul li {
090 list-style-type:none;
091 display:inline;
092 margin:0;
093 padding:0;
094 }
095  
096 .megamenu ul li a,.megamenu ul li a:visited {
097 text-decoration:none;
098 color:#fff;
099 margin:0;
100 padding:10px;
101 }
102  
103 .megamenu ul li a:hover,.megamenu ul li a:visited:hover {
104 text-decoration:none;
105 color:#CEFF65;
106 margin:0;
107 padding:10px;
108 }
109  
110 .megamenu ul li.downservices {
111 background:url(images/arrow.png) 100% 55% no-repeat;
112 margin:0;
113 padding:10px 8px 10px 10px;
114 }
115  
116 .servicesdropped {
117 display:none;
118 text-align:left;
119 position:absolute;
120 background:#172323;
121 font-size:12px;
122 width:590px;
123 -moz-border-radius:5px;
124 -webkit-border-radius:5px;
125 border:1px solid #000;
126 margin:10px 0 0 20px;
127 padding:10px 20px 20px;
128 }
129  
130 .servicesdropped p.textleft {
131 float:left;
132 font-size:12px;
133 width:200px;
134 margin:10px 0 0;
135 padding:0 20px 15px 10px;
136 }
137  
138 .servicesdropped ul.middle {
139 text-align:left;
140 float:left;
141 border-right:1px solid #333;
142 border-left:1px solid #333;
143 font-size:12px;
144 width:180px;
145 margin:0;
146 padding:0;
147 }
148  
149 .servicesdropped ul.right {
150 text-align:left;
151 float:left;
152 font-size:12px;
153 width:178px;
154 margin:0;
155 padding:0;
156 }
157  
158 .servicesdropped ul.right li a,.servicesdropped ul.middle li a {
159 list-style-type:none;
160 display:block;
161 color:#888;
162 font-size:12px;
163 margin:0;
164 padding:5px 0 5px 20px;
165 }
166  
167 .servicesdropped ul.right li a:hover,.servicesdropped ul.middle li a:hover {
168 list-style-type:none;
169 color:#9FC54E;
170 display:block;
171 font-size:12px;
172 margin:0;
173 padding:5px 0 5px 21px;
174 }

Our rounded corners are styled using the border-radius property (the W3C validator doesn’t like this, but it looks good and doesn’t impact usability at all). Something like this:

1 border:1px solid #000;
2 -moz-border-radius:5px;
3 -webkit-border-radius:5px;

Of course I changed the border color to match the color of my divs and paragraphs. The rounded corners won’t work in IE6, but does it really matter? :)

 

 

Source :- tutorialized.com