Tips Make Scrolling Expanding List Like Drop Down Menus

Membuat suatu "scrolling expanding list" yaitu seperti menu drop down, tapi disini mungkin lebih menarik, karena menu drop-nya bisa ditarik diperpanjang.
Jadi disini menu dropdown-nya bisa ditarik menggeser memanjang ataupun dikembalikan lagi ke posisi semula, pati bingung kan? Sama dong, HeHeHe.....

Gini-gini contohnya seperti ini :

scrolling-expanding-list dalam keadaan standar
scrolling-expanding list sewaktu di tarik + kebawah

contoh penggunaan scrolling-expanding-list

Langkahnya seperti ini :

1. Login Blogger anda

2. Layout --> Edit HTML --> Backup dahulu.

3. Setelah itu, download file ini scrollExpand.js

4. file ini scrollExpand.js simpan ke server anda.

5. Kemudian kita akan membuat CSS, cari kode --> <head> , copy paste kode dibawah ini dibawahnya kode --> <head>

#mContainer {

position:relative;

width:100px;

height:auto;

margin:auto;

border:2px solid #000;

overflow:hidden;

}

#nContainer {

position:relative;

overflow:hidden;

width:100px;

border-style:none;

background:#D8D8D8;

}

#listContainer {

display:block;

position:absolute;

top:0px;

left:0px;

width:100px;

padding:0px;

margin:0px;

}

#listContainer li {

position:relative;

display:block;

border-style:none;

width:100px;

height:10px;

padding:2px;

font:9px verdana;

cursor:pointer;

margin:0px;

color:#638DA1;

background-color:#D8D8D8;

line-height:10px;

}

#listContainer>li {

border-top:1px solid #311DF2; /* #638DA1; */

}

#listContainer li:hover {

color:#000;

}

#upArrow,#downArrow {

width:100px;

height:10px;

font:9px verdana;;

text-align:center;

color:#FFF;

cursor:pointer;

}

#upArrow {

background:#311DF2 url(up.gif) no-repeat center center;

}

#downArrow {

background:#311DF2 url(down.gif) no-repeat center center;

}

#changeSize {

width:10px;

height:10px;

position:relative;

float:right;

background:#311DF2 url(plus.gif) no-repeat center center;

}

6. Masih dalam kode <head>, copykan juga kode dibawah ini.

7. Kemudian cari kode <body> dan copykan kode ini dibawahnya <body>

<p>

Click the up and down arrows to scroll the list. Click the "+" icon in the lower
right corner to expand the list to it's full height. Click the "-" icon to
contract the list again.</p>

<div id="mContainer">

<div id="upArrow"></div>

<div id="nContainer">

<ul id="listContainer">

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

<li>List Item 4</li>

<li>List Item 5</li>

<li>List Item 6</li>

<li>List Item 7</li>

<li>List Item 8</li>

<li>List Item 9</li>

<li>List Item 10</li>

<li>List Item 11</li>

<li>List Item 12</li>

<li>List Item 13</li>

<li>List Item 14</li>

<li>List Item 15</li>

<li>List Item 16</li>

<li>List Item 17</li>

<li>List Item 18</li>

<li>List Item 19</li>

<li>List Item 20</li>

</ul>

</div>

<div id="downArrow">

<div id="changeSize"></div>

</div>

</div>

8. Kemudian download image ini

9. Kemudian save template dan lihat hasilnya.

Source : http://dhuwuh.blogspot.com/2008/09/tips-make-scrolling-expanding-list-like.html

Link Exchange