در این مقاله نحوه ایجاد یک پنل منوی ثابت در صفحه را بررسی خواهیم نمود.

ایجاد یک پنل منوی صفحه در هر موقعیت ثابت است و حتی قابل دسترسی بعد از Scroll کردن صفحه می باشد. برای انجام این کار در css تگ<style> یک div  برای موقعیت صفحه به عنوان ثابت تعریف می کنیم.

نمونه کد زیر را مشاهده نمایید :

<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>  

در ادامه کد ، یک کلاس در تگ div برای ساخت یک پنل منو ایجاد کردیم.

<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>  

 در خروجی صفحه مشاهده می کنید که با scroll کردن صفحه ، پنل منو ثابت می ماند. 

در واقع شرط ";position:fixed"  باعث می شود که پنل در موقعیت ثابت بماند.