Current time: 05-28-2017, 11:36 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to ( CSS Floating Menu )
06-09-2012, 01:21 PM
Post: #1
How to ( CSS Floating Menu )
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>

Find all posts by this user
Quote this message in a reply
Post Reply 




User(s) browsing this thread: 1 Guest(s)