Add a Pro Expand Collapse Verticle Sidebar Menu in Blogger

Hello, frnds we are here to share a new and very beautiful widget for blogger, it's being a long time since we did not share any widget on this blog because I was busy in some important work and my laptop also was not in good condition, that was suffering from deadness :) but now that is alive lol. Well Jokes a part we try to share this widget here on WidgetGenerators.com because this is hub of widgets.

About Expand Collapse Verticle Sidebar Widget...

This Widget is simply made by  the CSS and some scripting codes, this is very user-friendly and easy to install on your blog. We also used some where JavaScript in this widget just only because of the good looks and gives the professional looks to your blog.

Install Widget in Your Blog

Keep Follow all steps to add it correctly.

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
wgmenu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, wgmenu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
html{
  height: 100%;
background: rgb(234, 246, 243);
}
body{
  text-align:center;
  vertical-align:middle;
  height:100%;
}
body:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.wgmenu{
  vertical-align:middle;
  width:300px;
  display:inline-block;
 font-family: 'Source Sans Pro', sans-serif;
  transform:translate3d(0,0,0);
}
.wgmenu input{
  position:absolute;
  left:-9999px;
}
.wgmenu #togglewgmenu:checked ~ ul {
  max-height:300px;
  padding-bottom:1em;
}
.togglewgmenu {
background: #FC634B;
color: white;
display: block;
padding: 0.75em;
text-align: center;
cursor:pointer;
font-family: 'entypo', sans-serif;
}
.togglewgmenu:before{
  content: "\2630";
  font-size:1.5em;
  vertical-align:middle;
}
.wgmenu ul{
  margin-top:2px;
  text-align:left;
  max-height:0px;
  overflow:hidden;
  padding-bottom:0;
  transition:300ms ease all;
}
.wgmenu li{
  margin-bottom:1px;
  position:relative;
  z-index:10;
  transition:300ms ease all;
}
.wgmenu li a {
display: block;
position:relative;
width:100%;
padding: 1em;
background: rgb(192, 192, 192);
text-decoration:none;
color:white;
box-sizing:border-box;
transition:300ms ease all;
}
.wgmenu li:hover a {
width:99%;
margin-left:1%;
box-shadow: inset 300px 0 300px -300px rgba(255, 255, 255, 0.6);
}
.wgmenu li:before {
content: "";
position: absolute;
width: 50%;
height: 30%;
left: 1%;
bottom: 16px;
box-shadow: 10px 0 0px black;
transition:300ms ease all;
transform: rotate(0deg);
}

.wgmenu li:hover:before {
box-shadow: 10px 0 30px black;
transform: rotate(-4deg);
bottom: 6px;
}
.wgmenu li:hover + li{
  z-index:1;
}
</style>
<nav class="wgmenu">
  <input type="checkbox" id="togglewgmenu" checked />
  <label for="togglewgmenu" class="togglewgmenu"></label>
  <ul>
    <li><a href="#">SEO</a></li>
    <li><a href="#">Widgets</a></li>
    <li><a href="#">Adsense</a></li>
    <li><a href="#">Blogging Tips</a></li>
  </ul>
</nav>

• Now Save Your Widget, after some changes.

Make Changes....!

Make some changes before adding widget.

• Replace # it with your Facebook page id or username. 
• Replace red color with your Facebook page id or username.