سوال: چگونه یک منوی شناور در کنار صفحه بسازم؟ [بایگانی]

Ali0Boy

یک شنبه 13 فروردین 1391, 23:59 عصر

باسلام دوستان
شاید خیلی از سایت ها دیده باشید که یک منوی شناور در کناره ی صفحه دارند و با تغییر scroll صفحه آن منو نیز موقعیت خود را تغییر داده و به جایی از صفحه منتقل می شود که قابل رویت باشد. برای ساخت این نوع منوی شناور چه باید کرد؟

باتشکر

cyrusthegreat

دوشنبه 14 فروردین 1391, 00:07 صبح

دوست عزیز

اگر من منظور شمارو درست گرفته باشم، شما با دایو والد کل منوت، این مقادیر CSS رو باید اضافه کنی:

parentDivSelector {
position: fixed;
/* Use Top or Bottom, Left Or Right To Adjust Menu Location */
}

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

parentDivSelector {
position: fixed;
right: 0;
bottom: 0;
}

Ali0Boy

دوشنبه 14 فروردین 1391, 00:28 صبح

دوست عزیز

اگر من منظور شمارو درست گرفته باشم، شما با دایو والد کل منوت، این مقادیر CSS رو باید اضافه کنی:

parentDivSelector {
position: fixed;
/* Use Top or Bottom, Left Or Right To Adjust Menu Location */
}

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

parentDivSelector {
position: fixed;
right: 0;
bottom: 0;
}

خیلی ممنون، بله یه همچین چیزی رو می خواستم. کدها راهنمای خوبی برام بود. از اینجا به بعد رو میدونم چطور کارکنم. cyrusthegreat (http://barnamenevis.org/member.php?114911-cyrusthegreat) خیلی خیلی ممنونم. :چشمک:

abbas3zaar

دوشنبه 14 فروردین 1391, 05:42 صبح

کاش یک مثال میزاشتید

khanlo.javid

دوشنبه 14 فروردین 1391, 08:58 صبح

کاش یک مثال میزاشتید

مثلا چه نوع مثالی این کد ها که دیگه خیلی سادن و احتیاجی به مثال ندارن ولی در کل اگه توضیح بدید که چه مثالی میخوایید براتون ضمیمه میکنیم.

موفق باشید.

EMERTAT

دوشنبه 14 فروردین 1391, 14:07 عصر

کاش یک مثال میزاشتید

اینم واسه تو

طول body زیاد کردم تا بهتر بتونی درک کنی

ولی در ie از ورژن 7 به بعد ساپورت می کنه

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style>
body
{
height: 1000px;
}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
position: fixed;
top: 20px;
left: 10px;
}

</style>
</head>

<body>
<div></div>
</body>

</html>

khanlo.javid

دوشنبه 14 فروردین 1391, 15:37 عصر

اینم واسه تو

طول body زیاد کردم تا بهتر بتونی درک کنی

ولی در ie از ورژن 7 به بعد ساپورت می کنه

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style>
body
{
height: 1000px;
}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
position: fixed;
top: 20px;
left: 10px;
}

</style>
</head>

<body>
<div></div>
</body>

</html>

دوست عزیز یه پیشنهاد دارم شما اگه میخوایید یه دیو کل صفحتون رو بگیره پارامتر اندازه رو به این شکل بدید بهتره : width:100%

موفق باشید.

EMERTAT

دوشنبه 14 فروردین 1391, 21:46 عصر

دوست عزیز یه پیشنهاد دارم شما اگه میخوایید یه دیو کل صفحتون رو بگیره پارامتر اندازه رو به این شکل بدید بهتره : width:100%

موفق باشید.

خوب من که نمی خوام کل صفحه بگیره

فقط یک طول و ارتفاع معین و یک کادر دادم تا بتونه ببینه داره چه اتفاقی می افته

khanlo.javid

سه شنبه 15 فروردین 1391, 09:14 صبح

خوب من که نمی خوام کل صفحه بگیره

فقط یک طول و ارتفاع معین و یک کادر دادم تا بتونه ببینه داره چه اتفاقی می افته

حرف شما درست دوست عزیز ولی در کل 100px یه اسکرول افقی هم به صفحه اضافه میکنه من به خاطر این گفتم از % استفاده کنی بهتره.....

موفق باشید.