By the way making mega menu using jquery and javascript is very hard to understand. Most of the designers just copy and paste to use the mega menu. But using CSS 3 is very easy to make mega menu. Here I am just showing tips to create mega menu using CSS 3. Follow the bellow steps and make a mega menu for your blogger and your html/css website.
How to make mega menu using CSS 3?
Step 1: Open any platform like Notepad or Dreamweaver.
Step 2: Put the below code into the middle of <style> </style>.
.main_menu{ background:#006;}
.main_menu ul li a{ font-size:15px; font-weight:bold; text-transform:uppercase; color:#fff; padding-right:25px !important; padding-left:25px !important;}
.main_menu ul li a:hover{ background: #008821;}
a.focus{ background:#008821;}
/*mega menu*/
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
/*
#menu {
margin: 20px 0px 0px 0px;
border: 1px solid rgba(85, 78, 27, 0.25);
background-color: #033;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
*/
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
/* border-right: 1px solid #777;
*//* box-shadow: 1px 0 0 #444;
*/ position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #fff;
text-transform: uppercase;
font: bold 14px Arial, Helvetica;
text-decoration: none;
/* text-shadow: 0 1px 0 #000;
*/}
#menu li:hover > a {
color: #fff;
}
*html #menu li a:hover { /* IE6 only */
color: #fff;
}
#menu ul {
z-index:999 !important;
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
background:#006 !important;
/* background: #033 !important;
*/ /*background: linear-gradient(#444, #111);
*/
/* box-shadow: 0 -1px 0 rgba(255,255,255,.3);
*/ border-radius: 3px;
transition: all .4s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 130px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
/* box-shadow: -1px 0 0 # FFF;
*/}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
/* box-shadow: 0 1px 0 #777, 0 2px 0 #999;
*/}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
min-width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
/* background-color: #0186ba;
*//* background-image: linear-gradient(#04acec, #0186ba);
*/}
#menu ul li:first-child > a {
/* border-radius: 3px 3px 0 0;
*/}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
/* border-bottom: 6px solid #444;
*/}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #066;
}
#menu ul li:first-child a:hover:after {
/* border-bottom-color: #04acec;
*/}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
/*mega menu*/
#menu-trigger { /* Hide it initially */
display: none;
}
/*End Mega Menu*/
Step 3: Now use the below code into the <body> </body> tag.
<ul id="menu" class="main_menu">
<li><a href="#" class="focus">Home</a></li>
<li><a href="#">Nepal</a>
<ul>
<li><a href="#">Trekking</a>
<ul>
<li><a href="#">Everest Base Camp Trek</a></li>
<li><a href="#">Everest Circuit Trek</a></li>
<li><a href="#">Annapurna Base Camp Trek</a></li>
<li><a href="#">Annapurna Circuit Trek</a></li>
<li><a href="#">Langtang Trek</a></li>
<li><a href="#">Ghorepani Trek</a></li>
</ul>
</li>
<li><a href="#">Tours</a>
<ul>
<li><a href="#">Kathmandu Nagarkot Tour</a></li>
<li><a href="#">Lumbini Pilgrimage Tour</a></li>
<li><a href="#">Kathmandu Pokhara Tour</a></li>
<li><a href="#">Kathmandu Heritage Tour</a></li>
</ul>
</li>
<li><a href="#">Adventure Activities</a>
<ul>
<li><a href="#">Paragliding in Pokhara</a></li>
<li><a href="#">Bungee Jumping</a></li>
<li><a href="#">River Rafting</a>
<ul>
<li><a href="#">Trishuli River Rafting</a></li>
<li><a href="#">Kaligandaki River Rafting</a></li>
<li><a href="#">Marshyandi River Rafting</a></li>
<li><a href="#">Karnali River Rafting</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tibet</a>
<ul>
<li><a href="#">Mount Kailash Tour</a></li>
<li><a href="#">Kathmandu Lhasa Tour</a></li>
<li><a href="#">Tibet Overland Tour</a></li>
</ul>
</li>
<li><a href="#">Bhutan</a>
<ul>
<li><a href="#">Duk Path Trek</a></li>
<li><a href="#">Chomolari Trek</a></li>
<li><a href="#">Bhutan Tour</a></li>
</ul>
</li>
<li><a href="#">India</a>
<ul>
<li><a href="#">Taj Mahal Tour</a></li>
<li><a href="#">Darjeeling Sikkim Tour</a></li>
<li><a href="#">Ladakh tour</a></li>
<li><a href="#">India Gate Tour</a></li>
</ul>
</li>
<li><a href="#">Private Day Tours</a>
<ul>
<li><a href="#">Go For Nepal One Day Private Tour</a></li>
<li><a href="#">Kathmandu Heritage One Day Tour</a></li>
<li><a href="#">Nagarjun One Day Hiking</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
</ul>
Step 4: Now Save it.
The above code can be also used into blogger. You can also use this code to create mega menu for your blogger. So use this code into your blogger. Please contact us if any problems occur during this process.
Post a Comment