Add a Pro Expand Collapse Vertical Sidebar Menu in Blogger

Posted by : TheCode-X
- Add Comment



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


How to Instal Widget



  •     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,
    menu, 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, menu, 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;
    }
    .menu{
      vertical-align:middle;
      width:300px;
      display:inline-block;
     font-family: 'Source Sans Pro', sans-serif;
      transform:translate3d(0,0,0);
    }
    .menu input{
      position:absolute;
      left:-9999px;
    }
    .menu #togglemenu:checked ~ ul {
      max-height:300px;
      padding-bottom:1em;
    }
    .togglemenu {
    background: #FC634B;
    color: white;
    display: block;
    padding: 0.75em;
    text-align: center;
    cursor:pointer;
    font-family: 'entypo', sans-serif;
    }
    .togglemenu:before{
      content: "\2630";
      font-size:1.5em;
      vertical-align:middle;
    }
    .menu ul{
      margin-top:2px;
      text-align:left;
      max-height:0px;
      overflow:hidden;
      padding-bottom:0;
      transition:300ms ease all;
    }
    .menu li{
      margin-bottom:1px;
      position:relative;
      z-index:10;
      transition:300ms ease all;
    }
    .menu 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;
    }
    .menu li:hover a {
    width:99%;
    margin-left:1%;
    box-shadow: inset 300px 0 300px -300px rgba(255, 255, 255, 0.6);
    }
    .menu 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);
    }
    .menu li:hover:before {
    box-shadow: 10px 0 30px black;
    transform: rotate(-4deg);
    bottom: 6px;
    }
    .menu li:hover + li{
      z-index:1;
    }
    </style>
    <nav class="menu">
      <input type="checkbox" id="togglemenu" checked />
      <label for="togglemenu" class="togglemenu"></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>




    Make some changes before adding widget.


    •     Replace # it with your links. 
    •     Replace Yellow color with your link names. 
    Mix-R
    Mix-R

    "Myths, legends and stories are the signposts previous generations have left us so we don’t have to figure out our own personal journey in solitude!"

    Disqus CommentsLoadHide