دسته بندی
×
article

ساخت بلاک شناور عمودی با 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 برای بلاک والد و اصلی استفاده می کنیم.
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» ساخت منوی کشویی با تگ ul li و CSS
» ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
» حذف اسکرول افقی (Horizontal Scroll) با CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» آموزش استفاده از فونت فارسی در وب با CSS
commentنظرات (۱۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: محمدحسین
۱۲:۳۰ ۱۳۹۲/۱۰/۰۵
سلام! باز هم تشکر بخاطر زحماتتون
برای اینکه متن عمودی ایجاد کنیم روی یک عنصر مثلا همین بلاک ثابت باید چی کنیم؟؟ مرسی
پاسخ: 
سلام
هر چند توصیه می کنیم برای این مورد از المان تصویری استفاده کنید، اما استایل CSS زیر نیز این کار را انجام می دهد:
<style type="text/css">
.vertical-text{
font-family:Tahoma, Geneva, sans-serif;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
white-space:nowrap;
color:#333;
width:20px;
height:20px;
bottom:0px;
border:0px solid #CCC;
}
</style>
<div class="vertical-text">نمایش متن به صورت عمودی</div>
نویسنده: مهدی صفری
۲۰:۲۲ ۱۳۹۲/۱۰/۱۲
سلام
میشه به آدرس زیر دقت کنید:
http://yourdomin.com/single/news/1233
الان در این سایت پوشه ای با نام single و news وجود نداره اما در آدرس استفاده می کنه چه طوری ما هم می توانیم اینگونه آدرس ها را سایت در خود به کار ببریم
با تشکر فراوان از سایت خوب وبگو
پاسخ: 
سلام
لطفا عبارت "URL Rewrite" را در بخش جستجو وارد کنید، در مطلبی جداگانه به صورت مفصل راجب آن صحبت شده.
نویسنده: علی
۱۵:۴۶ ۱۳۹۲/۱۰/۲۴
سلام خسته نباشید
دیدید بعضی از سایت ها می تونن با حساب کاربری مثلا گوگل یا فیس بوک وارد اون سایت بشن بدون اینکه عضو بشن
این چطوری؟
یه همچین اموزشهایی رو هم بذارید خوب میشه
پاسخ: 
سلام
برخی از این سایت ها قابلیتی به نام OpenID و برخی نیز API اختصاصی ارائه می کنند.
آموزش برای سایت هایی مانند گوگل:
https://gitorious.org/lightopenid
http://gitorious.org/lightopenid/lightopenid/blobs/master/example-google.php
http://qpleple.com/how-to-make-people-login-into-your-website-with-their-google-account/
آموزش برای فیس بوک:
http://qpleple.com/authenticate-users-with-their-facebook-account/
نویسنده: علی
۱۶:۳۴ ۱۳۹۲/۱۰/۲۶
ممنون میخونمشون
نویسنده: Rapid
۰۰:۱۲ ۱۳۹۲/۱۰/۲۹
عالی کامل و مفید بسیار ممنون
این منو رو فکر کنم بشه با جی کوئری هم درست کرد و بهش انیمشین و افکت داد ولی خیلی از طراحان میگن استفاده از جی کوئری برای این کارها بر performance سایت تاثیر بدی میذاره ....
پاسخ: 
استفاده یا عدم استفاده از جی کئوری به هدف و نیاز سایت بر می گردد، قاعدتا امکانات و جلوه های ویژه جی کئوری خیلی بیشتر از استفاده از CSS یا JavaScript صرف است، اما همیشه هم به این زرق و برق های حجیم نیاز نیست!، می توان با کمی صرف وقت بیشتر، نتیجه مورد نظر را با کدهای ساده تر و سبک تر به دست آورد و سایتی بهینه تر داشت.
نویسنده: استخر بادی
۱۲:۳۹ ۱۳۹۳/۰۲/۲۸
ممنون از آموزشات خوب و جامع تون
از آشنا شدن با سایتتون بسیار خرسندم
نویسنده: هادی
۲۲:۳۶ ۱۳۹۳/۰۵/۰۴
مطلب خوبی بود
ممنونم
نویسنده: کبریا
۰۱:۴۳ ۱۳۹۳/۰۶/۲۱
سلام خسته نباشید
واقعا ممنونم از این همه زحمت
یک سوال داشتم و محبت میکنید اگر پاسخ بدید من زیاد از این کد سر در نمیارم میشه بفرمائین اگر بخوام چند تا المان تصویری مثل تماس با ما و .... قرار بدم در این منو چه کار باید بکنم و در کجا باید قرارشون بدم اگر کدها رو برای نمایش بذارید ممنون میشم . یا حق .
پاسخ: 
سلام
برای انجام تغییرات دلخواه باید HTML بلد باشید، متاسفانه به دلیل کمبود فرصت امکان ارائه کمک بیشتری میسر نیست!
نویسنده: یاس98
۱۷:۵۲ ۱۳۹۳/۰۸/۲۸
بسیار عالی
خسته نباشید
نویسنده: جوکار
۲۲:۱۶ ۱۳۹۴/۰۳/۲۸
سلام ممنون بابت مطالب ناب و مفیدتون
نویسنده: داوود
۲۰:۱۳ ۱۳۹۴/۰۷/۲۷
سلام آقای مهندس، شبتون بخیر استاد عزیز.
یه سوال امروز برام پیش اومد. ببینید من داشتم یه طراحی رو نگاه می کردم و سعی می کردم مثل اون قالب رو در بیارم. یه جاش بود که برام سوال ایجاد کرد که اگه نیاز بود بگید تا آدرسش رو بفرستم. ببینید طراح اومده بود و به یه المان (عنصر) خاصیت
position:absolute
رو اعمال کرده بود. حالا اومده بود و هم بهش top داده بود و هم margin-top میخواستم ببینم در این مواقع این دو تا با همدیگه چه فرقی دارن؟؟ مگه وقتی که position میدیم، بازهم نیاز هستش که margin-top رو استفاده کنیم؟؟ خوب میایم و از همون top استفاده می کنیم دیگه.
راستش رو بخواین از این دو تا خاصیت استفاده کرده بود تا callout رو دقیقا در وسط یه منو قرار بده . ولی من با استفاده از خاصیت
top:40%
تونستم همون کار رو بدون اینکه بیام و به margin-top خاصیت عدد منفی اعمال کنم رو انجام بدم.
ممنونم ازتون.
پاسخ: 
سلام
این دو خاصیت تا حدودی شبیه به هم هستند، منتها با چند تفاوت:
- خاصیت top برای مواقعی استفاده می شود که یک بلاک به صورت
position:absolute
و بلاک والد آن در حالت positioned باشد (یعنی یک position برای آن اعمال شده باشد، در غیر این صورت top از سند html حساب می شود)، در واقع این خاصیت روی عناصر شناور اعمال می شود و فاصله عنصر از والد (در صورتی که positioned باشد) را مشخص می کند (اگر position عنصر والد به صورت static باشد نیز top از سند html حساب می شود).
- خاصیت 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>
نویسنده: داوود
۰۸:۰۴ ۱۳۹۴/۰۷/۲۸
سلام و عرض ادب و صبح بخیر خدمت شما استاد گرامی؛
بسیار ممنونم که با مثال برام توضیح دادین. فقط یک ابهام؛ آقای مهندس ببینید الان در مثالی که شما برام مرقوم داشته و نوشتین؛ خوب اگه من الان بیام به همین child به جای top از margin-top استفاده کنم؛ مگه نباید ارتفاع والد هم افزایش پیدا بکنه و بشه 420px؟؟ ولی الان که به جای top از margin-top استفاده میکنم هیچ اتفاقی در ارتفاع عنصر والد نمیفته!! آیا من بد متوجه شدم؟؟ چون طبق گفته شما الان باید ارتفاع یه 20 پیکسلی افزایش داشته باشه دیگه؟؟
پاسخ: 
منظور از ارتفاع، فضایی است که بلاک اشغال می کند! (با ابزار Inspector بررسی کنید)، در واقع این حالت را زمانی بیشتر درک می کنید که چندین بلاک در کنار هم و در ارتباط با هم باشند تا تاثیر افزایش یا کاهش margin ملموس تر باشد!
نویسنده: داوود
۰۹:۵۹ ۱۳۹۴/۰۷/۲۸
سلام؛
آقای مهندس با توجه به اینکه الان اینجا (در اعطای خاصیت ها به float-menu)داریم میگیم left اینقدر باشه، بازهم نیاز هست که بهش float بدیم؟؟ چون وقتی که میگیم left و positon هم بهش تعلق گرفته دیگه خودش میدونه باید کجا قرار بگیره یا اینکه نیازه برای سایر عناصر جانبی که میخوان در کنارش قرار بگیرن؟؟
ممنونم ازتون.
پاسخ: 
سلام
float معمولا در عناصر داخلی و برای ثبات در یک جهت استفاده می شود، اما left و... زمانی است که عنصر معمولا در بالاترین سطح و به صورت positioned است، بنابراین کاربرد این دو با هم متفاوت است، با این تفسیر در مورد این مثال، در حالت فعلی امکان حذف float وجود دارد!
نویسنده: mohammad rajabi
۲۱:۳۲ ۱۳۹۵/۰۲/۳۰
سلام خدمت شما عزیزان زحمتکش وبسایت وبگو،
من علاقه زیاده به طراحی صفحات وب و طراحی قالب و طراحی برنامه های تحت وب دارم.
لطفا اگه میشه پاسخ سوالات منو بدید.
یک - برای کارهای که بالا ذکر کردم بنده باید از کجا شروع کنم.
دو - من کمی اچ تی ام ال و سی اس اس رو بلدم آیا کمکم میکنه.
سه - آیا منبع کاملی موجود هست که با تهیه آن بتوانم به این هدف دست پیدا کنم. اگر بله لطفا معرفی کنید.
با تشکر از شما بابت همه این مطالب مفید و رایگان.
موفق باشید
پاسخ: 
برای مواردی که ذکر کردید در مجموع باید زبان های مرتبط در وب را بیاموزید که به صورت پایه ای از مبانی وب، HTML و CSS شروع و در گام های بعدی شامل JavaScript و jQuery + AJAX می شود، همچنین برای طراحی برنامه های تحت وب باید یک زبان سمت سرور مانند PHP و کار با دیتابیس MySQL را یاد بگیرید، برای یادگیری نیز مباحث چند وبسیات متفاوت را هم زمان دنبال و در هر مورد که به مشکل برخوردید، در وب جستجو کنید! این بهترین شیوه است چون تقریبا هیچ منبعی وجود ندارد که از همه لحاظ کامل باشد، مدت زمان یادگیری برای رسیدن به حد مطلوب، بسته به اطلاعات مقدماتی، استعداد و علاقه شما در این زمینه، می تواند متغیر باشد.
۰۹:۳۰ ۱۳۹۵/۰۵/۱۳
سلام ممنون بابت سایت خوبتون واقعا نمیدونم چجوری تشکر کنم امیدوارم موفق باشید همیشه
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





2 × 9
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.