14 Dec 2013

Super Menu For Blogger 2013

Menu or navigation of a blog is part which will not be discharged. The menu may be a navigation to permit guests to go looking for articles by class are presented. There doesn't appear to run out of debate with this menu with a good vary of modifications to zoom increase magnificence a diary.

And this point i'll share a menu that I say is sort of easy as a result of it solely uses pure CSS code or CSS.

The horizontal menu has 2 sub menus creating it potential to accommodate several classes in it. as a result of this menu victimization pure CSS, then this can not be onerous loading diary. as was common i exploit a bright color background you'll see a demo at the link below.



Css Code For Menu:-

#menutopmbs ul, #menutopmbs li, #menutopmbs span, #menutopmbs a { margin: 0; padding: 0; position: relative; } #menutopmbs { height: 49px; background: #D5D5D5; border-bottom: 4px solid #59c5ff; width: auto; } #menutopmbs:after, #menutopmbs ul:after { content: ''; display: block; clear: both; } #menutopmbs a { background: #D5D5D5; color: #000; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; } #menutopmbs ul { list-style: none; } #menutopmbs > ul,#menutopmbs > ul > li { float: left; } #menutopmbs > ul > li > a { color: #000; font-size: 12px; } #menutopmbs > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #59c5ff; margin-left: -10px; } #menutopmbs > ul > li.active:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #59c5ff; margin-left: -10px; } #menutopmbs > ul > li.active > a,#menutopmbs > ul > li:hover > a { background: #ececec; } #menutopmbs .menu-sub { z-index: 1; } #menutopmbs .menu-sub:hover > ul { display: block; } #menutopmbs .menu-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; } #menutopmbs .menu-sub ul li { margin-bottom: 0px; } #menutopmbs .menu-sub ul li a { background: #59c5ff; border-bottom: 1px solid #8cd7ff; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; color: #ffffff; } #menutopmbs .menu-sub ul li:hover a { background: #26b3ff; } #menutopmbs .menu-sub .menu-sub:hover > ul { display: block; } #menutopmbs .menu-sub .menu-sub ul { display: none; position: absolute; left: 100%; top: 0; } #menutopmbs .menu-sub .menu-sub ul li a { background: #26b3ff; border-bottom: 1px solid #8cd7ff; } #menutopmbs .menu-sub .menu-sub ul li a:hover { background: #0daaff; }
HTML CODE FOR MENU 

<div id='menutopmbs'>
<ul>
   <li class='active'><a href='/' target='_blank'><span>Home</span></a></li>
   <li class='menu-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a>
     </li>
       <li class='menu-sub'><a href='#'><span>More Menu</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>More Menu 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Menu 1</span></a></li>
               <li class='last'><a href='#'><span>Sub Menu 2</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>More Menu 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>

Good Luck And Modify This Menu As YOu Like But DOn't Forget To Comment And Give Credits 

2 comments:

  1. can u plx tell me how can i add this menu ?

    ReplyDelete
    Replies
    1. Bro Just Add The CSS code Above The ]]> Tag And Then Add The HTML code Wherever U want To Show Your Menu

      Delete

Ads Inside Post