آموزش برنامه نویسی وب و مهارتهای مرتبط
یکشنبه ۱۵ مهر ۱۴۰۳
Sunday, October 6, 2024 GMT +3:30
Sunday, October 6, 2024 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
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
دیدگاه
۲۰ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.۱۲:۳۰ ۱۳۹۲/۱۰/۰۵
سلام! باز هم تشکر بخاطر زحماتتون
برای اینکه متن عمودی ایجاد کنیم روی یک عنصر مثلا همین بلاک ثابت باید چی کنیم؟؟ مرسی
برای اینکه متن عمودی ایجاد کنیم روی یک عنصر مثلا همین بلاک ثابت باید چی کنیم؟؟ مرسی
سلام
هر چند توصیه می کنیم برای این مورد از المان تصویری استفاده کنید، اما استایل CSS زیر نیز این کار را انجام می دهد:
هر چند توصیه می کنیم برای این مورد از المان تصویری استفاده کنید، اما استایل 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با تشکر فراوان از سایت خوب وبگو
سلام
لطفا عبارت "URL Rewrite" را در بخش جستجو وارد کنید، در مطلبی جداگانه به صورت مفصل راجب آن صحبت شده.
لطفا عبارت "URL Rewrite" را در بخش جستجو وارد کنید، در مطلبی جداگانه به صورت مفصل راجب آن صحبت شده.
علی
۱۵:۴۶ ۱۳۹۲/۱۰/۲۴
سلام خسته نباشید
دیدید بعضی از سایت ها می تونن با حساب کاربری مثلا گوگل یا فیس بوک وارد اون سایت بشن بدون اینکه عضو بشن
این چطوری؟
یه همچین اموزشهایی رو هم بذارید خوب میشه
دیدید بعضی از سایت ها می تونن با حساب کاربری مثلا گوگل یا فیس بوک وارد اون سایت بشن بدون اینکه عضو بشن
این چطوری؟
یه همچین اموزشهایی رو هم بذارید خوب میشه
سلام
برخی از این سایت ها قابلیتی به نام OpenID و برخی نیز API اختصاصی ارائه می کنند.
آموزش برای سایت هایی مانند گوگل:
برخی از این سایت ها قابلیتی به نام 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/علی
۱۶:۳۴ ۱۳۹۲/۱۰/۲۶
ممنون میخونمشون
۰۰:۱۲ ۱۳۹۲/۱۰/۲۹
عالی کامل و مفید بسیار ممنون
این منو رو فکر کنم بشه با جی کوئری هم درست کرد و بهش انیمشین و افکت داد ولی خیلی از طراحان میگن استفاده از جی کوئری برای این کارها بر performance سایت تاثیر بدی میذاره ....
این منو رو فکر کنم بشه با جی کوئری هم درست کرد و بهش انیمشین و افکت داد ولی خیلی از طراحان میگن استفاده از جی کوئری برای این کارها بر performance سایت تاثیر بدی میذاره ....
استفاده یا عدم استفاده از جی کئوری به هدف و نیاز سایت بر می گردد، قاعدتا امکانات و جلوه های ویژه جی کئوری خیلی بیشتر از استفاده از CSS یا JavaScript صرف است، اما همیشه هم به این زرق و برق های حجیم نیاز نیست!، می توان با کمی صرف وقت بیشتر، نتیجه مورد نظر را با کدهای ساده تر و سبک تر به دست آورد و سایتی بهینه تر داشت.
۱۲:۳۹ ۱۳۹۳/۰۲/۲۸
ممنون از آموزشات خوب و جامع تون
از آشنا شدن با سایتتون بسیار خرسندم
از آشنا شدن با سایتتون بسیار خرسندم
۲۲:۳۶ ۱۳۹۳/۰۵/۰۴
مطلب خوبی بود
ممنونم
ممنونم
کبریا
۰۱:۴۳ ۱۳۹۳/۰۶/۲۱
سلام خسته نباشید
واقعا ممنونم از این همه زحمت
یک سوال داشتم و محبت میکنید اگر پاسخ بدید من زیاد از این کد سر در نمیارم میشه بفرمائین اگر بخوام چند تا المان تصویری مثل تماس با ما و .... قرار بدم در این منو چه کار باید بکنم و در کجا باید قرارشون بدم اگر کدها رو برای نمایش بذارید ممنون میشم . یا حق .
واقعا ممنونم از این همه زحمت
یک سوال داشتم و محبت میکنید اگر پاسخ بدید من زیاد از این کد سر در نمیارم میشه بفرمائین اگر بخوام چند تا المان تصویری مثل تماس با ما و .... قرار بدم در این منو چه کار باید بکنم و در کجا باید قرارشون بدم اگر کدها رو برای نمایش بذارید ممنون میشم . یا حق .
سلام
برای انجام تغییرات دلخواه باید HTML بلد باشید، متاسفانه به دلیل کمبود فرصت امکان ارائه کمک بیشتری میسر نیست!
برای انجام تغییرات دلخواه باید HTML بلد باشید، متاسفانه به دلیل کمبود فرصت امکان ارائه کمک بیشتری میسر نیست!
۱۷:۵۲ ۱۳۹۳/۰۸/۲۸
بسیار عالی
خسته نباشید
خسته نباشید
۲۲:۱۶ ۱۳۹۴/۰۳/۲۸
سلام ممنون بابت مطالب ناب و مفیدتون
داوود
۲۰:۱۳ ۱۳۹۴/۰۷/۲۷
سلام آقای مهندس، شبتون بخیر استاد عزیز.
یه سوال امروز برام پیش اومد. ببینید من داشتم یه طراحی رو نگاه می کردم و سعی می کردم مثل اون قالب رو در بیارم. یه جاش بود که برام سوال ایجاد کرد که اگه نیاز بود بگید تا آدرسش رو بفرستم. ببینید طراح اومده بود و به یه المان (عنصر) خاصیت
راستش رو بخواین از این دو تا خاصیت استفاده کرده بود تا 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>داوود
۰۸:۰۴ ۱۳۹۴/۰۷/۲۸
سلام و عرض ادب و صبح بخیر خدمت شما استاد گرامی؛
بسیار ممنونم که با مثال برام توضیح دادین. فقط یک ابهام؛ آقای مهندس ببینید الان در مثالی که شما برام مرقوم داشته و نوشتین؛ خوب اگه من الان بیام به همین child به جای top از margin-top استفاده کنم؛ مگه نباید ارتفاع والد هم افزایش پیدا بکنه و بشه 420px؟؟ ولی الان که به جای top از margin-top استفاده میکنم هیچ اتفاقی در ارتفاع عنصر والد نمیفته!! آیا من بد متوجه شدم؟؟ چون طبق گفته شما الان باید ارتفاع یه 20 پیکسلی افزایش داشته باشه دیگه؟؟
بسیار ممنونم که با مثال برام توضیح دادین. فقط یک ابهام؛ آقای مهندس ببینید الان در مثالی که شما برام مرقوم داشته و نوشتین؛ خوب اگه من الان بیام به همین child به جای top از margin-top استفاده کنم؛ مگه نباید ارتفاع والد هم افزایش پیدا بکنه و بشه 420px؟؟ ولی الان که به جای top از margin-top استفاده میکنم هیچ اتفاقی در ارتفاع عنصر والد نمیفته!! آیا من بد متوجه شدم؟؟ چون طبق گفته شما الان باید ارتفاع یه 20 پیکسلی افزایش داشته باشه دیگه؟؟
منظور از ارتفاع، فضایی است که بلاک اشغال می کند! (با ابزار Inspector بررسی کنید)، در واقع این حالت را زمانی بیشتر درک می کنید که چندین بلاک در کنار هم و در ارتباط با هم باشند تا تاثیر افزایش یا کاهش margin ملموس تر باشد!
داوود
۰۹:۵۹ ۱۳۹۴/۰۷/۲۸
سلام؛
آقای مهندس با توجه به اینکه الان اینجا (در اعطای خاصیت ها به float-menu)داریم میگیم left اینقدر باشه، بازهم نیاز هست که بهش float بدیم؟؟ چون وقتی که میگیم left و positon هم بهش تعلق گرفته دیگه خودش میدونه باید کجا قرار بگیره یا اینکه نیازه برای سایر عناصر جانبی که میخوان در کنارش قرار بگیرن؟؟
ممنونم ازتون.
آقای مهندس با توجه به اینکه الان اینجا (در اعطای خاصیت ها به float-menu)داریم میگیم left اینقدر باشه، بازهم نیاز هست که بهش float بدیم؟؟ چون وقتی که میگیم left و positon هم بهش تعلق گرفته دیگه خودش میدونه باید کجا قرار بگیره یا اینکه نیازه برای سایر عناصر جانبی که میخوان در کنارش قرار بگیرن؟؟
ممنونم ازتون.
سلام
float معمولا در عناصر داخلی و برای ثبات در یک جهت استفاده می شود، اما left و... زمانی است که عنصر معمولا در بالاترین سطح و به صورت positioned است، بنابراین کاربرد این دو با هم متفاوت است، با این تفسیر در مورد این مثال، در حالت فعلی امکان حذف float وجود دارد!
float معمولا در عناصر داخلی و برای ثبات در یک جهت استفاده می شود، اما left و... زمانی است که عنصر معمولا در بالاترین سطح و به صورت positioned است، بنابراین کاربرد این دو با هم متفاوت است، با این تفسیر در مورد این مثال، در حالت فعلی امکان حذف float وجود دارد!
۲۱:۳۲ ۱۳۹۵/۰۲/۳۰
سلام خدمت شما عزیزان زحمتکش وبسایت وبگو،
من علاقه زیاده به طراحی صفحات وب و طراحی قالب و طراحی برنامه های تحت وب دارم.
لطفا اگه میشه پاسخ سوالات منو بدید.
یک - برای کارهای که بالا ذکر کردم بنده باید از کجا شروع کنم.
دو - من کمی اچ تی ام ال و سی اس اس رو بلدم آیا کمکم میکنه.
سه - آیا منبع کاملی موجود هست که با تهیه آن بتوانم به این هدف دست پیدا کنم. اگر بله لطفا معرفی کنید.
با تشکر از شما بابت همه این مطالب مفید و رایگان.
موفق باشید
من علاقه زیاده به طراحی صفحات وب و طراحی قالب و طراحی برنامه های تحت وب دارم.
لطفا اگه میشه پاسخ سوالات منو بدید.
یک - برای کارهای که بالا ذکر کردم بنده باید از کجا شروع کنم.
دو - من کمی اچ تی ام ال و سی اس اس رو بلدم آیا کمکم میکنه.
سه - آیا منبع کاملی موجود هست که با تهیه آن بتوانم به این هدف دست پیدا کنم. اگر بله لطفا معرفی کنید.
با تشکر از شما بابت همه این مطالب مفید و رایگان.
موفق باشید
برای مواردی که ذکر کردید در مجموع باید زبان های مرتبط در وب را بیاموزید که به صورت پایه ای از مبانی وب، HTML و CSS شروع و در گام های بعدی شامل JavaScript و jQuery + AJAX می شود، همچنین برای طراحی برنامه های تحت وب باید یک زبان سمت سرور مانند PHP و کار با دیتابیس MySQL را یاد بگیرید، برای یادگیری نیز مباحث چند وبسیات متفاوت را هم زمان دنبال و در هر مورد که به مشکل برخوردید، در وب جستجو کنید! این بهترین شیوه است چون تقریبا هیچ منبعی وجود ندارد که از همه لحاظ کامل باشد، مدت زمان یادگیری برای رسیدن به حد مطلوب، بسته به اطلاعات مقدماتی، استعداد و علاقه شما در این زمینه، می تواند متغیر باشد.
۰۹:۳۰ ۱۳۹۵/۰۵/۱۳
سلام ممنون بابت سایت خوبتون واقعا نمیدونم چجوری تشکر کنم امیدوارم موفق باشید همیشه
صفحه 1 از 2آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.سیدعباسی
با سلام من میخوام از متن زیر لینکش رو دربیارم و در آخر مقدار 3088 رو بصورت خروجی نهایی داشته باشم با...۱۴۰۳/۰۷/۰۷
مجتبی
سلام وقت بخیر میخوام یک روز به تاریخ دریافتی اضافه شه ممنون میشم راهنمایی کنید۱۴۰۳/۰۶/۲۰
پرتو
سلام خوبید؟ خسته نباشیذ ببخشید مزاحم شدم می خواستم بگم من به شما ایمیل زدم ولی هنوز شما جواب ندادین می تونم بپرسم چرا سوال...۱۴۰۳/۰۶/۱۵
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.