Amazing Tricks For Blogger: Top 8 CSS Vertical menu bar for blogger

Sharing The first collection of Vertical Navigation menu bar for blogger. Today I give you some majestic designed vertical menu. Those menues make comfortable your blogger site. I am tried hard to share the best menu bar for you.to add Vertical Navigation CSS Menu on your blogger/blogspot site follow below steps.

Log in to your blogger account.
Then select edit HTML in the template tab.
To add any menu bar from below first copy the css code of your selected menu.
Then go to your blogger template and find ]]></b:skin>
Past your copied css code just above of ]]></b:skin>
Now save your template.

After adding css code now you need to add html code to show your menu bar on blogger.

Go to your blogger layout option> Add a gadget > Html/javascript > and paste the html codes and save it.
Now you need to edit the html codes:

Remove # and give your page url and change Home, Products, Contact etc and give the linked page name on it.

Note: if the menu is not fitted on your slide bar actual size then simply comment on the bottom. I will try to made it comfortable with your site.

Blue & White menu

CSS Codes:

/*Gt Stylesheet */
#cssmenu > ul{
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}

/* The container */
#cssmenu > ul {
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* General link styling */
  #cssmenu > ul li a {
   /* Layout */
   display: block;
   position: relative;
   margin: 0;
   border-top: 1px dotted #fff;
   border-bottom: 1px dotted #d9d9d9;
   padding: 11px 20px;
   width: 110px;

/* Typography */
   font-family:  Helvetica, Arial, sans-serif;
   color: #3dafea;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 0 #fff;
   font-size: 13px;
   font-weight: 300;

/* Background & effects */
   background: #eaeaea;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   background: #54cdf1;
   background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
   background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
   background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
   background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #3dafea; 
  }

/* The same arrow, but with a darker color, to create the shadow effect */
  #cssmenu > ul .has-sub>a::before {
   content: '';
   position: absolute;
   top: 17px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #fff;
  }

/* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .25);
  }

/* THE SUBMENUS */
  #cssmenu > ul ul {
   position: absolute;
   left: 150px;
   top: -9999px;
   padding-left: 5px;
   opacity: 0;
   /* The fade effect, created using an opacity transition */
   -webkit-transition: opacity .3s ease-in;
   -moz-transition: opacity .3s ease-in;
   -o-transition: opacity .3s ease-in;
   -ms-transition: opacity .3s ease-in;
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Black & Yellow Menu

CSS Codes:

/* GT stylesheet */
ul#cssmenu > ul, #cssmenu > ul ul {
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}

/* The container */
#cssmenu > ul, #cssmenu > ul ul {
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* General link styling */
  #cssmenu > ul li a {
   /* Layout */
   display: block;
   position: relative;
   margin: 0;
   border-top: 1px dotted #3a3a3a;
   border-bottom: 1px dotted #1b1b1b;
   padding: 11px 20px;
   width: 110px;

/* Typography */
   font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif;
   color: #d8d8d8;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 1px #000;
   font-size: 13px;
   font-weight: 300;

/* Background & effects */
   background: #282828;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   background: #d4b800;
   background: -webkit-linear-gradient(bottom, #d4b800, #f6d600);
   background: -ms-linear-gradient(bottom, #d4b800, #f6d600); 
   background: -moz-linear-gradient(bottom, #d4b800, #f6d600);
   background: -o-linear-gradient(bottom, #d4b800, #f6d600);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #d8d8d8; 
  }

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #000;
  }

/* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .3);
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Black & Blue Menu

CSS Codes:

/* Some stylesheet reset */
#cssmenu  > ul {
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}/* The container */
#cssmenu  > ul {
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu  > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* General link styling */
  #cssmenu  > ul li a {
   /* Layout */
   display: block;
   position: relative;
   margin: 0;
   border-top: 1px dotted #3a3a3a;
   border-bottom: 1px dotted #1b1b1b;
   padding: 11px 20px;
   width: 110px;

/* Typography */
   font-family: Helvetica, Arial, sans-serif;
   color: #d8d8d8;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 1px #000;
   font-size: 13px;
   font-weight: 300;

/* Background & effects */
   background: #282828;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu  > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu  > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu  > ul li>a:hover, #cssmenu  > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   background: #54cdf1;
   background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
   background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
   background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
   background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu  > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #d8d8d8; 
  }

/* The same arrow, but with a darker color, to create the shadow effect */
  #cssmenu  > ul .has-sub>a::before {
   content: '';
   position: absolute;
   top: 17px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #000;
  }

/* Changing the color of the arrow on hover */
  #cssmenu  > ul li>a:hover::after, #cssmenu  > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu  > ul li>a:hover::before, #cssmenu  > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .3);
  }

/* THE SUBMENUS */
  #cssmenu  > ul ul {
   position: absolute;
   left: 150px;
   top: -9999px;
   padding-left: 5px;
   opacity: 0;
   /* The fade effect, created using an opacity transition */
   -webkit-transition: opacity .3s ease-in;
   -moz-transition: opacity .3s ease-in;
   -o-transition: opacity .3s ease-in;
   -ms-transition: opacity .3s ease-in;
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu  > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Red & White Menu

CSS Codes:

/* Some stylesheet reset */
#cssmenu > ul {
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}

/* The container */
#cssmenu > ul{
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* Typography */
   font-family:  Helvetica, Arial, sans-serif;
   color: #e4433c;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 0 #fff;
   font-size: 13px;
   font-weight: 300;

/* Background & effects */
   background: #eaeaea;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu > ul li a:hover, #cssmenu > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
   background: #f23f37;
   background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);
   background: -ms-linear-gradient(bottom, #f23f37, #f45d57); 
   background: -moz-linear-gradient(bottom, #f23f37, #f45d57);
   background: -o-linear-gradient(bottom, #f23f37, #f45d57);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu > ul .has-sub >a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #e4433c; 
  }

/* The same arrow, but with a darker color, to create the shadow effect */
  #cssmenu > ul .has-sub >a::before {
   content: '';
   position: absolute;
   top: 17px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #fff;
  }

/* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .25);
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Grey Hat Menu

CSS Codes:

#cssmenu {
 margin: 0;
 padding: 0;
 font-family: Verdana, Helvetica, Arial, sans-serif;
}
#cssmenu{
 width: 193px;
}
#cssmenu ul{
 list-style: none;
 text-indent: 0px;
}
#cssmenu li{
 margin-top: 3px;
}
#cssmenu a{
 font: 12px Verdana;
 padding: 4px;
 color: #646464;
 display:block;
 padding: 6px 30px;
 height: 20px;
 text-decoration: none;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZz3FN9-XBUPVrk1MabjlgD-hDMx8rhdpLHgJtAu-XwCDDOfDtenwKIiLRQhfXxYkmpPDhnIpdAOjFbxbzfTBRbkJ-rKKUYPLNbc0fhgZ8CyS15RiEIWMTfzZLQBHkq66AUbL_rYoKRAf/s220/background.gif');
}
#cssmenu a:hover{
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41Z36dixyla0vZBNWKvGYzsaKotZgrRuBoOxzGMZYjJBthMhZVGPyphY10Ju34wFIXwKcaHGuCess0CXjemVehYQfopvJtBAXKy96seu_Z8Z9L_RN0_yw0I9nzJFJBPsbnQVgPEcVsmEd/s220/highlight.gif') no-repeat right;
 padding: 6px 40px;
}:148px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41Z36dixyla0vZBNWKvGYzsaKotZgrRuBoOxzGMZYjJBthMhZVGPyphY10Ju34wFIXwKcaHGuCess0CXjemVehYQfopvJtBAXKy96seu_Z8Z9L_RN0_yw0I9nzJFJBPsbnQVgPEcVsmEd/s220/highlight.gif) no-repeat;color:#b18211;}

Vertical-Massive-Blue

CSS Codes:

Bitbox Menu

CSS Codes:

#cssmenu {
 width: 200px;
 border-style: solid solid none solid;
 border-color: #94AA74;
 border-width: 1px;

}
#cssmenu ul{
 list-style:none;
 margin:0px;
 padding:0px;
 }
 
#cssmenu li a {
 height: 32px;
   height: 24px;
 text-decoration: none;
 font-weight:normal;
 } 
 
#cssmenu li a:link, #cssmenu li a:visited {
 color: #FFFFFF;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/s1600/v6.gif);
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }
 
#cssmenu li a:hover {
 color: #666666;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/s1600/v6.gif) 0 -32px;
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }
 
#cssmenu li a:active {
 color: #666666;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/s1600/v6.gif) 0 -64px;
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }

Salmon Menu

CSS Codes:

/* GT stylesheet */
#cssmenu > ul {
 list-style: none;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
 line-height: 1;
}

/* The container */
#cssmenu > ul {
 display: block;
 position: relative;
 width: 150px;
}

/* The list elements which contain the links */
 #cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px; 
 }

/* Background & effects */
   background: #282828;
  }

/* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

/* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

/* The hover state of the menu/submenu links */
  #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   background: #f06343;
   background: -webkit-linear-gradient(bottom, #f06343, #f27d63);
   background: -ms-linear-gradient(bottom, #f06343, #f27d63); 
   background: -moz-linear-gradient(bottom, #f06343, #f27d63);
   background: -o-linear-gradient(bottom, #f06343, #f27d63);
   border-color: transparent;
  }

/* The arrow indicating a submenu */
  #cssmenu > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #d8d8d8; 
  }

/* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #000;
  }

/* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #fff;
  }

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid rgba(0, 0, 0, .3);
  }

/* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

Second Menu

Top 8 CSS Vertical menu bar for blogger

0 comments:

Post a Comment

Sponsors

Labels

Popular Posts

Blog Archive

Contributors

Labels

Labels

Labels