Tutorial How to ( CSS Floating Menu )

[karpackie]

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

COMPUTERGEEKS.IN

Computergeeks.in - This Website Is

For Sale! - Computergeeks Resources And Information.

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

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>