06-09-2012, 01:21 PM
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
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>