Sunday, December 9, 2012

Premium Opera CSS3 Multi Level Drop Down Menu for Blogger



Opera CSS3 Menu may be a horizontal navigation galvanized by real Opera website menu. It is terribly simple to put in this menu as a result of we do not use image thus you ought not to host image file. This menu is created with facilitate of Css3 by that it do not take ton of your time to load.






Some Common Characteristics:


    • Simple and minimal design
    • Pure CSS3
    • High details
    • No images
    • No javascript
    • Horizontal menu
    • 2 styles (light and dark)
    • 10 colors
    • Works with IE8 +
 


Installing To Blogger

As I already mentioned you that it is very easy and simple to install this Css3 Drop Down menu to blogger since I hosted all CSS3 on the outside, follow below steps to add this menu to blogger-

  • Go To Blogger Dashboard
  • Click On Layout tab.
  • Now Click on Add Gadget >> Html/JavaScript
  • Paste Below code there




 <link href="https://www.opendrive.com/files/MV80OTcyMDUxX00ySmE0/cssmenu-lordhtml.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
<ul>
   <li><a href='
#'><span>Home</span></a></li>
   <li class='has-sub '><a href='
#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='
#'><span>Product 1</span></a>
            <ul>
               <li><a href='
#'><span>Sub Product</span></a></li>
               <li><a href='
#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='
#'><span>Product 2</span></a>
            <ul>
               <li><a href='
#'><span>Sub Product</span></a></li>
               <li><a href='
#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='
#'><span>About</span></a></li>
   <li><a href='
#'><span>Contact</span></a></li>
</ul>
</div>



Now you need to customize this code.Follow below points it can help you to customize this widget according to your style.

  • Replace all with respected link.
  • Orange color highlighted text are main menu text Pink color highlighted text are first drop down menu and Purplecolor highlighted text is second drop down menu.
  • https://www.opendrive.com/files/MV80OTcyMDUxX00ySmE0/cssmenu-lordhtml.css This is code which I hosted on open drive you can download it and host by your own.













ShareThis