ساخت منو آبشاری با CSS در وردپرس
سلام به دوستان عزیز و همراهان گرامی مِستر آموز.
طراحان سایت ها هر کاری برای ساخت یک سایت زیبا و واکنش گرا انجام می دهند. در همین راستا برای ساخت یک سایت واکنش گرا می توانید یک منوی آبشاری بسازید. ساخت همچین منوی کار سختی نیست و در این آموزش در مِستر آموز طریقه ساخت آن را به شما آموزش می دهیم. با ما همراه باشید.
ساخت منو آبشاری در وردپرس
در این مقاله می خواهیم ساخت منوی آبشاری را بدون استفاده از هیچ افزونه ای و با استفاده از کد های HTML و CSS بسازیم.
در قدم اول کل ناحیه منو را با تگ های <nav> مشخص می کنیم، تا محل قرارگیری منو از لحاظ ساختار کدنویسی، مشخص باشد. لازم به ذکر است که این تگ مربرط به HTML5 می باشد.
به مثال زیر دقت کنید:
<nav>
<br> <ul>
<li><a href="#">مکانیک وردپرس</a></li>
<li><a href="#">آموزش ها</a></li>
<li><a href="#">دانلود</a></li>
<li><a href="#">تماس با ما</a></li>
<br> </ul>
</nav>
کد های بالا یک منوی ساده را ایجاد می کند.
کد بالا یک منوی تک مرحله ای و بدون زیرمنوی و ساده می سازد، برای اینکه یک منویی بسازیم که زیر منوی داشته باشد، باید با پیروی از همان ساختار یک بلاک کامل یعنی <ul> و <li> به آیتم منوی دلخواه اضاف کنیم، تا آیتم مورد زیر منو دار شود.
به مثال زیر دقت کنید، می خواهیم 3 زیر منو به آیتم آموزش اضاف کنیم:
<nav>
<ul>
<li><a href="#"> وردپرس</a></li>
<li><a href="#">آموزش ها</a>
<ul>
<li><a href="#">وردپرس</a></li>
<li><a href="#">جوملا</a></li>
<li><a href="#">متفرقه</a></li>
</ul>
</li>
<li><a href="#">دانلود</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</nav>
در کد بالا می بینید که بعد از آیتم آموزش دوباره تگ ul را قرار داده ایم که در آیتم آموزش یک منو دیگر تشکیل شود، این منوی جدید، زیر منوی آموزش می شود.
اکنون می خواهیم به آیتم متفرقه 2 زیر منو اضاف کنیم. مانند کد بالا بعد از آیتم متفرقه از تگ های <ul> استفاده می کنیم:
<nav> <ul> <li><a href="#"> وردپرس</a></li> <li><a href="#">آموزش ها</a> <ul> <li><a href="#">وردپرس</a></li> <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>
حالا ما یک منوی سه سطحی داریم.
اکنون برای ساخت منوی DropDown اکنون باید کد های CSS را بنویسیم.
در قدم اول باید کاری کنیم که زیر منوها دیده نشوند و هر وقت ماوس روی آیتم ها رفت، زیر منوهای مختص به هر آیتم نمایش داده شود.
بنابراین برای این کار کدهای CSS زیر را در جای مناسب کپی کنید:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
به قعطه کد بالا دقت کنید. می خواهیم بررسی کنیم که چه کاری انجام می دهد. ابتدا display فرزندهای ul را برابر با none گذاشتیم، یعنی زیر منو ها نشان داده نشوند. سپس در قسمت بعدی با استفاده از علامت ” < ” مشخص کرده ایم که استایل نوشته شده در این بخش فقط مربوط به ul ای است که در حال حاضر ماوس بر روی تگ والد آن قرار گرفته. این کار را به این دلیل انجام دادیم که از به نمایش گذاشته شدن همزمان همه ul های فرزند در زمان قرارگیری ماوس روی یکی از سرمنوها جلوگیری شود. (این مورد را میتوانید خودتان تست کنید تا دقیقا متوجه تاثیر قراردادن علامت بزرگتر در این بخش بشوید. چرا که در صورت عدم موجود بودن این علامت، وقتی ماوس را روی یکی از منوهای دارای زیرمنو قرار میدهید، کلیه سطوح زیرین آن با هم به نمایش در خواهند آمد که این مسئله برای ما ایده آل نیست)
اکنون تصمیم داریم نحوه نمایش و رنگ منو را مشخص کنیم:
nav ul {
background: #f1f4f7;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 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;
position: relative;
font-weight: bold;
}
nav ul li:hover {
background: #a70101;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 15px 32px;
color: #4e4e4e;
text-decoration: none;
}
در ابتدا محل شناوری آیتم li را بر روی right تنظیم کرده ایم تا آیتم های منو در کنار هم از راست به چپ و متناسب با زبان فارسی نشان داده شوند. و سپس در خط هفتم مشخص کرده ایم که در زمان قرارگیری ماوس روی یکی از آیتم های منو، پس زمینه آن به چه رنگی در بیاید. و در بخش بعدی نیز رنگ لینک های تگ a را در زمان شناور شدن ماوس روی آنها مشخص کرده ایم.
تا اینجا آیتم های رده اول منو دارای استایل های مناسب هستند. حالا نوبت آیتم های سطح دوم منو است. باید برای این آیتم ها هم استایل های مناسبی تعریف کنیم:
nav ul ul {
background: #9c0000;
border-radius: 0px;
padding: ;
position: absolute;
top: 100%;
right: ;
width: 200px;
}
nav ul ul li {
float: none;
border-top: 1px solid #940000;
border-bottom: 1px solid #940000;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #112f44;
}
استایل هایی که در این بخش تعریف کرده ایم در واقع استایلهای ساده ای هستند. در خط پنجم حالت absolute را برای قرارگیری ul های زیرمنو تعریف کرده ایم تا بتوانیم موقعیت آنها را نسبت به آیتم والد تعیین کنیم. همانطور که مشاهده میکنید این کار را با تعیین فاصله ۱۰۰ درصد از بالا و ۰ از سمت راست انجام داده ایم. سپس برای زیبایی بیشتر، عرض زیرمنو را نیز تعیین کرده ایم. طبعا این مقدار را میتوانید با توجه به نیاز خود تغییر دهید.
بعد از این تنها یک کار برای انجام باقی میماند و آن هم مشخص کردن استایل های آخرین سطح منوی کشویی است:
nav ul ul ul {
position: absolute;
right: 100%;
top:;
}
با توجه به اینکه سطح سوم منوها نیز از رنگهایی که قبلا برای آیتم های منو تعریف کرده بودیم تاثیر میپذیرد، بنابراین فقط تعیین محل قرارگیری این آیتم ها باقی میماند که آن هم از طریق استایل های بالا معین میشود.
در اینجا نکته جالب توجه این است که به این دلیل که موقعیتی که برای آخرین سطح منو مشخص کرده ایم روی آیتم های زیرمجموعه ی آخرین سطح نیز تاثیر میگذارد، بنابراین عملا دیگر مهم نیست که چند سطح زیرمنو داشته باشید. هرچقدر منوی شما عمیق تر شود، باز هم محل نمایش آیتم های زیرمنو صحیح خواهد بود.
اکنون زمان مشاهده نتیجه است:
موفق و پیروز باشید.
