Creating a Fixed Menu Control

Let's create a menu box in such a way that it will remain at a fixed position and will be available even after scrolling the page.

 

In order to do so,we will make sure that the css of the particular div is defined to make the position as fixed. Also you will find some other css which is only to make the menu worth looking.

 

The style would be as below:

<style>

div.floating-menu
{   position:fixed;
background:#ff6a00;
border:1px solid #ff6a00;
width:150px;
z-index:100;  }

div.floating-menu a, div.floating-menu h3
{  display:block;
margin:0 0.5em; }

</style>

And the div that would use the class be as:

<div class="floating-menu">

                          <a href="#">Link1</a>
                          <a href="#">Link2</a>
                          <a href="#">Link3</a>
                          <a href="#">Link4</a>
                          <a href="#">Link5</a>
 </div>

After doing that the output would be a panel  that would remain fixed irrespective of the scroll.

It's the "position:fixed;" condition that makes the panel fixed.

 

I have tested the same on the below browsers and it's working fine:

• Chrome: Version 43.0.2357.130 m
• IE: IE10  

It might not work in the old browsers so we would have to check it again. 

 

Thanks for reading.