Thursday, 22 January 2015

SIDE BAR SCROLLING MENU BAR FOR YOUR BLOGGER

Ghous uddin    No comments

<<<<<<<<<<<<<<<COPY AND PASTE>>>>>>>>>>>



    <script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
    <style>
    /* ######### Sidebar Menu by www.MyBloggerTricks.com ######### */


    .ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
    }

    .ddsubmenustyle ul{
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
    }

    .ddsubmenustyle li a{
    display: block;
    width: 170px; /*width of menu (not including side paddings)*/
    color: #000000;
    background-color: #FFFFE0;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
    }

    * html .ddsubmenustyle li{ /*IE6 CSS hack*/
    display: inline-block;
    width: 170px; /*width of menu (include side paddings of LI A*/
    }

    .ddsubmenustyle li a:hover{
    background-color: #000000;
    color: #ffffff;
    }

    .downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
    }

    .rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
    }

    .ddiframeshim{
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
    }

     

    /* ######### Vertical Menu ######### */

    .markermenu{
    width: 175px; /*width of side bar menu*/
    clear: left;
    position: relative;

    }

    .markermenu ul{
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
    border: 1px solid #9A9A9A;
    }

    .markermenu ul li a{
    background: #F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJZFuXJ01kJZJsfqvXXCPZKS1fN3J8wyb8AR2a0AJOauzJZzUTfUoDOI9MIVO4eTKRhN4jP5IthFtEpm7V6iQe1zGU99mxYrQ34R1x17gptdx-OB_8FRgS7eCvpU7CvRlkaKvS6sVAGkc/s400/bulletlist.gif) no-repeat 3px center;
    font: bold 13px "Lucida Grande", "Trebuchet MS" ;color: #00014e;
    display: block;
    width: auto;
    padding: 3px 0;
    padding-left: 20px;
    text-decoration: none;
    border-bottom: 1px solid #B5B5B5;
    }

    * html .markermenu ul li a{ /*IE6 hack*/
    width: 155px;
    }

    .markermenu ul li a:visited, .markermenu ul li a:active{
    color: #00014e;
    }

    .markermenu ul li a:hover, .markermenu ul li a.selected{
    color: #ffffff;
    background-color: #000000;
    }

     

    </style>

    <div id="ddsidemenubar" class="markermenu">
    <ul>
    <li><a href="#">LINK1</a></li>
    <li><a href="#" rel="ddsubmenuside1">LINK2</a></li>
    <li><a href="#" rel="ddsubmenuside2">LINK3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#" rel="ddsubmenuside3">LINK5</a></li>
    </ul>

    </div>


    <script type="text/javascript">
    ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
    </script>

    <ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">

    <li><a href='#'>LINK2 ITEM 1</a></li>
    <li><a href='#'>LINK2 ITEM 2</a>
    <ul>
    <li><a href='#'>LINK2 ITEM 2.1</a></li>
    <li><a href='#'>LINK2 ITEM 2.2</a></li>
    </ul>

    </li>
    <li><a href='#'>LINK2 ITEM 3</a>
    <ul>
    <li><a href='#'>LINK2 ITEM 3.1</a></li>

    </ul>

    </li>

    <li><a href='#'>LINK2 ITEM 4</a></li>

    </ul>

     

    <ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">

    <li><a href='#'>LINK3 ITEM 1</a></li>
    <li><a href='#'>LINK3 ITEM 2</a></li>
    <li><a href='#'>LINK3 ITEM 3</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 3.1</a></li>

    <li><a href='#'>LINK3 ITEM 3.2</a></li>
    <li><a href='#'>LINK3 ITEM 3.3</a></li>
    <li><a href='#'>LINK3 ITEM 3.4</a></li>
    </ul>
    </li>
    <li><a href='#'>LINK3 ITEM 4</a></li>
    <li><a href='#'>LINK3 ITEM 5</a>
    <ul>

    <li><a href='#'>LINK3 ITEM 5.1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>

    </ul>
    </li>
    </ul>
    </li>
    <li><a href='#'>LINK3 ITEM 6</a></li>
    </ul>

    <ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">

    <li><a href='#'>LINK5 ITEM 1</a></li>
    <li><a href='#'>LINK5 ITEM 2</a></li>

    <li><a href='#'>LINK5 ITEM 3</a></li>
    <li><a href='#'>LINK5 ITEM 4</a></li>
    <li><a href='#'>LINK5 ITEM 5</a></li>
    </ul>side bar menu 


    <script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
    <style>
    /* ######### Sidebar Menu by www.MyBloggerTricks.com ######### */

    .ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
    }

    .ddsubmenustyle ul{
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
    }

    .ddsubmenustyle li a{
    display: block;
    width: 170px; /*width of menu (not including side paddings)*/
    color: #000000;
    background-color: #FFFFE0;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
    }

    * html .ddsubmenustyle li{ /*IE6 CSS hack*/
    display: inline-block;
    width: 170px; /*width of menu (include side paddings of LI A*/
    }

    .ddsubmenustyle li a:hover{
    background-color: #000000;
    color: #ffffff;
    }

    .downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
    }

    .rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
    }

    .ddiframeshim{
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
    }

     

    /* ######### Vertical Menu ######### */

    .markermenu{
    width: 175px; /*width of side bar menu*/
    clear: left;
    position: relative;

    }

    .markermenu ul{
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
    border: 1px solid #9A9A9A;
    }

    .markermenu ul li a{
    background: #F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJZFuXJ01kJZJsfqvXXCPZKS1fN3J8wyb8AR2a0AJOauzJZzUTfUoDOI9MIVO4eTKRhN4jP5IthFtEpm7V6iQe1zGU99mxYrQ34R1x17gptdx-OB_8FRgS7eCvpU7CvRlkaKvS6sVAGkc/s400/bulletlist.gif) no-repeat 3px center;
    font: bold 13px "Lucida Grande", "Trebuchet MS" ;color: #00014e;
    display: block;
    width: auto;
    padding: 3px 0;
    padding-left: 20px;
    text-decoration: none;
    border-bottom: 1px solid #B5B5B5;
    }

    * html .markermenu ul li a{ /*IE6 hack*/
    width: 155px;
    }

    .markermenu ul li a:visited, .markermenu ul li a:active{
    color: #00014e;
    }

    .markermenu ul li a:hover, .markermenu ul li a.selected{
    color: #ffffff;
    background-color: #000000;
    }

     

    </style>

    <div id="ddsidemenubar" class="markermenu">
    <ul>
    <li><a href="#">LINK1</a></li>
    <li><a href="#" rel="ddsubmenuside1">LINK2</a></li>
    <li><a href="#" rel="ddsubmenuside2">LINK3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#" rel="ddsubmenuside3">LINK5</a></li>
    </ul>

    </div>


    <script type="text/javascript">
    ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
    </script>

    <ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">

    <li><a href='#'>LINK2 ITEM 1</a></li>
    <li><a href='#'>LINK2 ITEM 2</a>
    <ul>
    <li><a href='#'>LINK2 ITEM 2.1</a></li>
    <li><a href='#'>LINK2 ITEM 2.2</a></li>
    </ul>

    </li>
    <li><a href='#'>LINK2 ITEM 3</a>
    <ul>
    <li><a href='#'>LINK2 ITEM 3.1</a></li>

    </ul>

    </li>

    <li><a href='#'>LINK2 ITEM 4</a></li>

    </ul>

     

    <ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">

    <li><a href='#'>LINK3 ITEM 1</a></li>
    <li><a href='#'>LINK3 ITEM 2</a></li>
    <li><a href='#'>LINK3 ITEM 3</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 3.1</a></li>

    <li><a href='#'>LINK3 ITEM 3.2</a></li>
    <li><a href='#'>LINK3 ITEM 3.3</a></li>
    <li><a href='#'>LINK3 ITEM 3.4</a></li>
    </ul>
    </li>
    <li><a href='#'>LINK3 ITEM 4</a></li>
    <li><a href='#'>LINK3 ITEM 5</a>
    <ul>

    <li><a href='#'>LINK3 ITEM 5.1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>

    </ul>
    </li>
    </ul>
    </li>
    <li><a href='#'>LINK3 ITEM 6</a></li>
    </ul>

    <ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">

    <li><a href='#'>LINK5 ITEM 1</a></li>
    <li><a href='#'>LINK5 ITEM 2</a></li>

    <li><a href='#'>LINK5 ITEM 3</a></li>
    <li><a href='#'>LINK5 ITEM 4</a></li>
    <li><a href='#'>LINK5 ITEM 5</a></li>
    </ul>







Your Feed Back Plz
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

 

Copyright © 2013 Free Blogging Tricks.