Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
ساخت بلاک شناور عمودی با CSS
حتما تا به حال سایت های زیادی را مشاهده کرده اید که در حاشیه صفحات خود منویی به صورت عمودی و شناور را به طور مثال برای بخش تماس یا پشتیبانی در نظر گرفته و نمایش می دهند، شاید برایتان جالب باشد که بدانید این نوع منوها چگونه ساخته می شوند و چگونه می توانید اینچنین ابزاری را به صورت سفارشی برای سایتتان داشته باشید، البته همان طور که می توان حدس زد، این امکان نیز به کمک خواص CSS قابل ایجاد است که در ادامه این آموزش، حتی الامکان به صورت مختصر و مفید می خواهیم نمونه ای از آن را طراحی و بررسی کنیم.

استایل CSS برای ایجاد منوی شناور
همان طور که گفتیم، برای ایجاد منوی شناور به صورت عمودی باید از CSS و خاصیت های آن استفاده کنیم، در نمونه کد زیر به همین روش منوی شناوری را در سمت چپ - پائین صفحه نمایش ثابت کرده ایم.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | منوی عمودی شناور</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    line-height:20px;
    direction:rtl;
    background:#FFF;
    height:1200px;
    overflow-x:hidden;
}
.float-menu{
    display:block;
    position:fixed;        
    width:24px;
    height:100px;
    background-color:#9CF;
    float:left;    
    direction:rtl;
    left:-8px;
    bottom:50px;    
    padding:4px;
    border:1px solid #C5C5C5;
    border-left:0px;
    border-radius:0px 5px 5px 0px;
    -webkit-border-radius:0px 5px 5px 0px;
    box-shadow:0px 0px 5px #E5E5E5;    
    -webkit-box-shadow:0px 0px 5px #E5E5E5;
    -o-box-shadow:0px 0px 5px #E5E5E5;
}
</style>
</head>
<body>
<div class="float-menu">
</div>
<br>
برای ایجاد منوی شناور از خاصیت position، float، left و bottom استفاده می شود.<br>
برای حذف اسکرول افقی (احتمالی) از خاصیت overflow-x با مقادیر hidden استفاده می کنیم.
</body>

پیش نمایش
توضیح:
- خاصیت position با مقادیر fixed باعث ثابت ماندن منو (حتی با اسکرول صفحه) می شود، در صورتی که نمی خواهید منو ثابت باشد، می توانید این خاصیت را با مقدار absolute و... تنظیم کنید که در این صورت باید مقادیر خاصیت left را تغییر دهید.
- تعیین مقدار منفی یا صفر برای خاصیت left باعث می شود که منو در سمت چپ صفحه نمایش قرار بگیرد.
- خاصیت bottom فاصله منو از پائین صفحه نمایش را تنظیم می کند.
- از خاصیت border-radius برای ایجاد گوشه های گرد و از box-shadow برای ایجاد افکت سایه استفاده می شود.
نکته: برای حذف اسکرول افقی (احتمالی) از خاصیت overflow-x با مقادیر hidden برای بلاک والد و اصلی استفاده می کنیم.



1394/05/31 6:49:08 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما