Malioglasnik.com.hr

[ New messages · Members · Forum rules · Search · RSS ]
  • Page 1 of 1
  • 1
Forum » Web Design » Html » CSS Floating Menu
CSS Floating Menu
BassoDate: Monday, 2010-05-24, 6:23 PM | Message # 1
Group: Moderator
Messages: 1637
Awards: 1
Reputation: 695
Status: Offline

This page contains code for a CSS floating menu bar.

Also known as "fixed menus" and "hovering menus", floating menus stay in a fixed position when you scroll the page. They appear to "float" on top of the page as you scroll.
Example of a Floating Menu

The menu to the left is an example of a floating menu. As you scroll down this page, you will notice the menu stays fixed in the same position on the screen.
Create A Floating Menu

It is actually very easy to create a floating menu bar. The operative code is position:fixed.

Having said this, you may have to play around a bit with the placement of your menu so that it doesn't get in the way of anything that it shouldn't.
Example Code

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>

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

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.
Older Browsers

Note that this code may not work in older browsers. This is because some older browsers don't support position:fixed. If the above example doesn't work for you, this could be the reason. In that case, try using a newer browse

 
If you have a problem about Intellectual property rights violation,

Please Contact Us we remove all content within 24 hours.



Forum » Web Design » Html » CSS Floating Menu
  • Page 1 of 1
  • 1
Search:
Forum Advice
Security advice: Protect your identity when downloading!
Your real identity and ip address is visible while downloading. These days, everyone's looking to throttle your connection, spy on what you're downloading, or even send you an ominous letter. If you use BitTorrent, you absolutely need to take precautions to hide your identity. An easy and raliable solution is a VPN by hide.me. Hide.me doesn't store any logs and offers blazing fast connections.Hide.me VPN is trustedby more than 500.000 internet users worldwide and recommended by Brna.my1.ru.