آموزش ساخت انواع منوی عمودی کشویی با html و CSS و جاوااسکریپت

چهارشنبه ۳ شهریور ۱۳۹۵

آموزش ساخت انواع منوی عمودی کشویی با html و CSS و جاوااسکریپتReviewed by جواد نبوی on Aug 24Rating: 5.0

آموزش ساخت منوی عمودی در سایت

در این مطلب میخواهیم آموزش ساخت انواع مختلف منوی عمودی را به شما یاد بدهیم. قبلا در مطلبی به آموزش ساخت منوی آبشاری ریسپانسیو عمودی پرداخته بودیم. در این مقاله یاد میگیرید که چگونه با html و CSS و جاوااسکریپت منو هایی در کناره سایت ایجاد کنید که با کلیک روی دکمه ای به صورت کشویی یا انیمیشنی وارد صفحه شود.

آموزش ساخت منوی عمودی کشویی

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

ساخت منوی عمودی با html و CSS

در ابتدای کار باید خود منو را با html و CSS ایجاد کنیم. یعنی بگوییم مثلا محتویاتش چیست و چه استایلی دارد. ابتدا کد html زیر را به محلی که میخواهید منو نمایش داده شود درون تگ <body> <body/> قرار دهید:

<div id="mySidenav" class="sidenav">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <a href="#">About</a>
 <a href="#">Services</a>
 <a href="#">Clients</a>
 <a href="#">Contact</a>
 </div>

<!-- در تگ زیر میتوانید از عنصر دلخوهتان به عنوان بازکننده منو استفاده کنید -->
 <span onclick="openNav()">open</span>

<!-- اگر میخواهید هنگام باز شدن منو، محتویات صفحه به یک سمت صفحه (سمت راست) هل داده شود، باید کل محتویات صفحه به غیر از منوی عمودی را درون دیو زیر قرار دهید. در غیر اینصورت نیازی به انجام اینکار نیست -->
 <div id="main">
 ...
 </div>

این کد یک منو برای شما ایجاد میکند. باید به آن استایل دهید تا به صورت پیشفرض درون صفحه نمایش داده نشود. بعدا با جاوااسکریپت کاری میکنیم که وقتی روی دکمه کلیک شد، منو وارد صفحه شود. دکمه بازکننده منو هم همان تگ <span> موجود در کد بالا است.

کد CSS زیر را به فایل استایل خود اضافه کنید:

/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

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

منوی عمودی کشویی (اسلایدی)

آموزش ساخت منوی کشویی عمودی

اگر میخواهید منوی شما به صورت کشویی یا اسلایدی وارد صفحه شود باید کد جاوااسکریپت زیر را قبل از تگ پایان <body/> قرار دهید:

<script>
 /* Set the width of the side navigation to 250px */
 function openNav() {
 document.getElementById("mySidenav").style.width = "250px";
 }

/* Set the width of the side navigation to 0 */
 function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
 }
 </script>

همانطور که میبینید، این کد جاوااسکریپت منوی شما را وارد صفحه میکند و عرض آن را ۲۵۰ پیکسل در نظر میگیرد. میتوانید به عرض دلخواه تغییرش دهید. برای مشاهده پیش نمایش از لینک زیر استفاده کنید. به علاوه میتوانید پس از ورود به صفحه پیش نمایش، راست کلیک کرده و روی گزینه View page source کلیک کنید تا کد های آن را ببینید:

منوی عمودی کشویی و هل دادن محتویات صفحه

آموزش ساخت منوی کشویی عمودی هل دهنده صفحه

اگر میخواهید همزمان با وارد شدن منو به داخل صفحه، محتویات صفحه شما به یک سمت (در اینجا سمت راست) منتقل شوند باید از کد جاوااسکریپت زیر استفاده کنید. توجه داشته باشید که کد جاوااسریپت قبلی را نیازی نیست اضافه کنید. فقط کافیست کد زیر را قبل از تگ پایان <body/> در پروژه تان قرار دهید:

<script>
 /* عرض منو و فاصله محتویات صفحه از سمت چپ را ۲۵۰ پیکسل در نظر گرفتیم. اگر عرض منو را تغییر دادید باید فاصله محتویات صفحه را هم به همان اندازه تغییر دهید */
 function openNav() {
 document.getElementById("mySidenav").style.width = "250px";
 document.getElementById("main").style.marginLeft = "250px";
 }

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
 function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
 document.getElementById("main").style.marginLeft = "0";
 }
 </script>

میبینید که در بخش اول کد بالا، عرض منو (width) را ۲۵۰ پیکسل در نظر گرفتیم. به همین خاطر فاصله محتویات صفحه از سمت چپ (margin-left) در زمانی که منو وارد صفحه می شود را هم ۲۵۰ پیکسل در نظر گرفتیم. این دو عدد همیشه باید با هم برابر باشند. پس اگر قصد داشتید عرض منو را تغییر دهید باید فاصله محتویات صفحه از سمت چپ را هم تغییر دهید. در غیر اینصورت ناهماهنگی بین اندازه ها به وجود می آید و نتیجه دلچسب نخواهد بود.

حتما توجه دارید که برای اینکه محتویات صفحه هل داده شوند، باید در مرحله اول این آموزش، همه محتویات صفحه را درون دیو main قرار دهید.
برای مشاهده پیش نمایش از لینک زیر استفاده کنید. به علاوه میتوانید پس از ورود به صفحه پیش نمایش، راست کلیک کرده و روی گزینه View page source کلیک کنید تا کد های آن را ببینید:

منوی عمودی کشویی و هل دادن محتویات صفحه و ایجاد پرده سیاه

آموزش ساخت منوی عمودی کشویی

شاید بخواهید در زمانی که منو وارد صفحه می شود و محتویات به سمتی هل داده می شوند، یک پرده سیاه نیمه شفاف کلیه محتویات شما غیر از منو را بپوشاند. این امر تمرکز کاربر بر روی منو را بیشتر می کند. فقط کافیست کد جاوااسکریپت زیر را (نه کد های جاوااسکریپتی که در مراحل قبل معرفی کردیم) قبل از تگ پایان body/> در پروژه تان قرار دهید:

<script>
 /* عرض منو و فاصله محتویات صفحه از سمت چپ را ۲۵۰ پیکسل در نظر گرفتیم. اگر عرض منو را تغییر دادید باید فاصله محتویات صفحه را هم به همان اندازه تغییر دهید. کد زیر همچنین پرده سیاهی با درجه شفافیت ۰٫۴ را به صفحه اضافه می کند. */
 function openNav() {
 document.getElementById("mySidenav").style.width = "250px";
 document.getElementById("main").style.marginLeft = "250px";
 document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
 }

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
 function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
 document.getElementById("main").style.marginLeft = "0";
 document.body.style.backgroundColor = "white";
 }
 </script>

برای مشاهده پیش نمایش از لینک زیر استفاده کنید. به علاوه میتوانید پس از ورود به صفحه پیش نمایش، راست کلیک کرده و روی گزینه View page source کلیک کنید تا کد های آن را ببینید:

منوی عمودی کشویی تمام صفحه

آموزش ساخت منوی عمودی انیمیشنی اسلایدی

اگر میخواهید منوی تان بعد از باز شدن، تمام صفحه را بپوشاند کافیست کد جاوااسکریپت زیر را قبل از تگ پایان <body/> به صفحه وب خود اضافه کنید:

<script>
 /* Open the sidenav */
 function openNav() {
 document.getElementById("mySidenav").style.width = "100%";
 }

/* Close/hide the sidenav */
 function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
 }
 </script>

برای مشاهده پیش نمایش از لینک زیر استفاده کنید. به علاوه میتوانید پس از ورود به صفحه پیش نمایش، راست کلیک کرده و روی گزینه View page source کلیک کنید تا کد های آن را ببینید:

منوی عمودی ساده بدون انیمیشن

کد زیر بدون هیچ گونه انیمیشنی، منو را یک دفعه وارد صفحه میکند:

<script>
 /* Open the sidenav */
 function openNav() {
 document.getElementById("mySidenav").style.display = "block";
 }

/* Close/hide the sidenav */
 function closeNav() {
 document.getElementById("mySidenav").style.display = "none";
 }
 </script>

برای مشاهده پیش نمایش از لینک زیر استفاده کنید. به علاوه میتوانید پس از ورود به صفحه پیش نمایش، راست کلیک کرده و روی گزینه View page source کلیک کنید تا کد های آن را ببینید:

پروژه ما را میتوانید از لینک زیر دانلود کنید:

لينک دانلود:


این آموزش ترجمه آزاد وب تستر از مقاله How To – Side Navigation می باشد.

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *