• Home
  • Hacking
  • Tech News
  • Tips & Tricks
  • Social Network
  • Windows
  • Android
  • Assorted

Tuesday, December 26, 2017

How To Add Drop Down Navigation Menu For Blogger



A navigation menu bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website.
The navigation menu bar is a highly coveted feature for a blogger blog, but to have one you would have to be quite familiar with changing your HTML code, and employ a few workarounds. Not familiar with the HTML and CSS code? Don’t worry, I bring a collection of drop down menu bar for you and I will also guide you how to add in your blogger blog.


Adding Navigation Menu Bar in Blogger Blog

  • Login your blogger account and go layout section and add a new gadget.
 

  • Select JavaScript/HTML 

  • And paste the CSS code here from below.

  • Replace the # with pages, posts or label links and anchor text with your own
  • Save the widget and drag below the header and click on save arrangement 

CSS Drop Down Navigation Menu With Code


--------*1*-------- 
<style>
.cssmenu,.cssmenu ul,.cssmenu li,.cssmenu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}
.cssmenu { 
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}
.cssmenu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
}
.cssmenu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.cssmenu li:first-child a { border-left: none; }
.cssmenu li:last-child a{ border-right: none; }

.cssmenu li:hover > a { color: #8fde62; }

.cssmenu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.cssmenu li:hover > ul { opacity: 1; }
.cssmenu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.cssmenu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.cssmenu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.cssmenu ul li:last-child a { border: none; }
.cssmenu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgWFuhomC28cHVI9Op-4HOPlA10pDm0hCvK0CuhZdrJinvLXWDUoLKgbdRXZopPGmgR9KkNqAnryjN6fMifPee6Fi4Zi3hjcvSbw_DchB_TG3UHcJCjM2_Jl6IfRwa7eaGsNFzX-Hx38x0/s1600/docs.png) no-repeat 6px center; }
.cssmenu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxb_4eIZw_hchXy1EfGdCDDE8IblmhifDpcz39AJwLbDRRVNQEBYDz6uQ3nLD8gretahXxdnUXocd_pg1K6P55qIlAERRf4un5YryoLBRVPoinf-il8pPg00PcwjhDVhxlluVGWWNYl7-a/s1600/bubble.png) no-repeat 6px center; }
.cssmenu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHOU2NPygtJHtaMLGv-19X-S5qOEoAA9dThKkiPK0dbTsCqoA-vBn0NUm0b8jiJlg3V-0BFBMarfy1wQIVZ1yA8G7Qudl6aprbksOuX8Hp2YLFgaeXZTau7Cc3vqSsI85peuNbKrSBGVw/s1600/arrow.png) no-repeat 6px center; }

</style>
<ul class="cssmenu">

 <li><a href="#">Home</a></li>
 <li><a href="#">Likes</a></li>
 <li><a href="#">Views</a>

  <ul>
   <li><a href="#" class="documents">Documents</a></li>
   <li><a href="#" class="messages">Messages</a></li>
   <li><a href="#" class="signout">Sign Out</a></li>
  </ul>

 </li>
 <li><a href="#">Uploads</a></li>
 <li><a href="#">Videos</a></li>
    <li><a href="#">About</a></li>
 <li><a href="#">Contact us</a></li>
</ul>
 
--------*2*--------
<style>
 .navmenu,.nav ul {
    list-style:none;
    margin:0;
    padding:0;
    height:50px;
}

.navmenu {
    position:relative;
}

.navmenu ul {
    height:0;
    left:0;
    overflow:hidden;
    position:absolute;
    top:46px;
}

.navmenu li {
    float:left;
    position:relative;
    list-style: none;
}

.navmenu li a {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    background-color:#7770B4;
    border:1px solid #6E67A6;
    color:#FFF;
    display:block;
    font-size:16px;
    line-height:35px;
    padding:5px 20px;
    text-decoration:none;
    transition:0.5s;
}

.navmenu li:hover > a {
    background:#8CCA33;
    border-color:#6E67A6;
    color:#fff;
}

.navmenu li:hover ul.subs {
    height:auto;
    width:180px;
}

.navmenu ul li {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width:100%;
    list-style: none;
}

.navmenu li ul li {
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;
    list-style: none;
}

.navmenu li:hover ul li {
    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;
}

.navmenu ul li a {
    background:#7770B4;
    border-color:#6E67A6;
    color:#fff;
    line-height:1px;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}

.navmenu li:hover ul li a {
    line-height:35px;
}

.navmenu ul li a:hover {
    background:#8CCA33;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));

}
</style>


<ul class="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
            <ul class="subs">
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
            <ul class="subs">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a>
            <ul class="subs">
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Live</a></li>
<li><a href="#">Branches</a></li>
</ul>
</li>
<li><a href="#">Back</a></li>
</ul>


--------*3*--------
<style>
 #cssmenu_litemenu { 
 width:800px; 
 background:#166bea;  
 border-bottom: 5px solid #993300;  
 border-top: 1px solid #e14d09;  
 clear: both;  
 overflow: hidden;  
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;

border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;

 }  
 #cssmenu_litemenu ul {  
 float: left;  
 width: 100%;  
 }  
 #cssmenu_litemenu li {  
 float: left;  
 list-style-type: none;  
 }  
 #cssmenu_litemenu li a {  
 background:#166bea;  
 color: #fff;  
 display: block;  
 font-size: 14px;  
 padding: 5px 17px 5px 15px;  
 position: relative;  
 text-decoration: none;  
 }  
 #cssmenu_litemenu li a:hover {  
 background:#002660;  
 color: #fff;  
 }  
 #cssmenu_litemenu li li a {  
 background: none;  
 background-color: #0d56c4;  
 border: 1px solid #0d408d;  
 border-top-width: 0;  
 color: #fff;  
 font-size: 14px;  
 padding: 5px 10px;  
 position: relative;  
 text-transform: none;  
 width: 130px;  
 }  
 #cssmenu_litemenu li li a:hover {  
 background: none;  
 background-color: #166bea;  
 }  
 #cssmenu_litemenu li ul {  
 height: auto;  
 left: -9999px;  
 margin: 0 0 0 -1px;  
 position: absolute;  
 width: 160px;  
 z-index: 9999;  
 }  
 #cssmenu_litemenu li:hover ul {  
 left: auto;  
 }  
</style>
<div id="cssmenu_litemenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>  
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>  
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
<li><a href="#"> Menu 4</a></li>
<li><a href="#"> Menu 5</a></li>
<li><a href="#"> Menu 6</a></li>
<li><a href="#"> Menu 7</a></li>
<li><a href="#"> Menu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</div>
 
 













--------*4*--------










<style>
/* Menu Dropdown */
  .cf:before,
  .cf:after {
      content: " ";
      display: table;
  }

  .cf:after {
      clear: both;
  }

  .cf {
      *zoom: 1;
  }

  .menu,
  .submenu {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .menu {   
   margin: 50px auto;
   width: 800px;   
   width: -moz-fit-content;
   width: -webkit-fit-content;
   width: fit-content; 
  }

  .menu > li {
   background: #34495e;
   float: left;
   position: relative;
   transform: skewX(25deg);
  }

  .menu a {
   display: block;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   font-family: Arial, Helvetica;
   font-size: 14px;
  }  

  .menu li:hover {
   background: #e74c3c;
  }  

  .menu > li > a {
   transform: skewX(-25deg);
   padding: 1em 2em;
  }

  /* Dropdown */
  .submenu {
   position: absolute;
   width: 200px;
   left: 50%; margin-left: -100px;
   transform: skewX(-25deg);
   transform-origin: left top;
  }

  .submenu li {
   background-color: #34495e;
   position: relative;
   overflow: hidden;  
  }      

  .submenu > li > a {
   padding: 1em 2em;   
  }

  .submenu > li::after {
   content: '';
   position: absolute;
   top: -125%;
   height: 100%;
   width: 100%;   
   box-shadow: 0 0 50px rgba(0, 0, 0, .9);   
  }  

  .submenu > li:nth-child(odd){
   transform: skewX(-25deg) translateX(0);
  }

  .submenu > li:nth-child(odd) > a {
   transform: skewX(25deg);
  }

  .submenu > li:nth-child(odd)::after {
   right: -50%;
   transform: skewX(-25deg) rotate(3deg);
  }    

  .submenu > li:nth-child(even){
   transform: skewX(25deg) translateX(0);
  }

  .submenu > li:nth-child(even) > a {
   transform: skewX(-25deg);
  }

  .submenu > li:nth-child(even)::after {
   left: -50%;
   transform: skewX(25deg) rotate(3deg);
  }

  /* Show dropdown */
  .submenu,
  .submenu li {
   opacity: 0;
   visibility: hidden;   
  }

  .submenu li {
   transition: .2s ease transform;
  }

  .menu > li:hover .submenu,
  .menu > li:hover .submenu li {
   opacity: 1;
   visibility: visible;
  }  

  .menu > li:hover .submenu li:nth-child(even){
   transform: skewX(25deg) translateX(15px);   
  }

  .menu > li:hover .submenu li:nth-child(odd){
   transform: skewX(-25deg) translateX(-15px);   
  }
</style>

<br />
<ul class="menu cf">
<li><a href="#">Menu item</a></li>
<li>
        <a href="#">Menu item</a>
        <ul class="submenu">
<li><a href="#">Submenu item</a></li>
<li><a href="#">Submenu item</a></li>
<li><a href="#">Submenu item</a></li>
<li><a href="#">Submenu item</a></li>
</ul>
</li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
<div>









--------*5*--------










<style>
#bt_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;

display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;

border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;

white-space:nowrap;}

#bt_tabmenu li  p  {border-radius: 0.5em 0.5em 0  0 ; }

#bt_tabmenu li ul li:last-child a {border-radius: 0  0 0.5em 0.5em ;}

#bt_tabmenu ul {display:table;margin:0;padding:0;position:absolute;

left:-9999px;z-index:1;top:1.6em;}

#bt_tabmenu  > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}

#bt_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}

#bt_tabmenu li a , #bt_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);

display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}

#bt_tabmenu li a  {box-shadow: 0px 3px 10px  -5px black;float:right;}

#bt_tabmenu p {position:relative;height:1.6em;}

#bt_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}

#bt_tabmenu p:focus:after {content:'';}

#bt_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;

color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;

padding-right:5px;}

#bt_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}

#bt_tabmenu ul a:focus , #bt_tabmenu p:focus + ul li a {margin-left:9999px;}

#bt_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}

:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}

[tabindex] {cursor:pointer;}

 #bt_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}

 #bt_tabmenu ul ul a {margin-left:-9999px;}

 #bt_tabmenu ul ul li a:focus  {margin-left:19998px;}

#bt_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}

#bt_tabmenu ul li a:focus.fermoir  + ul {

margin-left:10001px;}

#bt_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;

padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}

.fermoir:before {display:none;}

#bt_tabmenu ul li .fermoir:focus , p#bt_tabmenu {color:white;}

</style>
<div id="bt_tabmenu">

    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title=""# class="fermoir">&#9650;</a></p>

          <ul>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

          </ul>

    </li>



    <li><p tabindex="0"  onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>

          <ul>

                <li><a href="#" tabindex="0" >List</a></li>

                <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">&#9658;</a>

                    <ul>

                      <li><a href="#" tabindex="0" >List</a></li>

                      <li><a href="#" tabindex="0" >List</a></li>

                      <li><a href="#" tabindex="0" >List</a></li>

                      <li><a href="#" tabindex="0" >List</a></li>

                      <li><a href="#" tabindex="0" >List</a></li>

                   </ul>

                </li>

                <li><a href="#" tabindex="0" >List</a></li>

                <li><a href="#" tabindex="0" >List</a></li>

                <li><a href="#" tabindex="0" >List</a></li>

          </ul>

    </li>



    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>

          <ul>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

          </ul>

    </li>

<li><p tabindex="0"  onclick=""> Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>

          <ul>

                <li><a href="#" tabindex="0" >List</a></li>

                <li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">&#9658;</a>

                    <ul>

                      <li><a href="#" tabindex="0" >List</a></li>

                      <li><a href="#" tabindex="0" >List</a></li>

                      <li><a href="#" tabindex="0" >List</a></li>

                      <li><a href="#" tabindex="0" >List</a></li>

                      <li><a href="#" tabindex="0" >List</a></li>

                   </ul>

                </li>

                <li><a href="#" tabindex="0" >List</a></li>

                <li><a href="#" tabindex="0" >List</a></li>

                <li><a href="#" tabindex="0" >List</a></li>

          </ul>

    </li>



    <li><p tabindex="0" onclick="" > Menu List <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>

          <ul>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

               <li><a href="#" tabindex="0" >List</a></li>

          </ul>

    </li>

</div>













I hope this tutorial will be help you in adding Navigation menu in your blog and If you have any question you camment below. I will be more than happy to resolve your issue.












Posted by



at






















Labels:


















No comments:















Post a Comment


















        

      









Subscribe to:
Post Comments (Atom)