parsgreen.com
article

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

css-float-block

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

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


همان طور که گفتیم، برای ایجاد منوی شناور به صورت عمودی باید از CSS و خاصیت های آن استفاده کنیم، در نمونه کد زیر به همین روش منوی شناوری را در سمت چپ - پائین صفحه نمایش ثابت کرده ایم.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | منوی عمودی شناور</title>
<!-- http://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 مطالب بیشتر:
» آموزش استفاده از فونت فارسی در وب با CSS
» ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3
» تنظیمات css مخصوص مرورگر اینترنت اکسپلورر
» حذف اسکرول افقی (horizontal scroll) با css
» چسبیدن فوتر قالب به پائین صفحه با CSS
commentنظرات (۱۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: محمدحسین
زمان: ۱۲:۳۰:۲۸ - تاریخ: ۱۳۹۲/۱۰/۰۵
سلام! باز هم تشکر بخاطر زحماتتون
برای اینکه متن عمودی ایجاد کنیم روی یک عنصر مثلا همین بلاک ثابت باید چی کنیم؟؟ مرسی
پاسخ: 
سلام
هر چند توصیه می کنیم برای این مورد از المان تصویری استفاده کنید، اما استایل 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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

3 × 8
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...