# Floating menu CSS



## Faun (Jun 15, 2012)

How do I make the floating menu like this website:
EON11-S Custom Gaming Laptop Product Features and Details | ORIGIN PC

Currently it's like this on my website:
psygeist

Floating menu should move up once the user scroll past the header.


----------



## abhidev (Jun 15, 2012)

its easy....

<ul class="nav">
<li><a href="*psygeist.com">Home</a><div class="sub_menu">Sub menu</div></li>
<li class="page_item page-item-2"><a href="*psygeist.com/about-me/">About Me</a><div class="sub_menu">Sub menu</div></li>
</ul>

note the div I have added....and in the css
it would be like this

.nav li{ position:relative;}
.nav li .sub_menu{ display:none; position:absolute; top:/*your main menu height*/px; left:0; }
.nav li:hover .sub_menu{ display:block; }


----------



## Faun (Jun 15, 2012)

I am not talking about the header but the sidebar on right in my website and the siderbar on left in the origin website.


----------



## RCuber (Jun 15, 2012)

currently is working similarly in your website!!! did you update it now?


----------



## Faun (Jun 15, 2012)

RCuber said:


> currently is working similarly in your website!!! did you update it now?



Yes but it stays a little low from the upper most part. It should stick to the upper most part when the user has scrolled past header of the website.

See the origin website. There, it moves till the upper header is gone from scroll area and then it sticks there just a few pixels below the upper most part of page.
EON11-S Custom Gaming Laptop Product Features and Details | ORIGIN PC

The difference is noticeable.

Ok I just saw that the CSS value changes dynamically from



> position:absolute; top:150px;


to


> position:fixed; top:15px;



I guess javascript is used to change is dynamically. 

It just counts the length scrolled in pixels and then applies second style to the element.


----------



## RCuber (Jun 15, 2012)

there is a div with a height of 15px .. if I remove that it it works similarly..
*img821.imageshack.us/img821/7528/faun.jpg

Uploaded with ImageShack.us


----------



## Faun (Jun 15, 2012)

^^not quite what I am looking for

This is the code


```
<script type="text/javascript">
//<![CDATA[
// mini-cart Floater
window.onscroll = function()
{
if (document.documentElement.scrollTop > 135 || window.pageYOffset > 135) {
if(window.navigator.appVersion.indexOf("IE 6.0")!= -1) {
document.getElementById('floater').style.top = (document.documentElement.scrollTop + 15 ) + "px";
} else{
document.getElementById('floater').style.position = 'fixed';
document.getElementById('floater').style.top = '15px';
}
} else if (document.documentElement.scrollTop < 135 || window.pageYOffset < 135) {
document.getElementById('floater').style.position = 'absolute';
document.getElementById('floater').style.top = '150px';
}
}
//]]>
</script>
```

DONE !!! Cool effect IMO.


----------



## RCuber (Jun 16, 2012)

Cool!! Thanks for sharing 

EDIT: Where did you find it?


----------



## abhidev (Jun 16, 2012)

oh.....


----------



## Faun (Jun 21, 2012)

RCuber said:


> Cool!! Thanks for sharing
> 
> EDIT: Where did you find it?



It was in the website itself.


----------

