Sunday, November 4, 2012

Ever seen a site that has a none movable side menu?

It's easy to use with CSS:

DIV.floating-menu
{
    background: white;
    float: left;
    color: black;
    padding: 10px 10px 10px 10px;
    position: fixed;
    text-align: center;
    width: 200px;
    z-index: 100;
}

For IE 9 what works best is replacing: float: left; with: left: 0px;  or if you want you menu on the right: right: 0px; works best in IE 9 because sometimes JavaScript or AJAX changes things that cause a Partial View to be missplaced.

DIV.floating-menu a, DIV floating-menu h3 { background: white; color: Black; font: Arial Bold; margin: 0 0.5em; text-align: center; }

Then in your HTML you just need to do something like this:

<div class="floating-menu">
<!--- your menu goes here --> 
</div>

The key settings in the DIV.floating-menu CSS script are:

float: left;
position: fixed;
z-index: 100;

Again if using IE 9, replace: float: left; with left: 0px; or right: 0px because those work better with JavaScript and/or AJAX.

Any of the other setting is the DIV.floating-menu CSS script may be changed to anything you desire.


 

No comments:

Post a Comment