یکشنبه ۲۳ مرداد ۱۴۰۱

Sunday, August 14, 2022 GMT +4:30
دسته بندی
×

ساخت بلاک شناور عمودی با CSS

css-float-block

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

استایل CSS برای ایجاد منوی شناور


همان طور که گفتیم، برای ایجاد منوی شناور به صورت عمودی باید از CSS و خاصیت های آن استفاده کنیم، در نمونه کد زیر به همین روش منوی شناوری را در سمت چپ - پائین صفحه نمایش ثابت کرده ایم.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | منوی عمودی شناور</title>
<!-- https://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 برای بلاک والد و اصلی استفاده می کنیم.
دسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
مخفی کردن عناصر وب با CSS
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
دیدگاه
more ۲۰ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
نویسنده: کریم
۲۳:۱۷ ۱۳۹۵/۰۹/۲۵
سلام.
یکی از سایت های خوب و قدیمی هستین.
لطفا مطالب جدید بزارید. مرسی
نویسنده: عطاران
۰۲:۱۹ ۱۳۹۸/۱۱/۱۶
سلام
سایت من قسمت های زیادی داره که زیر منوی بعضی از منوها تعدادش زیاد میشه و از صفحه بیرون می زنه و دیده نمیشه میخوام اون زیرمنو هایی که تعدادش زیاده اسکرول بشه چکار باید بکنم
پاسخ: 
برای بررسی دقیق لطفا آدرس سایت را وارد کنید، برای این گونه موارد معمولا از خاصیت overflow یا overflow-y با مقادیر scroll برای بلاک والد استفاده می شود.
نویسنده: سینا الف
۱۲:۵۲ ۱۴۰۰/۰۴/۱۸
باسلام!
من از این آموزش‌ سایت‌تون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت وبگو بابت مطالب مفید و کاربری اش، سوالی درباره ساخت بلاک شناور عمودی داشتم که امیدوارم پاسخ بفرمائید:
1. چرا با وجود اینکه کدها رو به درستی تنظیم و به ویرایش قالبم انتقال دادم، اما منوی شناور نشان داده نمیشه بلکه هرجایی میذارم همانجا با اسکرول صفحه جابجا میشه و ثابت نمی‌مونه؟ خیلی گشتم که با کدام کد یا اسکریپت قبلی تداخل داره اما چیزی خاصی نتونستم پیداکنم. هرچی هم شک داشتم حذف کردم و توفیقی نداشتم با مرورگرها و سیستم‌های مختلف هم چک می‌کردم تا مطمئن باشم کد سالمه. لطفا در این زمینه راهنمایی ام بفرمائید. خیلی ممنون میشم!
پاسخ: 
مشکل از تداخل filter: grayscale(0) با ویژگی position: fixed است، برای رفع این حالت یا grayscale را کلا از استایل تگ body حذف کنید یا در صورت نیاز یک بلاک div داخل body ایجاد و انتهای آن را قبل از بسته شدن body در نظر بگیرید، filter: grayscale را می توانید برای این تگ در نظر بگیرید.
نویسنده: ابوالفضل
۰۶:۴۹ ۱۴۰۰/۰۵/۲۶
سلام، ممنون از بلاگ خوبتون.
این باکس های متن را برای نمایش کدها چطوری درست می کنید؟
پاسخ: 
برای نمایش کدها در باکس مخصوص می توانید از تگ pre و code به شکل نمونه زیر استفاده کنید:
<pre>
<code>
کدها را در این قسمت درج کنید
</code>
</pre>
کدها باید به معادل HTML تبدیل شده باشند به فرض کاراکتر
<
باید به صورت
&lt;
باشد، همچنین برای استایل دهی می توانید از CSS استفاده کنید.
نویسنده: عباس صلاحی
۱۶:۴۹ ۱۴۰۰/۱۰/۱۲
با سلام خدمت شما و تشکر از سایت خوبتون
بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی اسکرول کنار صفحه رو حرکت میدم فقط ستون وسط اسکرول بشه و ستون های چپ و راست کاملا شناور باقی بمونن...
پاسخ: 
برای ایجاد این حالت بهتر است سه بلاک div مجزا داشته باشید چون بین سلول های جدول پیوستگی وجود دارد و به راحتی نمی شود حالت مد نظرتان را ایجاد کرد، اما با سه بلاک مجزا و خاصیت position با مقدار sticky یا fixed می توانیم بلاک های ثابت در هنگام اسکرول داشته باشیم، نمونه کد:
lambdatest.com/blog/css-position-sticky-tutorial
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- تمام دیدگاه ها خوانده شده و برای هر کاربر مدت زمان محدودی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.
- در مواردی که امکان رفع مشکل در زمان متداول میسر نباشد ممکن است نیاز به ارجاع و ثبت سفارش در بخش برنامه نویسی باشد که در اینصورت اطلاع رسانی خواهد شد.



 refresh
10 × 10
3 × 7
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
دانیال
در:
سلام مجدد این شکلی وارد می کنم
۱۴۰۱/۰۵/۲۳

دانیال
در:
سلام، ببخشید من برای تبدیل لینک این کد رو در htaccess نوشتم آدرس کار می کند ولی مشکل این هست که php به من...
۱۴۰۱/۰۵/۲۲

ali
در:
با سلام کلا دستورات جاوا اسکریپ رو چطوری باید به قالب های آماده وردپرس اضافه کنیم؟ مثلا innerHtml که استایل های داخل Html را...
۱۴۰۱/۰۵/۲۲

امیر
در:
با سلام و درود بر شما استاد بسیار عالی بود کارم درست شد از لطف و محبتتون بسیار ممنون و سپاسگزارم در...
۱۴۰۱/۰۵/۱۵

امیر
در:
با سلام و خسته نباشید استاد من دو تا اکشن دارم editp و editpost دسترسی کاربران رو به این دو تا اکشن تعریف کردم...
۱۴۰۱/۰۵/۱۳

امیرحسین
در:
سلام وقت بخیر، من میخواستم داخل شی گرایی php وقتی یک متودی صدا زده میشه چک کنه ببینه اجازه اجرا شدنو داره یا خیر یعنی...
۱۴۰۱/۰۵/۱۲

امیرحسین
در:
سلام استاد وقت بخیر من یه الگویی نوشتم: هر چقدر تعداد داشت محدودیتی نداشته باشه و تک تک عدد های بین کاما را...
۱۴۰۱/۰۵/۰۹

سعید
در:
باسلام با تشکر از شما درست بود و مشکلی نداشت در پناه خدای بزرگ باشید
۱۴۰۱/۰۵/۰۸

سعید
در:
با سلام و خسته نباشید شرط های زیر رو نگاه کنید: اگه دقت کنید می بینید که جفت شرط ها شبیه هم هستند....
۱۴۰۱/۰۵/۰۷

majid
در:
سلام ممنون از آموزشتون اگر بخوایم درون کامنت سایت های خارجی هم لغت لینک دار وارد کنیم با این کدها میشه؟
۱۴۰۱/۰۵/۰۲

امید سلمانی
در:
برای لینک دار کردن عکس از چه خروجی در html استفاده کنیم برای ذخیره سازی من ذخیره می کنم ولی عکس html است من می...
۱۴۰۱/۰۵/۰۲

پـــرتو
در:
چشم در اولین فرصت ارسال می کنم
۱۴۰۱/۰۴/۳۰

پرتو
در:
بعد دیگ اینک یه سوال این رنگ پس زمینه ابی رنگ توی نوار منو افقی کجاست یعنی اینک رنگش کدومه ممنون میشم بگین منتظر جوابتون...
۱۴۰۱/۰۴/۲۸

پرتو
در:
سلام خسته نباشید ببخشید بلاگفا از شمام قطعه یا فقط مال من اینطوریه بعد اینک درست میشه یا نه؟
۱۴۰۱/۰۴/۲۸
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.