ایران وب اموزش طراحی و طراحی وب
سلام به همه ی همراهان
امروز میخواهیم راجع به ساخت منو در css و html صحبت کنیم. همانطور که میدانید فهرست وب سایت بخش بسیار مهمی از وب سایت را تشکیل می دهد پس باید دارای طراحی مناسب زیبا و کارآمد باشد .
در این آموزش سعی شده است که تمام مراحل ساخت یک منوی آبشاری، به صورت گام به گام و کاملا مفهومی توضیح داده بشود.
برای شروع کار به header.php قالبتون مراجعه کنید و کد زیر رو در یک جای مناسب قرار بدهید.
در واقع این یک کد آزمایشی برای ساخت چارچوب منوها و زیر منوهای ما است.
*البته اگر در مرحله طراحی هستید به index.html مراجعه کنید .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<nav> <ul> <li><a href="#">خانه</a></li> <li><a href="#">آموزش</a> <ul> <li><a href="#">فتوشاپ</a></li> <li><a href="#">طراحی وب</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">وردپرس</a> <ul> <li><a href="#">پوسته</a></li> <li><a href="#">پلاگین</a></li> </ul> </li> <li><a href="#">توسعه</a></li> </ul> </nav> |
حالا اگر کدهای بالا رو در قالب اجرا کنید چیزی شبیه تصویر زیر رو خواهید داشت.
اما این چیزی نیست که ما دنبالش هستیم، بنابراین برای فرم دهی و زیبا سازی به سراغ کدهای css میرویم.
قطعه کدی که در زیر گذاشته می شود css کد html بالا است
|
1 2 3 4 5 6 7 |
nav ul ul { display: none; } nav ul li:hover > ul { display: block; } |
خوب، حالا کد زیر رو که تنظیم کننده ی استایل کلی قالب منوی ماست ، در ادامه ی کد بالا قرار بدید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: right; } nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff; } nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; } |
تا اینجا قالب کلی منوهای ما شکل گرفته است ، اما هنوز کار تمام نشده است چون این حالت فقط برای منوهای اصلی است و زیر منوها شامل ان نمیشوند.
بنابراین، در قدم بعدی کد زیر را در ادامه کدهای قبلی قرار بدهید و نتیجه را مشاهده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #4b545f; } |
حالا منوهای ما شکل بهتری گرفتند…
الان باید تکه کدی بنویسیم که زیر منوی زیر منو ی ما به جای قرار گرفتن در پایین زیر منو در کنار آن قرار بگیرد
|
1 2 3 4 |
nav ul ul ul { display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 0;right:100%; } |
در ضمن اگر خواستید در وب سایت وردپرسی منو های خود را آبشاری نشان دهید به جای این مقدار کد میتوانید تکه کد زیر را در کنار کدهای html بالا در header.php قرار دهید.
|
1 |
<?php wp_list_cats('sort_column=NAME&optioncount=0&hierarchical=1'); ?> |
شاد باشید .
