You are here

Easy Step To Create Dropdown Menu For Blogger

Dropdown-menu-for-blogger

How to create dropdown menu in html

Transparent black dropdown menu for blogger like this.

Navigation menu or simply say HTML dropdown menu bar gives a facility to readers to navigate the different types of pages instantly.

Blogger provides 20 stand-alone pages but hardly 4-5 are created by readers due to less space available in the menu bar.


Today we are sharing a transparent black menu bar with a drop-down option through which you can link the maximum number of pages of your blog.


The dropdown menu CSS 3 properties are used, that’s why it loads instantly.


This menu bar can easily add up to your blog by adding the whole code once.


Excited! Just follow the steps below to add this menu bar.

HOW TO MAKE A DROPDOWN NAVIGATION MENU IN HTML

HOW TO ADD DROPDOWN MENU IN HTML

1. Login to the blogger dashboard and then choose Template.
2. Download the full template before making any changes in it.
DROPDOWN-MENU-IN-HTML

3. Click Edit HTML and check Expand Widget Templates.
4. Now copy the whole code given below.

<style>

/* code on www.blogandtricks.in */ 

ul.abtmenubar li a {
 display: block;
 padding: 3px 8px;
}
ul.abtmenubar li {
 padding: 0;
}

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

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

 

    ul.abtmenubar ul {
     margin-left: -6px;
     width: 170px;
     padding-bottom: 9px;
     background: url(http://1.bp.blogspot.com/-OI0rZFWysbE/UOKiXKYGrzI/AAAAAAAABk4/hQqgRioQv4o/s1600/abtmenubar_pane.png) 0 100% no-repeat;
     color: #000;
     font-size: 11px;
     font-weight: normal;
    }

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

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

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

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

         

        ul.abtmenubar ul ul {
         display: none;
        }
 
ul.abtmenubar *.dir {
 padding-right: 12px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}
</style>

<ul class="abtmenubar abtmenubar-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">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">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" >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" >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://www.blogandtricks.in/">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://www.blogandtricks.in/">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>


5. Now you have an option about the placement of this menu bar.


6. You want to add this menu bar at the topmost position of the blog then paste the code just above the #content-wrapper.


7. If you want to add this menu bar below the header part then paste the code just below the #header-wrapper.


8. If you don’t find #content-wrapper or #header-wrapper in template then you have another option, just go to Layout and click Add a Gadget, from the list of gadgets choose HTML / JavaScript and paste the whole code inside it.

You can easily increase or decrease the menu item.

If you don’t know how to add or remove the item from the menu bar then you can take a quick review about the working of <ul> tag or <li> tag from W3Schools.com you can see drop down list CSS code dropdown menu CSS, it hardly takes 4-5 minute.

While providing a linking URL within anchor <a> tag, the URL should be in the form of https://blogandtricks.in not in www.blogandtricks.in.

If any reader finds difficulty in adding a navigation menu bar to a blogger then he/she can directly contact me by dropping valuable comments below. If css dropdown problem you can w3school.com.

Leave a Reply

Top