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>
<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.