CSS 3 Mega Menu For Blogger

CSS stands for Cascading Sheet Style. CSS gives the style to the HTML tags. In earlier phase of web, there had not been developed the CSS 3. Now CSS 3 has reduced the long and vague and more difficult codes of javascript and jquery. CSS 3 is the latest version of CSS.

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.
CSS 3 mega menu

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

5 Comments

  1. nice share dear its good job thank alot for this share

    ReplyDelete
  2. Nice share dear .
    Its good job thank a lot for this share.
    It is nice see the post about css . this is helpful for knowing css
    cheap essay writing

    ReplyDelete
  3. nice share i have been using all your instructions for my blog
    bodysaviourpro.blogspot.com

    ReplyDelete

Any comment will be appreciated, comment will be published according to our comment policy