How to make a cool stack!

[mav3n]

This code will allow you to make a stack thta when clicked will expand out and show links that you and your members can chose from. A screen shot will be below!

Spoiler

Alright, here we go!

1: Here is the code that you will want to add onto your forums ACP.

<style type="text/css">
.stack { position: fixed; bottom: 15px; right: 20px; }  
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }  
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }  
.stack ul li { position: absolute; }  
.stack ul li img { border: 0; }  
.stack ul li span { display: none; }  
.stack .openStack li span {  
    font-family:  "Trebuchet MS", Arial, Helvetica, sans-serif;  
    display:block;  
    height: 14px;  
    position:absolute;  
    top: 17px;  
    right:60px;  
    line-height: 14px;  
    border: 0;  
    background-image: url(http://img220.imageshack.us/img220/7396/bodybackgroundg.jpg);
    padding: 10px 15px;  
    -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-box-shadow: 0px 0px 1px #000;
        -webkit-box-shadow: 0px 0px 1px #000;
        border: 2px solid #353535;
    color: #fcfcfc;  
    text-align: center;  
    text-shadow: #000 1px 1px 1px;  
    opacity: .85;  
    filter: alpha(opacity = 85);  
}  
  
.stack { _position: absolute; }  
.stack ul { _z-index:-1; _top:-15px; }  
.stack ul li { *right:5px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dsprime.webs.com/Stacker.js"></script><div class="stack">  <img src="http://i67.servimg.com/u/f67/14/87/55/48/stack110.png" alt="stack">  <ul id="stack">  <li><a href="LINK"><span>Example</span><img src="http://cdn.iconfinder.net/data/icons/Basic_set2_Png/48/bug.png" alt="Test"></a></li>  <li><a href="LINK"><span>Examples</span><img src="http://cdn.iconfinder.net/data/icons/iconos/Gallery.png" alt="Test"></a></li>  <li><a href="LINK"><span>Example</span><img src="http://cdn.iconfinder.net/data/icons/customicondesignoffice5/48/content.png" alt="Test"></a></li>  <li><a href="http://world-dezign.forumotion.com"><span>Example</span><img src="http://cdn.iconfinder.net/data/icons/function_icon_set/paper_content_pencil_48.png" alt="Test"></a></li>  <li><a href="LINK"><span>Example</span><img src="http://cdn.iconfinder.net/data/icons/basicset/help_48.png" alt="Test"></a></li>  </ul> </div>

2. Where you see "href="LINK" is where you will want to place the URL to THAT thread. So if you made a link to a Tutorial section, the URL would point to the Tutorial section on your forum.

3. To change the icons, Where you see "<img src="..." you will want to place that icon URL there.

and there ya go! You now have a working stack on your forum! If you need a place where you can find icons, please visit:
http://www.Iconfinder.com
http://www.Findicons.com

Adapted from http://www.WorldDezign.com | Gangstar15​

 

[Carson]

Nice tutorial! That's definitely pretty nifty! 🙂

 

[mav3n]

Thanks!

 

[Justin]

Great Tut 🙂 +rep

 

[Patrick S.]

Going to try it ASAP thanks!