تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


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


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>سفارش.نت| منوی عمودی شناور</title>
<!-- http://sefaresh.net -->
<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 برای بلاک والد و اصلی استفاده می کنیم.


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین