Tuesday, October 30, 2012

Attractive CSS3 Mega Drop Down Menu List

In this tutorial,im gonna explain how to addCSS3 Mega Drop  Down  Menu list to  yourblogger.  Actually  you  can link  many morelink to this  menu bar.  check demo, you will get what i  mean. Im using CSS  and  HTML for this tutorial. Few days also i posted about similar menu bar. But this is modified version of  it. you  can  get  old  menu bar  form here.
Stylish CSS3 Menu Bar With Mega Drop
Down List

Attractive+CSS3+Mega+Drop+Down+Menu+Bar

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

ul.bloggertrix {
    position: relative;
}

ul.bloggertrix li {
list-style:none;
    font-weight: bold;
    float: left;
    zoom: 1;
    background: #0852F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xHZ1LY3oUf_xlZ03_X2e6ccu1k-8Q1BklAn6kaxP-jdlirbLSafvm8kYQJY1206nK5qRIENZoVivRR01GFXDnrJc5oKqlgWqN5GAma1aDATxL4dtkxM7TuLxSPGB-SpvlLEqExB_Ur4/s1600/overlay2.png) repeat-x top left;
    border-radius: 5px;
    border-radius: 5px;   
    margin:1px;
    text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

ul.bloggertrix a:hover {
    color: #000;
}

ul.bloggertrix a:active {
    color: #ffa500;
}

ul.bloggertrix li a {
    display: block;
    padding: 4px 8px;
    color: #fff;
    text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

ul.bloggertrix li:last-child a {
    border-right: none;
}
 /* Doesn't work in IE */
ul.bloggertrix li.hover, ul.bloggertrix li:hover {
    background: #0070C0;
    color: black;
    position: relative;
    color:#fff;
}

ul.bloggertrix li.hover a {
    color: #fff;
    font-weight:bold;
}

/*
 LEVEL TWO
 */
ul.bloggertrix ul {
    width: 220px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}

ul.bloggertrix ul li {
    font-weight: normal;
    background: #25C0F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xHZ1LY3oUf_xlZ03_X2e6ccu1k-8Q1BklAn6kaxP-jdlirbLSafvm8kYQJY1206nK5qRIENZoVivRR01GFXDnrJc5oKqlgWqN5GAma1aDATxL4dtkxM7TuLxSPGB-SpvlLEqExB_Ur4/s1600/overlay2.png) repeat-x top left;
    color: #000;
    float: none;
}

/* IE 6 & 7 Needs Inline Block */
ul.bloggertrix ul li a {
    border-right: none;
    width: 100%;
    display: inline-block;
}

/*
 LEVEL THREE
 */
ul.bloggertrix ul ul {
    left:180px;
    top: 0;
}

ul.bloggertrix li:hover > ul {
    visibility: visible;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul class="bloggertrix">
         <li><a href="http://www.bloggertrix.com/">For Facilities</a>
          <ul class="sub_menu">
            <li><a href="Your Link URL">Artificial Turf</a></li>
            <li>
            <a href="Your Link URL">Batting Cages</a>
            <ul>
             <li><a href="Your Link URL">Indoor</a></li>
             <li><a href="Your Link URL">Outdoor</a></li>
            </ul>
            </li>
            <li><a href="Your Link URL">Benches &amp; Bleachers</a></li>
            <li><a href="Your Link URL">Communication Devices</a></li>
            <li><a href="Your Link URL">Dugouts</a></li>
            <li><a href="Your Link URL">Fencing &amp; Windscreen</a></li>
            <li><a href="Your Link URL">Floor Protectors</a></li>
            <li><a href="Your Link URL">Foul Poles</a></li>
            <li><a href="Your Link URL">Netting</a></li>
            <li><a href="Your Link URL">Outdoor Furniture</a></li>
            <li><a href="Your Link URL">Outdoor Signs</a></li>
            <li><a href="Your Link URL">Padding</a></li>
            <li><a href="Your Link URL">Scoreboards</a></li>
            <li><a href="Your Link URL">Shade Structures</a></li>
            <li><a href="http://www.bloggertrix.com/"> - VIEW ALL - </a></li>
          </ul>
         </li>
         <li><a href="Your Link URL">Field Maintenance</a>
          <ul class="sub_menu">
           <li><a href="Your Link URL">All-in-One Team Cart</a></li>
           <li><a href="Your Link URL">Air &amp; Electrical Reels</a></li>
            <li><a href="Your Link URL">Field Drags</a></li>
            <li>
            <a href="Your Link URL">Field Marking Equipment</a>
            <ul>
             <li><a href="Your Link URL">Batter's Box Templates</a></li>
             <li><a href="Your Link URL">Dryline Markers</a></li>
             <li><a href="Your Link URL">Field Paint</a></li>
             <li><a href="Your Link URL">Field Sprayers</a></li>
             <li><a href="Your Link URL">Stencils</a></li>
            </ul>
            </li>
            <li>
            <a href="Your Link URL">Field Tarps</a>
            <ul>
             <li><a href="Your Link URL">Area Tarps</a></li>
             <li><a href="Your Link URL">Growth Covers / Protectors</a></li>
             <li><a href="Your Link URL">Infield Tarps</a></li>
             <li><a href="Your Link URL">Tarp Accessories</a></li>
            </ul>
            </li>
            <li><a href="Your Link URL">Hand Tools</a></li>
            <li>
            <a href="Your Link URL">Irrigation, Hoses, Nozzles</a>
            <ul>
             <li><a href="Your Link URL">Hoses &amp; Hose Reels</a></li>
             <li><a href="Your Link URL">Irrigation</a></li>
             <li><a href="Your Link URL">Nozzles</a></li>
            </ul>
            </li>
            <li><a href="Your Link URL">Layout Tools</a></li>
            <li><a href="Your Link URL">Moisture Removal</a></li>
            <li><a href="Your Link URL">Mound Fortification</a></li>
            <li><a href="Your Link URL">Mowers &amp; Stripers</a></li>
            <li><a href="Your Link URL">Soil Management</a></li>
            <li><a href="Your Link URL">Soil Amendments</a></li>
            <li><a href="Your Link URL">Spreaders &amp; Sweepers</a></li>
            <li><a href="http://www.bloggertrix.com/"> - VIEW ALL - </a></li>
          </ul>
         </li>
         <li><a href="Your Link URL">Game-Practice Equipment</a>
          <ul class="sub_menu">
            <li>
            <a href="Your Link URL">Baseball - Softball</a>
            <ul>
             <li><a href="Your Link URL">Base Accessories</a></li>
             <li><a href="Your Link URL">Bases &amp; Home Plates</a></li>
             <li><a href="Your Link URL">Game Accessories</a></li>
             <li><a href="Your Link URL">Pitching Rubbers</a></li>
            </ul>
            </li>
            <li>
            <a href="Your Link URL">Batting Practice Equipment</a>
            <ul>
             <li><a href="Your Link URL">Backstops</a></li>
             <li><a href="Your Link URL">Infield Screens</a></li>
             <li><a href="Your Link URL">Jugs Pitching Machines</a></li>
             <li><a href="Your Link URL">Turf Mats</a></li>
             <li><a href="Your Link URL">Turf Protectors</a></li>
             <li><a href="Your Link URL">Replacement Accessories</a></li>
            </ul>
            </li>
            <li>
            <a href="Your Link URL">Batting Cages</a>
            <ul>
             <li><a href="Your Link URL">Indoor</a></li>
             <li><a href="Your Link URL">Outdoor</a></li>
            </ul>
            </li>
            <li>
            <a href="Your Link URL">Portable Mounds</a>
            <ul>
             <li><a href="Your Link URL">Batting Practice Mounds</a></li>
             <li><a href="Your Link URL">Game Mounds</a></li>
             <li><a href="Your Link URL">Practice Mounds</a></li>
            </ul>
            </li>
            <li>
            <a href="Your Link URL">Football</a>
            <ul>
             <li><a href="Your Link URL">First Down Markers</a></li>
             <li><a href="Your Link URL">Football Accessories</a></li>
             <li><a href="Your Link URL">Football Goalposts</a></li>
            </ul>
            </li>
            <li>
            <a href="Your Link URL">Soccer</a>
            <ul>
             <li><a href="Your Link URL">Soccer Goals</a></li>
             <li><a href="Your Link URL">Soccer Accessories</a></li>
            </ul>
            </li>
            <li><a href="http://www.bloggertrix.com/"> - VIEW ALL - </a></li>
          </ul>
         </li>
         <li><a href="Your Link URL">Training &amp; Conditioning</a>
          <ul class="sub_menu">
            <li><a href="Your Link URL">Ladders &amp; Sticks</a></li>
            <li><a href="Your Link URL">Hurdles</a></li>
            <li><a href="Your Link URL">Training Accessories</a></li>
            <li><a href="Your Link URL">Smart-Cart Training System</a></li>
            <li><a href="Your Link URL">Smart-Hurdle Collection</a></li>
            <li><a href="Your Link URL"> - VIEW ALL - </a></li>
          </ul>
         </li>
         <li><a href="http://www.bloggertrix.com/">Add This</a>
          <ul class="sub_menu">
            <li><a href="Your Link URL">Field Design</a></li>
            <li><a href="Your Link URL">Turf Management</a></li>
            <li><a href="Your Link URL">Training</a></li>
            <li><a href="http://www.bloggertrix.com/"> - VIEW ALL - </a></li>
          </ul>
         </li>
        </ul>
Replace Your Link URL with your URLs

10. Now save your HTML/Javascript'.

    You are done...




Dont Miss Another Post Connect With Us

Get informed when we publish the new post.So, you have to subscribe below

3 comments:

  1. AnonymousJanuary 30, 2013 at 5:05 PM

    hello admin...ven i apply above code ......sub category r not showing........n for other html script also it show only main heading...plz email me

    anjana.rajanjana.35@gmail.com

    ReplyDelete
  2. AnonymousAugust 24, 2015 at 8:04 PM

    Interesting this Drop Down Menu List, but the menu bar is not in place, menu and sub menu all headings are showing with straight in one line, they are not in the drop down list. pls resolve this querry in my blog

    ReplyDelete