آموزش نوار Nav Glassmorphic (+ تعویض تاریک JS)

در اینجا یک آموزش کوچک در مورد نحوه ساخت نوار ناوبری شیشه ای که دارای حالت تاریک نیز می باشد، آورده شده است! در اینجا چگونه به نظر می رسد:

ایجاد ناو

در html خود ما یک div (یا یک عنصر nav به دلیل اینکه من نشانه‌ها را دوست دارم) می‌سازیم که حاوی محتوای خود است، که می‌تواند عناصر پاراگراف، نماد تغییر حالت تاریک و یک دکمه باشد. در CSS خود ما به Nav یک نمایش flex می دهیم تا بتواند افقی باشد، سپس کد می نویسیم align-item: center برای تراز کردن محتوا با مرکز و justify-content: space-evenly برای فاصله بین هر عنصر در ناو به طور یکنواخت. من همچنین یک عکس پروفایل اضافه کردم که یک تصویر کوچک با شعاع حاشیه 50 درصد برای سرگرمی است.

HTML

<nav>
<img src="https://i.pinimg.com/474x/10/cd/a9/10cda9e715b2b6799908fefbacae4d6b.jpg">
 <p>Home</p>
  <p>About</p>
<p>Docs</p>
 <ion-icon class="darkToggle" name="moon-outline"></ion-icon>
<button>Sign Up</button>
</nav>

CSS

nav {
  display: flex;
  justify-content: space-around;
  width: 70%;
  align-items: center;
  border-radius: 8px;
  font-family: Poppins;
  border-radius: 10px;
  transition: 0.3s;
}

/*Profile Picture*/
nav > img {
  border-radius: 50%;
  width: 40px;
}

یک ظاهر طراحی ناو

برای این آموزش من از ژنراتور شیشه‌مورفیسم hyp4academys استفاده کردم تا پس‌زمینه nav را به شکل شیشه‌ای تبدیل کنم، اما اگر می‌خواهید در واقع یاد بگیرید که چگونه یک پس‌زمینه شیشه‌مورفیک بسازید، می‌توانید بدون ابزار به این پست وبلاگ نگاه کنید:

من دکمه را طوری استایل دادم که رنگ پس‌زمینه مشکی با متن سفید داشته باشد، اما در حالت تاریک ما تغییر می‌کند. ارتفاع دکمه را 30 پیکسل دادم تا کوچک نباشد. در نهایت من به هر عنصر در ناو یک نشانگر دادم تا به کاربر این فکر را بدهد که با این کار آنها را به جایی می رساند.

nav {
  display: flex;
  justify-content: space-around;
  width: 70%;
  align-items: center;
  border-radius: 8px;
  font-family: Poppins;
  background: rgba( 255, 255, 255, 0.4 );
backdrop-filter: blur( 5px );
-webkit-backdrop-filter: blur( 5px );
border-radius: 10px;
  transition: 0.3s;
}

nav > img {
  border-radius: 50%;
  width: 40px;
}

nav > button {
  height: 30px;
  border-radius: 5px;
  border: none;
  background-color: black;
  color: white;
  font-family: Poppins;
}

nav > p, nav > button, ion-icon {
  cursor: pointer;
}

ضامن تیره

ابتدا یک کلاس nav تاریک می سازیم که دارای پس زمینه تیره و یک کلاس دکمه تیره با پس زمینه سفید و متن سیاه است. با جاوا اسکریپت، ناو، آیکون دکمه تاریک و دکمه ثبت نام را در یک متغیر ذخیره می کنیم. در نهایت به تاگل تاگل یک شنونده رویداد می‌دهیم که وقتی روی آن کلیک می‌شود، کلاس تاریک nav و دکمه تیره روی دکمه nav و دکمه جابه‌جا می‌شود.

CSS

.darkNav {
  background: rgba( 0, 0, 0, 0.25 );
  color: white;
}

.darkButton {
  background-color: white;
  color: black;
}

JS

var nav = document.querySelector('nav');
var darkToggle = document.querySelector('.darkToggle');
var button = nav.querySelector('button');

darkToggle.addEventListener('click', () => { 
nav.classList.toggle('darkNav');
button.classList.toggle('darkButton');
})

فعلاً همین است، ممنون که خواندید! همچنین می‌خواستم به شما بگویم که اکنون در توییتر هستم و پیشرفت‌ها، پروژه‌ها و دستاوردهایم را نشان می‌دهم! (همچنین شنیده ام که برای داشتن فرصت های شغلی بیشتر تو شبکه های اجتماعی خوب است) روز/شب خوبی داشته باشید 👋.

سلام، نام من لنز است 👋 امیدوارم از توییتر به عنوان راهی برای نشان دادن اینکه زندگی برنامه‌نویس من چگونه پیش می‌رود و چه ساخته‌ام استفاده کنم. من یک برنامه نویس وب جوان هستم (1 و نیم سال) به امید یادگیری برنامه نویسی و برنامه نویسی بیشتر به عنوان یک سرگرمی و برای آینده!
#توسعه وب #توسعه‌دهنده وب

00:03 صبح – 08 مارس 2023