سه شنبه ۲۸ دی ۱۴۰۰

Tuesday, January 18, 2022 GMT +3: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 مطالب بیشتر:
ساخت منوی کشویی با تگ ul li و CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
چسبیدن فوتر قالب به پائین صفحه با 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
6 × 7
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
Bahar
در:
سلام ،کدام لیست ترتیب قرارگیری انها اهمیت نداره؟ ازبین اینها؟
۱۴۰۰/۱۰/۲۷

حدیثه یدی
در:
سلام خسته نباشید ، خیلی وبلاگ خوبی دارید، مطالبتون واقعا مفید بود .. من یک سوالی داشتم می‌خوام برای وبلاگم فونت های مختلف پیدا کنم...
۱۴۰۰/۱۰/۲۶

Fatemeh
در:
سلام چه طوری داخل این کادرهای که ایجاد میشه با این کد متن txt1, txt2 ,... نوشته شود؟
۱۴۰۰/۱۰/۲۵

Fatemeh
در:
سلام وقت بخیر چطوری میتونم موارد زیر رو انجام بدم؟! میشه کمک کنید ممنون! پوسته تارنمای فروشگاه آنالین لوازم خانگی را به صورت زیر...
۱۴۰۰/۱۰/۲۵

سپیده
در:
سلام مجدد لینک صفحه خدمت شما ممنون میشم راهنمایی کنید کدی که توی پیام قبلی ارسال کردین رو کجا باید بگذارم؟
۱۴۰۰/۱۰/۲۳

سپیده
در:
سلام و درود سایتم وردپرس هست و با المنتور طراحی کردم توی صفحه ویرایش حساب کاربران، میخوام فیلد تغییر آدرس ایمیل رو حذف کنم....
۱۴۰۰/۱۰/۲۲

حسین
در:
سلام ببخشید یک سوال داشتم چجوری میشه با زدن یک دکمه کمی بالاتر یا پایین تر برود یا با زدن نوشته ای...
۱۴۰۰/۱۰/۲۲

سپهر
در:
سلام استاد ضمن تشکر از آموزش خوب شما عرض شود بنده دارم یک ربات چت ساده می‌سازم که در بانک اطلاعات خود دو ستون...
۱۴۰۰/۱۰/۲۱

Fatemeh
در:
سلام روز بخیر این کد مشکلش چیه؟!
۱۴۰۰/۱۰/۱۹

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

مهلا
در:
من یه تکه کدی نوشتم با زبان php که 9 عکس دادم با سه سطر و ستون می‌خوام در خروجی این عکسها بطور تصادفی...
۱۴۰۰/۱۰/۱۵

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

وحید
در:
سلام خسته نباشید و ممنون از شما من میخواستم بدونم چطوری میشود فیلم های طولانی در وبلاگ بگذاریم ممنون
۱۴۰۰/۱۰/۱۴

Fatemeh
در:
وقت بخیر متاسفانه من هر کدی مینویسم یه اشکالی داره این کد مشکلش چیه؟🤦🏻‍♀️
۱۴۰۰/۱۰/۱۲

نازنین
در:
اسکریپتی بنویسید که نام و نام خانوادگی و سال تولد شخص را دریافت کرده، علاوه بر نمایش نام و‌ نام خانوادگی در مرورگر، سن فرد...
۱۴۰۰/۱۰/۱۲

عباس صلاحی
در:
با سلام خدمت شما و تشکر از سایت خوبتون بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی...
۱۴۰۰/۱۰/۱۲

Fatemeh
در:
سلام وقت بخیر خسته نباشید این تیکه کد با دستور if چه مشکلی داره!؟
۱۴۰۰/۱۰/۱۲

بابایی
در:
سلام وقت بخیر این آدرس یکی از مقالاتی هست که داخل سایت گذاشتم میخوام یه تغییری بدم که این اعداد وسط لینک آدرس نباشه...
۱۴۰۰/۱۰/۱۲

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

m.b
در:
سلام مجدد تشکر بابت راهنمایی من یک مشکل دیگه برام بوجود آمد و اون اینکه بعد از ارسال اطلاعت به صفحه questions.php بر...
۱۴۰۰/۱۰/۱۱

m.b
در:
سلام من یک فرم طراحی کردم جهت ارسال سوال با صفحه questions.php با متد post به صفحه dbquestions.php ارسال میشود. این نمونه کد های...
۱۴۰۰/۱۰/۱۱

m.b
در:
با سلام ضمن تشکر از وب سایت خوبتان من مطابق کدهای شما عمل کردم و تمامی کدها رو کپی کردم و...
۱۴۰۰/۱۰/۱۱

fateme
در:
سلام ممنون از سایت خوبتون من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم
۱۴۰۰/۱۰/۱۱

مهلا
در:
میخام با php دو تا عدد بنویسم که اگه عدد اول بزرگتر بود 5 بار چاپ کنه که عدد اول بزرگتراست. ممنون میشم جواب بدید...
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
ممنون از پاسخگویی مشکل این یکی کد چیه ؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر مشکل این کد چیه اجرا نمیشه؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر چطوری میتونم یه کد با prompt.window بنویسم که هنگام باز شدن صفحه وب یک عدد از کاربر بگیره و رقم...
۱۴۰۰/۱۰/۱۰

zahra
در:
سلام وقتتون بخیر باشه من میخام از 1 تا 30 روز و برام چاپ کنه یعنی اگر ماه 31 روز بود 1 تا 31 را...
۱۴۰۰/۱۰/۰۸

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

پوریا
در:
سلام وقتتون بخیر اساتید محترم من پلاگین مرغ مگسخوار hummingbird رو روی سایتم نصب کردم (قالب استودیار) و دیدم که پولی شده و هیچیش...
۱۴۰۰/۱۰/۰۴

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