ساخت بلاک شناور عمودی با 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 - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
حذف اسکرول افقی (Horizontal Scroll) با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ساخت منوی کشویی با تگ ul li و CSS
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS

دیدگاه

۲۰ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

Rapid

۰۰:۱۲ ۱۳۹۲/۱۰/۲۹

عالی کامل و مفید بسیار ممنون
این منو رو فکر کنم بشه با جی کوئری هم درست کرد و بهش انیمشین و افکت داد ولی خیلی از طراحان میگن استفاده از جی کوئری برای این کارها بر performance سایت تاثیر بدی میذاره ....

استفاده یا عدم استفاده از جی کئوری به هدف و نیاز سایت بر می گردد، قاعدتا امکانات و جلوه های ویژه جی کئوری خیلی بیشتر از استفاده از CSS یا JavaScript صرف است، اما همیشه هم به این زرق و برق های حجیم نیاز نیست!، می توان با کمی صرف وقت بیشتر، نتیجه مورد نظر را با کدهای ساده تر و سبک تر به دست آورد و سایتی بهینه تر داشت.

علی

۱۶:۳۴ ۱۳۹۲/۱۰/۲۶

ممنون میخونمشون

علی

۱۵:۴۶ ۱۳۹۲/۱۰/۲۴

سلام خسته نباشید
دیدید بعضی از سایت ها می تونن با حساب کاربری مثلا گوگل یا فیس بوک وارد اون سایت بشن بدون اینکه عضو بشن
این چطوری؟
یه همچین اموزشهایی رو هم بذارید خوب میشه

سلام
برخی از این سایت ها قابلیتی به نام 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/

مهدی صفری

۲۰:۲۲ ۱۳۹۲/۱۰/۱۲

سلام
میشه به آدرس زیر دقت کنید:

http://yourdomin.com/single/news/1233

الان در این سایت پوشه ای با نام single و news وجود نداره اما در آدرس استفاده می کنه چه طوری ما هم می توانیم اینگونه آدرس ها را سایت در خود به کار ببریم
با تشکر فراوان از سایت خوب وبگو

سلام
لطفا عبارت "URL Rewrite" را در بخش جستجو وارد کنید، در مطلبی جداگانه به صورت مفصل راجب آن صحبت شده.

محمدحسین

۱۲:۳۰ ۱۳۹۲/۱۰/۰۵

سلام! باز هم تشکر بخاطر زحماتتون
برای اینکه متن عمودی ایجاد کنیم روی یک عنصر مثلا همین بلاک ثابت باید چی کنیم؟؟ مرسی

سلام
هر چند توصیه می کنیم برای این مورد از المان تصویری استفاده کنید، اما استایل 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>

نخست

قبلی

بعدی

آخر

صفحه 2 از 2

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