Skip to main content

Transparent Black Drop Down Navigation Menu For Blog

Transparent Black Drop Down Navigation Menu For Blog


Transparent Black Drop Down Navigation Menu For Blog
Navigation menu or simply say menu bar gives facility to readers to navigate different type of pages instantly. Blogger provides 20 stand alone pages but hardly 4-5 are created by readers due to less space available in menu bar. Today we are sharing transparent a black menu bar with drop down option through which you can linked maximum number of pages of your blog. Only CSS3 properties are used that's why it loads instantly. This menu bar can be easily add up to your blog by adding whole code once. Exited! Just follow the steps below to add this menu bar.

How To Add Navigation Menu With Drop Down

  1. Login to blogger dashboard and then choose Template.
  2. Download full template before making any changes in it.
Transparent Black Drop Down Navigation Menu For Blog
  1. Click Edit HTML and check Expand Widget Templates.
  2. Now copy the whole code given below.
<style>

/* code on www.allbloggingtricks.com */ 

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJU15a1Os50u65ouiHmEL9poo2-3NhmEbIJ477SkwpvtrLPRY2-7dqnK1psuDGJ2KcSx4RAJm0yzaR6D7FOK5_ZjNpwh07qODoTciMLWOq_nGaybomjmMZRbtl-9Ch5rBKkEU2CabHTw/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.bloggertrix.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://www.bloggertrix.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>
  1. Now you have option about the placement of this menu bar if you want to add this menu bar at top most position of blog then paste the code just above the #content-wrapper.
  2. If you want to add this menu bar below the header part then paste the code just below the #header-wrapper.
  3. If you don't find #content-wrapper or #header-wrapper in template then you have another option, just go to
  4. Layout and click Add a Gadget, from the list of gadgets choose HTML / JavaScript and paste the whole code inside it.
    Transparent Black Drop Down Navigation Menu For Blog


    You can easily increase or decrease the menu item if you don't know how to add or remove item from menu bar then you can take a quick review about the working of ul tag or li tag from W3Schools.com, it hardly take 2-5 minute.

    While providing linking url within anchor <a> tag, the url should be in form of http://allbloggingtricks.com not in www.allbloggingtricks.com.

    If any reader find difficulty in adding navigation menu bar to blogger then he/she can directly contact me by dropping valuable comment below.
    Labels:

    Comments

    Post a Comment

    Popular posts from this blog

    How To Enable Or Disable Comments In Blogger Blogs

    How To Enable Or Disable Comments In Blogger Blogs Commenting option on a blog provide a way to interact readers and author to other people to share their experience. It briefly describe the popularity of a blog,  if a particular blog daily receives more  comment  than other blogs then obviously it is more popular then other blogs that are receiving less comment. Blogger team working hard to improve the appearance of overall comments that's why it previously launched threaded comments, which looks great and had received positive feedback from the readers. If you want to modify threaded we have separate article for this. How to modify threaded comments .  Basically there are two type of pages in Blogger where you have need to enable/disable comments that is post page (index page) or  static page .So lets play with comment option on these pages. How To Hide Comment From Every Page Blogger provide an easy way to disable comment box from every page...
    Post a Comment
    Read more

    How To Make Your Blogger Blog To Dofollow With CommentLuv

    How To Make Your Blogger Blog To Dofollow With CommentLuv Dofollow commenting system is a powerful technique to increase number of daily comments on a blog. Number of comments on a blog tells the popularity of that blog if your blog is new and have less traffic then making your comment system to  dofollow  would give you instant traffic on your blog. Comment luv  is a popular plugin that WordPress blogs often used to make their comment system to dofollow. Previously, it is very easy to make blogger blog to dofollow but when blogger launched threaded commenting system, which uses strong JavaScript, it become quite difficult. But here we are sharing a tutorial through which you can easily make your blogger blog to dofollow. You can see demo from  here . How to make Blogger Blog DoFollow Go to  intensedebate.com  and create an account in it. Login to you account and click  Extras  from top menu and then choose  install IntenseDe...
    Post a Comment
    Read more

    How To Solve HTML Improvement Error In Google Webmaster

    How To Solve HTML Improvement Error In Google Webmaster Webmaster, a very useful service offered by Google team to analyse or check the performance of the web site or blog by their owners. Bloggers generally use this service to know about their blog reputation in the eyes of the search engine that's why it is very important to learn the basic function of webmaster. You can increase your blog listing in search engines by optimizing your blog performance, HTML improvement option is one of them which checks the duplicate content on a blog. Here we will learn to optimize blog with webmaster using HTML improvement function. How To Find Error In HTML Improvement Option If you are a newbie and don't know this option yet then you have to understand which type of error it shows. It discovered the duplicate meta description tag, title tag or short description tag on your blog, your blog can't participate in Google  Adsense  until you solve all issues discovered by this. Fo...
    Post a Comment
    Read more