Monday 29 October 2012

CSS3 Menu Bar With Mega Drop Down

5:17 pm  , ,  No comments
Hi!
In This Tutorial I am going to explain  how  to add menu-bar with large drop down. Actually, Drop down is really important when we need to link sub categories.So, In this post i am already added largest drop down links. Person who have a lot of sub categories in your blog or website, they can use this menu bar.
stylish+menu+bar+with+mega+drop+down+list

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.dropdown li a {
 display: block;
 padding: 3px 8px;
}
ul.dropdown li {
 padding: 0;
}

ul.dropdown li.dir {
 padding: 7px 20px 7px 12px;
}
ul.dropdown ul li.dir {
 padding-right: 15px;
}
ul.dropdown ul a {
 padding: 4px 5px 4px 12px;
}
ul.dropdown ul a:hover {
 padding: 3px 5px 3px 11px;
 border: solid 1px #ddd;
 background-color: #eee;
 font-weight: bold;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}
ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
ul.dropdown ul li {
 float: none;
}
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}
ul.dropdown li:hover > ul {
 visibility: visible;
}
ul.dropdown {
 font: bold 12px Arial, Helvetica, sans-serif;
}
    ul.dropdown li {
     padding: 3px 12px;
     background-color: #000;
     color: #fff;
    }

    ul.dropdown li.hover,
    ul.dropdown li:hover {
     background-color: #222;
    }
    ul.dropdown a:link,
    ul.dropdown a:visited { color: #fff; text-decoration: none; }
    ul.dropdown a:hover { color: #fff; text-decoration: underline; }
    ul.dropdown a:active { color: #fff; }

    /* -- level mark -- */

    ul.dropdown ul {
     margin-left: -6px;
     width: 170px;
     padding-bottom: 9px;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt8RjT5Im4MwnXdfjur5I1osLwTXcl3RZDG6ilzV7AasTO8nWWkrwJUBMJYXyKWXPFVkp0FG_fWdrm1GPqTv2mNT09dB2sE98Rr3lUq9N4pz9Xnv0HOpob5lHHmfy_yKjhuffMN52VLtA/s1600/dropdown_pane.png) 0 100% no-repeat;
     color: #000;
     font-size: 11px;
     font-weight: normal;
    }

        ul.dropdown ul li {
         background-color: transparent;
         color: #000;
        }

        ul.dropdown ul li.hover,
        ul.dropdown ul li:hover {
         background-color: transparent;
        }

        ul.dropdown ul li.empty {
         padding: 12px 12px 7px !important;
         font-weight: bold;
        }

        ul.dropdown ul a:link,
        ul.dropdown ul a:visited { color: #000; }
        ul.dropdown ul a:hover { color: #000; text-decoration: none; }
        ul.dropdown ul a:active { color: #000; }

        /* -- level mark -- */

        ul.dropdown ul ul {
         display: none;
        }
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
 padding-right: 12px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

7. Go to blogger and click Layout 

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul class="dropdown dropdown-horizontal" id="nav">
<li><a href="Your Link URL">Home</a></li>
<li><a class="dir" href="Your Link URL">Solutions</a>
        <ul>
<li class="empty">Industries</li>
<li><a href="Your Link URL">Broadcast and media</a></li>
<li><a href="Your Link URL">Education</a></li>
<li><a href="Your Link URL">Financial services</a></li>
<li><a href="Your Link URL">Government</a></li>
<li><a href="Your Link URL">Life sciences</a></li>
<li><a href="Your Link URL">Manufacturing</a></li>
<li class="empty">Solutions</li>
<li><a href="Your Link URL">Consumer photo</a></li>
<li><a href="Your Link URL">Mobile</a></li>
<li><a href="Your Link URL">Print publishing</a></li>
<li><a href="Your Link URL">Pro photography</a></li>
<li><a href="Your Link URL">Professional video</a></li>
<li><a href="Your Link URL">Applications</a></li>
<li><a href="Your Link URL">Communication</a></li>
<li><a href="Your Link URL">Learning</a></li>
<li><a href="Your Link URL">Web conferencing</a></li>
<li><a href="Your Link URL">Web publishing</a></li>
<li><a href="Your Link URL">All solutions ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Products</a>
        <ul>
<li><a href="Your Link URL">Acrobat Connect Pro</a></li>
<li><a href="Your Link URL">Acrobat family</a></li>
<li><a href="Your Link URL">Adobe AIR</a></li>
<li><a href="Your Link URL">After Effects</a></li>
<li><a href="Your Link URL">ColdFusion</a></li>
<li><a href="Your Link URL">Creative Suite family</a></li>
<li><a href="Your Link URL">Dreamweaver</a></li>
<li><a href="Your Link URL">Flash</a></li>
<li><a href="Your Link URL">Flex</a></li>
<li><a href="Your Link URL">Illustrator</a></li>
<li><a href="Your Link URL">InDesign</a></li>
<li><a href="Your Link URL">Enterprise Suite</a></li>
<li><a href="Your Link URL">Mobile products</a></li>
<li><a href="Your Link URL">Photoshop family</a></li>
<li><a href="Your Link URL">Adobe Premiere Pro</a></li>
<li><a href="Your Link URL">Scene7 OnDemand</a></li>
<li><a href="Your Link URL">All products ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Support</a>
        <ul>
<li><a href="Your Link URL">Support home</a></li>
<li><a href="Your Link URL">Customer Service</a></li>
<li><a href="Your Link URL">Knowledgebase</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Training</a></li>
<li><a href="Your Link URL">Support programs</a></li>
<li><a href="Your Link URL">Forums</a></li>
<li><a href="Your Link URL">Documentation</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Communities</a>
        <ul>
<li class="empty">By user</li>
<li><a href="Your Link URL">Designers</a></li>
<li><a href="Your Link URL">Developers</a></li>
<li><a href="Your Link URL">Educators</a></li>
<li><a href="Your Link URL">Partners</a></li>
<li class="empty">By resource</li>
<li><a href="Your Link URL">Adobe Labs</a></li>
<li><a href="Your Link URL">Adobe TV</a></li>
<li><a href="Your Link URL">Forums</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li><a href="Your Link URL">Blogs</a></li>
<li><a href="Your Link URL">Experience Design</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Company</a>
        <ul>
<li><a href="Your Link URL">About Adobe</a></li>
<li><a href="Your Link URL">Press</a></li>
<li><a href="Your Link URL">Investor Relations</a></li>
<li><a href="Your Link URL">Corporate Affairs</a></li>
<li><a href="Your Link URL">Careers</a></li>
<li><a href="Your Link URL">Showcase</a></li>
<li><a href="Your Link URL">Events</a></li>
<li><a href="Your Link URL">Contact Adobe</a></li>
<li><a href="Your Link URL">Become an affiliate</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Downloads</a>
        <ul>
<li><a href="Your Link URL">Downloads home</a></li>
<li><a href="Your Link URL">Trial downloads</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li class="empty">Readers and Players</li>
<li><a href="Your Link URL">Get Adobe Reader</a></li>
<li><a href="Your Link URL">Get Flash Player</a></li>
<li><a href="Your Link URL">Get Adobe AIR</a></li>
<li><a href="Your Link URL">Get Shockwave Player</a></li>
<li><a href="Your Link URL">Get Media Player</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Store</a>
        <ul>
<li><a href="Your Link URL">Store home</a></li>
<li><a href="Your Link URL">Software</a></li>
<li><a href="Your Link URL">Fonts</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Support programs</a></li>
<li><a href="Your Link URL">Your account</a></li>
<li><a href="Your Link URL">Volume licensing</a></li>
<li><a href="Your Link URL">Store offers</a></li>
<li><a href="Your Link URL">Other ways to buy ›</a></li>
</ul>
</li>
</ul>
Replace Your Link URL with your URLs

10. Now save your HTML/Javascript'.
    You are done...

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

 

Get Latest Updates: Subscribe Now | Like Us on Facebook

X