آموزش برنامه نویسی وب و مهارتهای مرتبط
پنجشنبه ۰۴ اردیبهشت ۱۴۰۴
Thursday, April 24, 2025 GMT +3:30
Thursday, April 24, 2025 GMT +3:30
ساخت بلاک شناور عمودی با CSS
حتما تا به حال سایت های زیادی را مشاهده کرده اید که در حاشیه صفحات خود منویی به صورت عمودی و شناور را به طور مثال برای بخش تماس یا پشتیبانی در نظر گرفته و نمایش می دهند، شاید برایتان جالب باشد که بدانید این نوع منوها چگونه ساخته می شوند و چگونه می توانید اینچنین ابزاری را به صورت سفارشی برای سایتتان داشته باشید، البته همان طور که می توان حدس زد، این امکان نیز به کمک خواص 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
« بعدی
مطالب بیشتر:تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
ساخت منوی کشویی با تگ ul li و CSS
آموزش استفاده از فونت فارسی در وب با CSS
دیدگاه
۲۰ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.عباس صلاحی
۱۶:۴۹ ۱۴۰۰/۱۰/۱۲
با سلام خدمت شما و تشکر از سایت خوبتون
بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی اسکرول کنار صفحه رو حرکت میدم فقط ستون وسط اسکرول بشه و ستون های چپ و راست کاملا شناور باقی بمونن...
بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی اسکرول کنار صفحه رو حرکت میدم فقط ستون وسط اسکرول بشه و ستون های چپ و راست کاملا شناور باقی بمونن...
برای ایجاد این حالت بهتر است سه بلاک div مجزا داشته باشید چون بین سلول های جدول پیوستگی وجود دارد و به راحتی نمی شود حالت مد نظرتان را ایجاد کرد، اما با سه بلاک مجزا و خاصیت position با مقدار sticky یا fixed می توانیم بلاک های ثابت در هنگام اسکرول داشته باشیم، نمونه کد:
lambdatest.com/blog/css-position-sticky-tutorial۰۶:۴۹ ۱۴۰۰/۰۵/۲۶
سلام، ممنون از بلاگ خوبتون.
این باکس های متن را برای نمایش کدها چطوری درست می کنید؟
این باکس های متن را برای نمایش کدها چطوری درست می کنید؟
برای نمایش کدها در باکس مخصوص می توانید از تگ pre و code به شکل نمونه زیر استفاده کنید:
<pre>
<code>
کدها را در این قسمت درج کنید
</code>
</pre><<۱۲:۵۲ ۱۴۰۰/۰۴/۱۸
باسلام!
من از این آموزش سایتتون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت وبگو بابت مطالب مفید و کاربری اش، سوالی درباره ساخت بلاک شناور عمودی داشتم که امیدوارم پاسخ بفرمائید:
1. چرا با وجود اینکه کدها رو به درستی تنظیم و به ویرایش قالبم انتقال دادم، اما منوی شناور نشان داده نمیشه بلکه هرجایی میذارم همانجا با اسکرول صفحه جابجا میشه و ثابت نمی‌مونه؟ خیلی گشتم که با کدام کد یا اسکریپت قبلی تداخل داره اما چیزی خاصی نتونستم پیداکنم. هرچی هم شک داشتم حذف کردم و توفیقی نداشتم با مرورگرها و سیستم‌های مختلف هم چک می‌کردم تا مطمئن باشم کد سالمه. لطفا در این زمینه راهنمایی ام بفرمائید. خیلی ممنون میشم!
من از این آموزش سایتتون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت وبگو بابت مطالب مفید و کاربری اش، سوالی درباره ساخت بلاک شناور عمودی داشتم که امیدوارم پاسخ بفرمائید:
1. چرا با وجود اینکه کدها رو به درستی تنظیم و به ویرایش قالبم انتقال دادم، اما منوی شناور نشان داده نمیشه بلکه هرجایی میذارم همانجا با اسکرول صفحه جابجا میشه و ثابت نمی‌مونه؟ خیلی گشتم که با کدام کد یا اسکریپت قبلی تداخل داره اما چیزی خاصی نتونستم پیداکنم. هرچی هم شک داشتم حذف کردم و توفیقی نداشتم با مرورگرها و سیستم‌های مختلف هم چک می‌کردم تا مطمئن باشم کد سالمه. لطفا در این زمینه راهنمایی ام بفرمائید. خیلی ممنون میشم!
مشکل از تداخل filter: grayscale(0) با ویژگی position: fixed است، برای رفع این حالت یا grayscale را کلا از استایل تگ body حذف کنید یا در صورت نیاز یک بلاک div داخل body ایجاد و انتهای آن را قبل از بسته شدن body در نظر بگیرید، filter: grayscale را می توانید برای این تگ در نظر بگیرید.
عطاران
۰۲:۱۹ ۱۳۹۸/۱۱/۱۶
سلام
سایت من قسمت های زیادی داره که زیر منوی بعضی از منوها تعدادش زیاد میشه و از صفحه بیرون می زنه و دیده نمیشه میخوام اون زیرمنو هایی که تعدادش زیاده اسکرول بشه چکار باید بکنم
سایت من قسمت های زیادی داره که زیر منوی بعضی از منوها تعدادش زیاد میشه و از صفحه بیرون می زنه و دیده نمیشه میخوام اون زیرمنو هایی که تعدادش زیاده اسکرول بشه چکار باید بکنم
برای بررسی دقیق لطفا آدرس سایت را وارد کنید، برای این گونه موارد معمولا از خاصیت overflow یا overflow-y با مقادیر scroll برای بلاک والد استفاده می شود.
۲۳:۱۷ ۱۳۹۵/۰۹/۲۵
سلام.
یکی از سایت های خوب و قدیمی هستین.
لطفا مطالب جدید بزارید. مرسی
یکی از سایت های خوب و قدیمی هستین.
لطفا مطالب جدید بزارید. مرسی
۰۹:۳۰ ۱۳۹۵/۰۵/۱۳
سلام ممنون بابت سایت خوبتون واقعا نمیدونم چجوری تشکر کنم امیدوارم موفق باشید همیشه
۲۱:۳۲ ۱۳۹۵/۰۲/۳۰
سلام خدمت شما عزیزان زحمتکش وبسایت وبگو،
من علاقه زیاده به طراحی صفحات وب و طراحی قالب و طراحی برنامه های تحت وب دارم.
لطفا اگه میشه پاسخ سوالات منو بدید.
یک - برای کارهای که بالا ذکر کردم بنده باید از کجا شروع کنم.
دو - من کمی اچ تی ام ال و سی اس اس رو بلدم آیا کمکم میکنه.
سه - آیا منبع کاملی موجود هست که با تهیه آن بتوانم به این هدف دست پیدا کنم. اگر بله لطفا معرفی کنید.
با تشکر از شما بابت همه این مطالب مفید و رایگان.
موفق باشید
من علاقه زیاده به طراحی صفحات وب و طراحی قالب و طراحی برنامه های تحت وب دارم.
لطفا اگه میشه پاسخ سوالات منو بدید.
یک - برای کارهای که بالا ذکر کردم بنده باید از کجا شروع کنم.
دو - من کمی اچ تی ام ال و سی اس اس رو بلدم آیا کمکم میکنه.
سه - آیا منبع کاملی موجود هست که با تهیه آن بتوانم به این هدف دست پیدا کنم. اگر بله لطفا معرفی کنید.
با تشکر از شما بابت همه این مطالب مفید و رایگان.
موفق باشید
برای مواردی که ذکر کردید در مجموع باید زبان های مرتبط در وب را بیاموزید که به صورت پایه ای از مبانی وب، HTML و CSS شروع و در گام های بعدی شامل JavaScript و jQuery + AJAX می شود، همچنین برای طراحی برنامه های تحت وب باید یک زبان سمت سرور مانند PHP و کار با دیتابیس MySQL را یاد بگیرید، برای یادگیری نیز مباحث چند وبسیات متفاوت را هم زمان دنبال و در هر مورد که به مشکل برخوردید، در وب جستجو کنید! این بهترین شیوه است چون تقریبا هیچ منبعی وجود ندارد که از همه لحاظ کامل باشد، مدت زمان یادگیری برای رسیدن به حد مطلوب، بسته به اطلاعات مقدماتی، استعداد و علاقه شما در این زمینه، می تواند متغیر باشد.
داوود
۰۹:۵۹ ۱۳۹۴/۰۷/۲۸
سلام؛
آقای مهندس با توجه به اینکه الان اینجا (در اعطای خاصیت ها به float-menu)داریم میگیم left اینقدر باشه، بازهم نیاز هست که بهش float بدیم؟؟ چون وقتی که میگیم left و positon هم بهش تعلق گرفته دیگه خودش میدونه باید کجا قرار بگیره یا اینکه نیازه برای سایر عناصر جانبی که میخوان در کنارش قرار بگیرن؟؟
ممنونم ازتون.
آقای مهندس با توجه به اینکه الان اینجا (در اعطای خاصیت ها به float-menu)داریم میگیم left اینقدر باشه، بازهم نیاز هست که بهش float بدیم؟؟ چون وقتی که میگیم left و positon هم بهش تعلق گرفته دیگه خودش میدونه باید کجا قرار بگیره یا اینکه نیازه برای سایر عناصر جانبی که میخوان در کنارش قرار بگیرن؟؟
ممنونم ازتون.
سلام
float معمولا در عناصر داخلی و برای ثبات در یک جهت استفاده می شود، اما left و... زمانی است که عنصر معمولا در بالاترین سطح و به صورت positioned است، بنابراین کاربرد این دو با هم متفاوت است، با این تفسیر در مورد این مثال، در حالت فعلی امکان حذف float وجود دارد!
float معمولا در عناصر داخلی و برای ثبات در یک جهت استفاده می شود، اما left و... زمانی است که عنصر معمولا در بالاترین سطح و به صورت positioned است، بنابراین کاربرد این دو با هم متفاوت است، با این تفسیر در مورد این مثال، در حالت فعلی امکان حذف float وجود دارد!
داوود
۰۸:۰۴ ۱۳۹۴/۰۷/۲۸
سلام و عرض ادب و صبح بخیر خدمت شما استاد گرامی؛
بسیار ممنونم که با مثال برام توضیح دادین. فقط یک ابهام؛ آقای مهندس ببینید الان در مثالی که شما برام مرقوم داشته و نوشتین؛ خوب اگه من الان بیام به همین child به جای top از margin-top استفاده کنم؛ مگه نباید ارتفاع والد هم افزایش پیدا بکنه و بشه 420px؟؟ ولی الان که به جای top از margin-top استفاده میکنم هیچ اتفاقی در ارتفاع عنصر والد نمیفته!! آیا من بد متوجه شدم؟؟ چون طبق گفته شما الان باید ارتفاع یه 20 پیکسلی افزایش داشته باشه دیگه؟؟
بسیار ممنونم که با مثال برام توضیح دادین. فقط یک ابهام؛ آقای مهندس ببینید الان در مثالی که شما برام مرقوم داشته و نوشتین؛ خوب اگه من الان بیام به همین child به جای top از margin-top استفاده کنم؛ مگه نباید ارتفاع والد هم افزایش پیدا بکنه و بشه 420px؟؟ ولی الان که به جای top از margin-top استفاده میکنم هیچ اتفاقی در ارتفاع عنصر والد نمیفته!! آیا من بد متوجه شدم؟؟ چون طبق گفته شما الان باید ارتفاع یه 20 پیکسلی افزایش داشته باشه دیگه؟؟
منظور از ارتفاع، فضایی است که بلاک اشغال می کند! (با ابزار Inspector بررسی کنید)، در واقع این حالت را زمانی بیشتر درک می کنید که چندین بلاک در کنار هم و در ارتباط با هم باشند تا تاثیر افزایش یا کاهش margin ملموس تر باشد!
داوود
۲۰:۱۳ ۱۳۹۴/۰۷/۲۷
سلام آقای مهندس، شبتون بخیر استاد عزیز.
یه سوال امروز برام پیش اومد. ببینید من داشتم یه طراحی رو نگاه می کردم و سعی می کردم مثل اون قالب رو در بیارم. یه جاش بود که برام سوال ایجاد کرد که اگه نیاز بود بگید تا آدرسش رو بفرستم. ببینید طراح اومده بود و به یه المان (عنصر) خاصیت
راستش رو بخواین از این دو تا خاصیت استفاده کرده بود تا callout رو دقیقا در وسط یه منو قرار بده . ولی من با استفاده از خاصیت
ممنونم ازتون.
یه سوال امروز برام پیش اومد. ببینید من داشتم یه طراحی رو نگاه می کردم و سعی می کردم مثل اون قالب رو در بیارم. یه جاش بود که برام سوال ایجاد کرد که اگه نیاز بود بگید تا آدرسش رو بفرستم. ببینید طراح اومده بود و به یه المان (عنصر) خاصیت
position:absoluteراستش رو بخواین از این دو تا خاصیت استفاده کرده بود تا callout رو دقیقا در وسط یه منو قرار بده . ولی من با استفاده از خاصیت
top:40%ممنونم ازتون.
سلام
این دو خاصیت تا حدودی شبیه به هم هستند، منتها با چند تفاوت:
- خاصیت top برای مواقعی استفاده می شود که یک بلاک به صورت
- خاصیت margin-top برای حالت معمول است و در این صورت میزان اعمال شده، بر روی عنصر والد نیز تاثیرگذار است، به طور مثال اگر به یک بلاک درونی margin-top اضافه کنید، به همان نسبت به ارتفاع بلاک والد آن نیز اضافه می شود، این تاثیر در حالت top وجود ندارد!
این دو خاصیت تا حدودی شبیه به هم هستند، منتها با چند تفاوت:
- خاصیت top برای مواقعی استفاده می شود که یک بلاک به صورت
position:absolute- خاصیت margin-top برای حالت معمول است و در این صورت میزان اعمال شده، بر روی عنصر والد نیز تاثیرگذار است، به طور مثال اگر به یک بلاک درونی margin-top اضافه کنید، به همان نسبت به ارتفاع بلاک والد آن نیز اضافه می شود، این تاثیر در حالت top وجود ندارد!
<style type="text/css">
.parent{
position:relative;
margin-top:50px;
height:400px;
width:400px;
background:#EB272B;
}
.child{
position:absolute;
top:20px;
height:200px;
width:200px;
background:#1FCB78;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>۲۲:۱۶ ۱۳۹۴/۰۳/۲۸
سلام ممنون بابت مطالب ناب و مفیدتون
۱۷:۵۲ ۱۳۹۳/۰۸/۲۸
بسیار عالی
خسته نباشید
خسته نباشید
کبریا
۰۱:۴۳ ۱۳۹۳/۰۶/۲۱
سلام خسته نباشید
واقعا ممنونم از این همه زحمت
یک سوال داشتم و محبت میکنید اگر پاسخ بدید من زیاد از این کد سر در نمیارم میشه بفرمائین اگر بخوام چند تا المان تصویری مثل تماس با ما و .... قرار بدم در این منو چه کار باید بکنم و در کجا باید قرارشون بدم اگر کدها رو برای نمایش بذارید ممنون میشم . یا حق .
واقعا ممنونم از این همه زحمت
یک سوال داشتم و محبت میکنید اگر پاسخ بدید من زیاد از این کد سر در نمیارم میشه بفرمائین اگر بخوام چند تا المان تصویری مثل تماس با ما و .... قرار بدم در این منو چه کار باید بکنم و در کجا باید قرارشون بدم اگر کدها رو برای نمایش بذارید ممنون میشم . یا حق .
سلام
برای انجام تغییرات دلخواه باید HTML بلد باشید، متاسفانه به دلیل کمبود فرصت امکان ارائه کمک بیشتری میسر نیست!
برای انجام تغییرات دلخواه باید HTML بلد باشید، متاسفانه به دلیل کمبود فرصت امکان ارائه کمک بیشتری میسر نیست!
۲۲:۳۶ ۱۳۹۳/۰۵/۰۴
مطلب خوبی بود
ممنونم
ممنونم
۱۲:۳۹ ۱۳۹۳/۰۲/۲۸
ممنون از آموزشات خوب و جامع تون
از آشنا شدن با سایتتون بسیار خرسندم
از آشنا شدن با سایتتون بسیار خرسندم
صفحه 1 از 2 محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.