• Portal
  • Search
  • Member List
  • Help
  • Random Thread
  • Thread Rating:
    • 0 Vote(s) - 0 Average
    • 1
    • 2
    • 3
    • 4
    • 5

    Tutorial: How to ( CSS Floating Menu )
    #1
    Example Code

    Here is the CSS code that was used to create the floating menu to the side:

    Code:
    <style>
    div.floating-menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;}
    div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
    </style>
    <div class="floating-menu">
    <h3>Floating Menu</h3>
    <a href="http://www.quackit.com/css/">CSS</a>
    <a href="http://www.quackit.com/html/">HTML</a>
    <a href="http://www.quackit.com/javascript/">JavaScript</a>
    <a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
    <a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a>
    </div>

    I have modified it to my forum as an another example

    http://computergeeks.in/
    Feel free to change the width, color, and other properties as you wish (as long as you don't remove position:fixed).

    As mentioned, you may also need to play around with the placement of your fixed menu. You can remove/change the z-index:100 if you don't want the menu to float on top of everything.

    enter it into

    Quote:admin cp/Templates/your default templeplate/Header Templates/header copy and paste in the bottom

    how i modified my one

    Code:
    <style>
    div.floating-menu {position:fixed;background:#ffffff;border:2px solid #1E90FF;width:200px;z-index:100;}
    div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
    </style>
    <div class="floating-menu">
    <h3>( Important Forums )</h3>
    <a href="http://computergeeks.in/showthread.php?tid=1">Welcome forum</a>
    <a href="http://computergeeks.in/forumdisplay.php?fid=18">For Tut's only</a>
    <a href="http://computergeeks.in/forumdisplay.php?fid=3">Windows Support</a>
    <a href="http://computergeeks.in/forumdisplay.php?fid=10">Virus, Spyware, Malware</a>
    <a href="http://computergeeks.in/forumdisplay.php?fid=7">Programming & Development</a>
    </div>
    Reply





    Users browsing this thread: 1 Guest(s)