چگونه منو های اینجوری داشته باشیم؟

[arta.nasiri]

سلام

چطور میتونم منوهایی مثل منوی این سایت درست کنم ( منوی سمت چپ بالا)http://www.apple.com/downloads/

[jaza_sa]

زیر هر کدوم از منو ها (مثلا All Downloads یا Top Apple Downloads) یک div وجود داره و با ورود موس به محدوده اونها ، div مربوطشون نمایش داده میشه (display: block) و بقیه div ها مخفی میشن (display: none)
و این عمل هم با استفاده از کد JavaScript انجام میشه بطور مثال :

document.getElementById('tagName').style.display = 'none';

[امید امرایی]

البته این منو کمی آزار دهنده است
بهتره شما این عمل رو در onclick انجام بدید

[RoostaYeBekr]

البته این منو کمی آزار دهنده است
بهتره شما این عمل رو در onclick انجام بدید
ببین kassit راست می گه . منوش آزار دهنده است . ( منظور اینکه کار کردن باهاش خیلی راحت نیست )

من منوهای جور و واجور زیادی دیدم که خیلی دسته بندی مرتب تر و اصلا خوش ظاهرتری نسبت به سایتی که معرفی کردی داره.

[arta.nasiri]

ببین kassit راست می گه . منوش آزار دهنده است . ( منظور اینکه کار کردن باهاش خیلی راحت نیست )

من منوهای جور و واجور زیادی دیدم که خیلی دسته بندی مرتب تر و اصلا خوش ظاهرتری نسبت به سایتی که معرفی کردی داره.

خب حالا شما چه جور منویی رو پیشنهاد میکنید

[RoostaYeBekr]

خب حالا شما چه جور منویی رو پیشنهاد میکنید
با سلام
:لبخندساده:
بستگی داره به اینکه :
1 - منویی که می خواهید پر گزینه است یا کم گزینه ؟
2 - منویی که می خواهید دارای فرزند است یا بدون فرزند ؟
3 - منویی که می خواهید پر فرزند است یا کم فرزند ؟
4 - آیا منویی که می خواهید ، آنقدر پر فرزند است که ساختار منطقی آن شبیه به درخت است؟
5 - آیا بیشتر راحتی کاربر برایتان مهم است یا خوش ظاهر بودن منو؟
6 - آیا در سایتی که خیلی کاربران پرتی ندارند ( مردم عامی نیستند ) ، مثل این سایت ، که ماشاءالله همه واسه خودشون یک پا استادند ، می خواهید از این منو استفاده کنید یا در سایتی که خیلی عمومی هست؟
7 - آیا صفحه سایتتان ، صفحه ی شلوغی است ( که اگر باشد ، باید یک منوی جمع و جور تر طراحی کنیم ) یا نه ( صفحه ی سایتتان ، آنقدرها هم مطلب ندارد که اگر اینطور باشد ، برای قیافه دادن به صفحه ، می توانیم خوش ظاهر ترین نوع منو را انتخاب کنیم )
8 - آیا صفحه سایتتان ، صفحه ی پرکنترلی است ؟( که اگر باشد ، باید حتی الامکان از درست کردن منوهایی که ساختار سروری دارند ، پرهیز کنید)

و غیره .

[arta.nasiri]

1 - منوی پر گزینه
2 - هر دو (دارای فرزند و بدون فرزند)
3 - کم فرزند
4 - ؟
5 - راحتی کاربران
6 - برای مردم عادی و شاید هم حرفه ای ها
7 - میزان شلوغی متوسط
تشکر

[امید امرایی]

این کار باعث نمیشه توی رزولیشن ها دیگه منو بهم بریزه ؟

یا کلا امکان داره مکان یک div که پوزیشن absolute داره رو نسبت به پنجره در نظر نگرفت و نسبت به عناصر دیگه یا یک تگ p در نظر گرفت ؟

استفاده از display: none خاصیت position رو به absulote تبدیل نمی کنه .
اما در مورد تعیین موقعیت بر اساس موقعیت والد باید عرض کنم در واقع عملکرد واقعی absolute همینه که شما می فرمایید.



.ChildClass{
display: block;
position: absolute;
left: 10px;
}
در کد زیر تعیین می شه که موقعیت المنت فرزند نسبت به المنت والد 10 پیکسل به سمت راست باشه.

[RoostaYeBekr]

1 - منوی پر گزینه
2 - هر دو (دارای فرزند و بدون فرزند)
3 - کم فرزند
4 - ؟
5 - راحتی کاربران
6 - برای مردم عادی و شاید هم حرفه ای ها
7 - میزان شلوغی متوسط
تشکر

با سلام
راستش این گزینه ی 4 ، مهم است . این را هم باید بگوئید :


منظورم هم از :
4 - آیا منویی که می خواهید ، آنقدر پر فرزند است که ساختار منطقی آن شبیه به درختاست؟
این است که :
گاهی منوها آنقدر زیرشاخه های متفاوت دارند که فقط در 2 Level نیستند . بلکه دارای سه Level یا بیشتر هستند.


مثلا مثال زیر را در نظر بگیرید : ( ممکن است بگوئید که این منو با این تعریف را بهتر هم می توانستی تعریف کنی ، ولی توجه داشته باشید که من فقط می خواهم منظورم را برسانم )





http://www.sleezo.com/imgs/2008/nov/22/yrmr.png
همانطور که در بالا می بینید ، دیگر منوی ما در 2 Level نیست ، بلکه نه تنها دارای فرزند است ، بلکه دارای نوه و نتیجه هم هست.

[arta.nasiri]

1 - منوی پر گزینه
2 - هر دو (دارای فرزند و بدون فرزند)
3 - کم فرزند
4 - ؟
5 - راحتی کاربران
6 - برای مردم عادی و شاید هم حرفه ای ها
7 - میزان شلوغی متوسط
تشکر

4 - پر فرزند

[RoostaYeBekr]

با سلام

( نظرات شخصی خودم : )

( در مجموع شرایط سختی را ذکر کردید )

با توجه به اینکه گفتید :

1 - منوی پر گزینه
2- هر دو ( دارای فرزند و بدون فرزند )
3 - کم فرزند
4 – پر Level

اگر می گفتید که منوی من پرگزینه است و همچنین پر فرزند و پر Level ، و همینطور در سایتی است مثل همین سایت است که همه با کامپیوتر آشنایی دارند ، آنگاه من می گفتم که می توانی از Tree استفاده کنی . اما حالا که در گزینه ی 5 – هم گفتید که :

5 - برای مردم عادی و شاید هم حرفه ای ها

من قطعا اولویت را به مردم عادی می دهم ( راستش من تو تجربه ای که خودم بدست آوردم ، متوجه شدم که مردم عامّی ، کار کردن با Tree برایشان کمی سخت است . نمی دونم چرا ؟! و بعضی وقت ها گیج می شوند )

وقتی می گوئید :

1 - منوی پر گزینه
3 - کم فرزند

آنگاه من از این دو ، برداشت می کنم که فقط منوی شما در Level یک ، پر گزینه است. توی این حالت من پیشنهاد می کنم که چند نوع منو در صفحه ی سایتتان بگذارید . شاید بگوئید که اینطوری که خیلی بدتر و شلوغ تر می شود . ولی اگر شما به سایت www.olomrayaneh.net (http://www.olomrayaneh.net/) مراجعه کنید ، متوجه می شوید که چقدر قشنگ ، این همه مطلب را با 3 نوع منویی که هیچکدامش عجق وجق نیست و تازه خیلی کارکردن با آن ساده است ، پیاده سازی کرده و این در حالی است که با 3 نوع منو ، صفحه ی سایت اصلا هم شلوغ به نظر نمی رسد و کاربر خیلی سریع می تواند مطلبی را که می خواهد پیدا کند. نکته ای که در طراحی این صفحه ی سایتی که گفتم ، وجود داره این است که اون صفحه هم مثل درخواست 2 شما ( که گفتید 2- هر دو ( دارای فرزند و بدون فرزند ) ) ، دارای گزینه هایی است که بعضی هاشان بدون فرزندند و بعضی هاشان دارای فرزند . برای پیاده سازی این مسئله ، باید اون گزینه هایی که بدون فرزند هستند ، در یک بلوک قرار گیرند . مثل شکل زیر :

http://www.sleezo.com/imgs/2008/nov/23/y2rr.png
اما گزینه هایی که با فرزند هستند ، می توانند به شکل های دیگری پیاده سازی شوند . مثل شکل زیر . دقت کنید که در سایت www.olomrayaneh.net (http://www.olomrayaneh.net/) ، فرزندان به شکل Marquee یا متحرک هستند که البته در شکل زیر دیگر نمی شد نشان داد . فقط بدانید که گزینه های زیر قسمت اخبار سایت ، در حال حرکت به سمت بالا است.

http://www.sleezo.com/imgs/2008/nov/23/y2ra.png
فقط می مونه این گزینه ی 4 که گفتید : پر Level ( که منظورتان پرعمق بوده ) :
راستش من با این شرایطی که گفتید ، و با توجه به اینکه خودم هم الان گفتم که چند نوع منو درست کنید ، دیگر فکر نمی کنم جائی برای Tree باز ، باقی بماند . بنابراین به جای Tree از یک راه حل دیگر می توانیم استفاده کنیم :
حتما دیدید که بعضی وقت ها که روی یک کلمه کلیک می کنیم ، یک popup ی باز می شود. حالا شما می توانید یک لینک ساده در بالای صفحه بگذارید که هر وقت کاربر روی این کلیک کرد ، یک Div باز شود و هر وقت که کاربر بر خارج آن کلیک کرد ، این Div بسته شود . ( علتش این است که حالا که چند نوع منو داریم ، می خواهیم صفحه مان شلوغ تر نشود ) . در داخل این Div می توانید از ul و li استفاده کنید.

توجه داشته باشید که دقت کنید که صفحه تان دیگر مرورگر افقی اون پائین نندازه . چون این خیلی بد و اعصاب خورد کن است که کاربر مجبور باشد هم مرورگر افقی را حرکت دهد و هم مرورگر عمودی را . ( معمولا و به ناچار همیشه مرورگر عمودی ایجاد می شود . پس ما باید سعی کنیم که دیگر مرورگر افقی ایجاد نشود )

تنظیمات صفحه تان را بر اساس درصد بدهید . چون اگر بر اساس پیکسل بدهید ، و سپس رزولوشن کامپیوترتان را تغییر بدهید ، می بینید که اندازه ها به نسبت ، تغییر نکرده . اما اگر با درصد تنظیم کنید ، چه رزولوشن بالا برود و چه پائین ، همه چیز به همان نسبت تغییر خواهد کرد.