Tricks Tips and Tutorials For Blog: In Easy way Add a Roseic Classical Mega Drop Down Menu

In Easy way Add a Roseic Classical Mega Drop Down Menu

Drop down menus are very important in blogging and these kinds of stuff is also considerable for the visitors because visitor when firstly see your menus and other widget and if he like that then she/he wish to visit again itself and content also very important fro the every blogger.

This drop down menu is very different be'coz this not multilevel but this a mega drop down menu which is under the series of R means Roseic.

Add Roseic Mega Menu in Blogger

Login to Blogger > Dashborad

Click on Drop Down Menu and select Layout

Add a HTML/JavaScript Gadget

Paste below code in it.

<style>
/--- Roseic Drop Down Menu By www.widgetgenerators.com ---/
ul.oe_menu {
font-family:Arial, Helvetica, sans-serif;
border:1px solid #fff;
margin:0;
padding:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogWKTq3DKmD-0yrHJpOoiewoIvvPiigsTWve9boOLl3rHSUpZsKBD0XzEbiaJ8ggPTtM4XYFXyPK_Ld1sD-Jy7Wx7Bv31sL1AGzxM8Tk6HdBP2N3jag1kSKtq-adfoELCxKwjsiXMG4y-/s1600/bg.png) repeat-x;
}
}
.clear {
clear: both;
}
a {
color: #3299bb;
text-decoration: none;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.oe_menu {
list-style:none;
width:960px;
float:left;
clear:both;
margin:0;
padding:0;
position:relative;
top:-5px;
}
ul.oe_menu li {
float:left;
position:relative;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4zBy__M24dZwXmVbIYJUCYG3EzeAN_-GLoOnlo93b14AKudcok8umjNecfwr1zBSiYxthhBMLYToHNvtZrLYiS-XM1LY5XZZw_IZzSH9A-cXXEaQ4g6oqFIwNE-SoPlrfapw0byuqSKf/s1600/rosiec-tab.png) no-repeat 100% 100%;
margin:0;
padding:0;
}
ul.oe_menu li a .home {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1MaXIIt9uksPEQuMwyVLp0t2xIfStmX8vymZZqVXo2IkoR0gAZZIYWBtWI7iMYdWVknaBx6mmkaNCPN4TJYLjVphPYy0-YLPUxD_XeLWqco3XtnuRJKsSLoeN3iW7b0iKDylVccTzOvG/s1600/home-icon.png) scroll 20px 0px no-repeat;
width:59px;
margin:0;
padding:10px 0;
*padding:0;
display:block;
float:left;
position:relative;
}
ul.oe_menu li a .home:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR1MaXIIt9uksPEQuMwyVLp0t2xIfStmX8vymZZqVXo2IkoR0gAZZIYWBtWI7iMYdWVknaBx6mmkaNCPN4TJYLjVphPYy0-YLPUxD_XeLWqco3XtnuRJKsSLoeN3iW7b0iKDylVccTzOvG/s1600/home-icon.png) scroll 20px -44px no-repeat;
padding:10px 0;
*padding:0;
display:block;
float:left;
position:relative;
}
ul.oe_menu li .no-p-m {
margin:0;
padding:0;
height:41px;
}
ul.oe_menu li .all_categries_link {
color:#006699;
}
ul.oe_menu li .menu {
display:block;
color:#666666;
text-decoration:none;
font-size:15px;
padding:13px 17px;
margin:1px;
display:block;
float:left;
}
ul.oe_menu li .menu:hover, ul.oe_menu li.selected .menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZ5EQ59ZQmGN4N7Nmzv7GpcbKFVSMIaktc9OM5P5n8eK3gBekdC4agkmGNoE4cXIyjMoRjtJ55IgW53Pk4FJh58z8VxGhrybu9IK6Mb1A4_auoWGznIb6yM8M6_HUhA-DdRN14QiXRuSE/s1600/bg-tabs.png) bottom repeat-x;
color:#fff;
background-position:-2px 0px;
}
ul.oe_menu div {
position:absolute;
border:1px solid #1b63ab;
top:46px;
*top:44px;
left:1px;
background:#fff;
display:none;
zoom:1;
}
ul.oe_menu div ul.oe_full {
width:100%;
}
li.oe_heading {
color:#333;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
clear:both;
}
span.reference {
position:fixed;
left:0px;
bottom:0px;
width:100%;
font-size:10px;
line-height:20px;
text-align:right;
height:20px;
}
span.reference a {
color:#aaa;
text-transform:uppercase;
text-decoration:none;
margin-right:10px;
}
span.reference a:hover {
color:#ddd;
}
.bg_img img {
width:100%;
position:fixed;
top:0px;
left:0px;
}
ul.oe_menu li div.one-clm {
width:172px;
padding:0 15px 0 0;
}
ul.oe_menu li div.two-clm {
width:370px;
padding:0 15px 0 0;
position:absolute;
}
ul.oe_menu li div.three-clm {
width:555px;
float:left;
padding:0 15px 0 0;
}
ul.oe_menu li div dl {
width:170px;
float:left;
font:Arial, Helvetica, sans-serif;
margin:15px 0 15px 15px;
*margin:0px 0 15px 10px;
*position:relative;
*top:10px;
}
ul.oe_menu li div dl dt {
display:block;
width:92%;
padding:0 0 5px 0;
margin:0 0 5px 0;
border-bottom:1px dashed #f1f1f1;
float:left;
font:bold 14px Arial, Helvetica, sans-serif;
color:#999;
}
ul.oe_menu li div dl dd a {
background:none;
color:#999;
font:12px Arial, Helvetica, sans-serif;
padding:3px 0;
width:92%;
display:block;
}
ul.oe_menu li div dl dd a:hover {
text-decoration:none;
color:#003399;
}
/--- Roseic Drop Down Menu By URL ---/
</style>


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
               var $oe_menu       = $('#oe_menu');
               var $oe_menu_items   = $oe_menu.children('li');
               var $oe_overlay       = $('#oe_overlay');

                $oe_menu_items.bind('mouseenter',function(){
                   var $this = $(this);
                   $this.addClass('slided selected');
                   $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
                       $oe_menu_items.not('.slided').children('div').hide();
                       $this.removeClass('slided');
                   });
               }).bind('mouseleave',function(){
                   var $this = $(this);
                   $this.removeClass('selected').children('div').css('z-index','1');
               });

               $oe_menu.bind('mouseenter',function(){
                   var $this = $(this);
                   $oe_overlay.stop(true,true).fadeTo(200, 0.6);
                   $this.addClass('hovered');
               }).bind('mouseleave',function(){
                   var $this = $(this);
                   $this.removeClass('hovered');
                   $oe_overlay.stop(true,true).fadeTo(200, 0);
                   $oe_menu_items.children('div').hide();
               })
            });
        </script>
    




           <ul id="oe_menu" class="oe_menu" style="position:relative;">
               <li><a class="menu" href="http://URL/"><span class="home"></span></a>

               </li>
               <li><a class="menu" href="#">Blogging</a>
                   <div class="two-clm">
                       <dl>
                           <dt>Category</dt>
                           <dd><a href="#">Widgets</a></dd>
                           <dd><a href="#">Tutorials</a></dd>
                           <dd><a href="#">JavaScript</a></dd>
                           <dd><a href="#">Generators</a></dd>
                           <dd><a href="#">CSS Widgets</a></dd>
                       </dl>
                       <dl>
                           <dt>Brands</dt>
                           <dd><a href="#">Blogger</a></dd>
                           <dd><a href="#">Wordpress</a></dd>
                           <dd><a href="#">Tumbler</a></dd>
                           <dd><a href="#">Joomla</a></dd>
                           <dd><a href="#">Square Space</a></dd>
                           <dd><a href="#">LiveJournal</a></dd>
                        </dl>

                   </div>
               </li>
                                           <li><a class="menu" href="#">Money Online</a>
                               <div class="one-clm">
                                   <dl>
                                       <dt>Brands</dt>
                                       <dd><a href="#">Adsense</a></dd>
                                       <dd><a href="#">Citika</a></dd>
                                       <dd><a href="#">Ad Brid</a></dd>
                                       <dd><a href="#">Yahoo</a></dd>
                                       <dd><a href="#">Bing</a></dd>

                                       <dd><a href="#">...View More</a></dd>
                                   </dl>

                               </div>
                           </li>
                               <li><a class="menu" href="#">Social Media</a>
                                  <div class="three-clm">
                        <dl>
                           <dt>Online Media</dt>
                           <dd><a href="#">eNews</a></dd>
                           <dd><a href="#">ePaper</a></dd>
                           <dd><a href="#">eBusiness</a></dd>
                           <dd><a href="#">eGold</a></dd>
                           <dd><a href="#">eSilver</a></dd>
                           <dd><a href="#">eSports</a></dd>
                            <dd><a href="#">View More...</a></dd>
                       </dl>
                        <dl>
                           <dt>Multi Media </dt>
                           <dd><a href="#">TV News</a></dd>
                           <dd><a href="#">News Paper</a></dd>
                           <dd><a href="#">TV Anchor</a></dd>

                             <dd><a href="#">View More...</a></dd>
                       </dl>

                       <dl>
                           <dt>Brands</dt>
                           <dd><a href="#">Aaj Tak </a></dd>
                           <dd><a href="#">News 24 </a></dd>
                           <dd><a href="#">Star News </a></dd>
                           <dd><a href="#">ABP News </a></dd>
                           <dd><a href="#">P7 News</a></dd>
                           <dd><a href="#">Aawaj</a></dd>


                             <dd><a href="#">...View More</a></dd>
                       </dl>

                   </div>
           </li>
                <li><a class="menu" href="#">Social Sites</a>
                   <div class="three-clm">
                       <dl>
                           <dt>Facebook</dt>
                           <dd><a href="#">IT</a></dd>
                           <dd><a href="#">Accounts</a></dd>
                           <dd><a href="#">Management</a></dd>
                           <dd><a href="#">Marketing</a></dd>
                           <dd><a href="#">Softwares</a></dd>
                           <dd><a href="#">Hardware</a></dd>
                            <dd><a href="#">View More...</a></dd>
                       </dl>
                       <dl>
                           <dt>Google</dt>
                           <dd><a href="#">Web</a></dd>
                           <dd><a href="#">Images</a></dd>
                           <dd><a href="#">Translate</a></dd>
                           <dd><a href="#">Google Plus</a></dd>
                            <dd><a href="#">View More...</a></dd>
                       </dl>
                       <dl>
                           <dt>Twitter</dt>
                           <dd><a href="#">Follow</a></dd>
                           <dd><a href="#">Tweet</a></dd>
                           <dd><a href="#">Share</a></dd>
                           <dd><a href="#">Retweet</a></dd>
                           <dd><a href="#">Unfollow</a></dd>
                            <dd><a href="#">View More...</a></dd>
                       </dl>

                   </div>
           </li>
               <li><a class="menu" href="#">CSS</a>
                   <div class="one-clm">
                       <dl>
                           <dt>CSS Widget</dt>
                           <dd><a href="#">Codes</a></dd>
                           <dd><a href="#">Classes</a></dd>
                            <dd><a href="#">ID</a></dd>
                            <dd><a href="#">View More...</a></dd>
                       </dl>

                   </div>
           </li>
                <li><a class="menu" href="#">Books</a>
                   <div class="one-clm">
                       <dl>
                           <dt>eBooks</dt>
                           <dd><a href="#">Adsense Secrets 5 </a></dd>
                           <dd><a href="#">Let Us C</a></dd>
                            <dd><a href="#">Fundamentals</a></dd>
                            <dd><a href="#">JavaScript</a></dd>
                           <dd><a href="#">Core Java</a></dd>
                           <dd><a href="#">What is Blogging</a></dd>
                            <dd><a href="#">View More...</a></dd>
                       </dl>

                   </div>
           </li>
               <li><a class="menu" href="#">Tools</a>
                   <div class="one-clm">
                       <dl>
                           <dt class="oe_heading">Blogging Tools</dt>
                           <dd><a href="#">HTML Editor</a></dd>
                           <dd><a href="#">HTML Encoder</a></dd>
                           <dd><a href="#">View More...</a></dd>
                       </dl>

                   </div>
           </li>



               

               <li><a class="menu" href="#">Help</a>
                   <div class="one-clm">
                       <dl>
                           <dt class="oe_heading">Offers</dt>
                           <dd><a href="#">Combo</a></dd>
                           <dd><a href="#">View More...</a></dd>
                       </dl>

                   </div>
               </li>

</ul>

Finally Save Your Widget and You are done.

Make Changes....!

Replace it # with your link.
Replace this Orange color with your main text.
Replace this Red color with your sub heading text (as you can see in Live Demo)
Replace this Blue color with your drop down sub parts (as you can see in Live Demo)

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)