کاربرد جاوا اسکریپت در طراحی منو

طراحی منو چسبنده با استفاده از جاوا اسکریپت و css

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

تو این سری پست‌ها قراره مثال‌ها و نمونه‌هایی از صفحات وب براتون بزاریم.

تو این سری پست‌ها از جاوا اسکریپت استفاده می شه تا با کاربرد جاوا اسکریپت بیشتر آشنا بشید.
نمونه یا مثال امروز ساخت منو چسبان با استفاده از css و جاوا اسکریپت هست. با ما همراه باشید.
شاید بارها براتون پیش اومده باشه که بخواید منوی چسبان و کاربردی طراحی کنید.

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

امروز قراره تو این پست از سری کاربرد جاوا اسکریپت، نحوه ساخت این منو رو با چند خط کدنویسی جاوا اسکریپت انجام بدیم.
اول باید سه تا فایل جدا با اسم‌های زیر ایجاد کنیم.

index.html

style.css

mycode.js

کدهای HTML

بعدازاین کار کدهای مربوط به فایل index.html رو درون اون می‌نویسیم.

در قسمت تگ head لطفاً دقت کنید که آدرس فایل هاتون رو درست وارد کرده باشید.

برای شروع در قسمت body باید سه تا کار انجام بدیم که دو تاش روالان انجام میدیم و یکیش رو بعدازاینکه کد جاوا اسکریپتمون رو نوشتیم.

کار اول اینه که باید یه قسمت بسازیم که اصطلاحا هدر سایتمون رو مشخص میکنه و کدش به‌صورت زیر هست:

ایجاد منو

کار دوم اینه که باید یه منو بسازیم که شامل یه سری گزینه‌های تستی باشه:

کدهای css

خب کار ما با فایل index.html فعلاً تموم شده.

حالا میریم به سراغ استایل دادن به سند html تا اون رو واسه کد نویسی جاوا اسکریپت آماده کنیم .

فایل style.css روباز کنید و کدهای زیر رو دورنش بنویسید :

کارمون با فایل استایلمون تقریباً تمومه.

فقط باید یه کلاس تعریف کنیم که بتونیم تو کدنویسی جاوا اسکریپت مون ازش برای چسباندن و کندن منو استفاده کنیم .

کد این کلاس به صورت زیر است :

کدهای جاوا اسکریپت

خب اینم از فایل استایلمون . حالا نوبت کدهای جاوا اسکریپت مون هست. این کدها رو با جزئیات بیشتری توضیح میدم.

اول باید یه function بنویسیم به نام stickyMenu به صورت زیر:

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

از اینجا به بعد تمامی کدهایی که در ادامه میاد رو باید در بدنه این function بنویسیم.

اول از همه باید یه ثابت تعریف کنیم و دورنش مقدار height یا ارتفاع هدر سایتمون رو نگه داری کنیم تا بتونیم در ادامه ازش استفاده کنیم.

بعد از اون باید یه شرط رو چک کنیم که ببینیم آیا اسکرول صفحه به اندازه ای رسیده که منو به بالای صفحه برسه یا خیر.

این کار رو با استفاده از شی window انجام میدیم . به صورت زیر :

در قسمت بدنه if کد زیر رو مینویسیم که توضیحشون رو ادامه خواهم داد .

این کد از div با id ، navmenu کلاس navbar رو حذف میکنیم تا استایل اصلی خودش رو دوباره بگیره.

در قسمت بدنه else کد زیر رو مینویسیم که توضیحشون رو ادامه خواهم داد .

تبریک میگم بهتون. کار تمومه. فقط باید قبل از همه چیز فایل index.html رو باز کنید و اون کار سومی که در ابتدا گفتم رو انجام بدید.

در قسمت تگ body باید یک رویداد رو فراخوانی کنیم و function که در فایل جاوا اسکریپت مون هست رو بهش پاس بدیم. به این صورت:

تبریک میگم

کار تمومه و میتونید الان طراحیتون رو تماشا کنید و ازش لذت ببرید.

امیدوارم که این پست براتون مفید بوده باشه. سعی کنید شما هم این کار رو انجام بدید و کمی سلیقه به خرج بدید.

مثلا وقتی منو میچسبه به بالای صفحه رنگ منو شیشه ای بشه یا چیزای دیگه.

خوشحال میشم اگه بتونید کدهایی که نوشتید رو برام از طریق ایمیل ارسال کنید تا من هم از شما یاد بگیرم.

سری پست‌های کاربرد جاوا اسکریپت رو دنبال کنید و ما رو با نظراتتون و انتقاداتتون در این راه یاری کنید.

meysam.rahpeyma68@gmail.com

همه کدها

دوستان عزیز برای راحتی کار کدها و به تفکیک براتون این زیر قرار میدم. موفق و پیروز باشید.