خواندن ۳ دقیقه·۵ سال پیش

آموزش ساخت navbar جلوه دار

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

خب می خوام تو این قسمت با هم nav bar های جلوه دار درست کنیم. یعنی وقتی روی یک دکمه کلیک کردیم، ناوبار به ما نمایش داده شود. البته با جلوه های گوناگونی که با javascript میدهیم.

شاید الان متوجه نشید. بزارین کدهارو بهتون بدم، بعد می فهمید مظورمو.

اول بیایید کدهای HTML رو بدیم و اسکلت بندی کنیم.

<body>
<!-- ایجاد اسکلت منوی ناوبار -->
<div id=&quotmySidenav&quot class=&quotsidenav&quot>
 <a href=&quotvoid(0)&quot  class=&quotclosebtn&quot =&quotcloseNav()&quot>×</a>
 <a href=&quot#&quot>About</a>
 <a href=&quot#&quot>Services</a>
 <a href=&quot#&quot>Clients</a>
 <a href=&quot#&quot>Contact</a>
 </div>

<!-- ایجاد دکمه ای که ناوبار را باز کند -->
<span =&quotopenNav()&quot>open</span>
 
<!-- محتوییات اصلی سایت که در کنار ناوبار قرار میگیرند را اینجا قرار دهید  -->
<div id=&quotmain&quot>
  ...
</div>
</body>

خب این هم از این.

بریم سروقت کد های CSS:

/* l ایجاد استایل اصلی خود ناوبار */
.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; /* Stay at the top */
  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 */
 }

/* لینک های ناوبار ما */
.sidenav a {
  padding: 8px 8px 8px 32px;
     text-decoration: none;
  font-size: 25px;
   color: #818181;
  display: block;
   transition: 0.3s;
}

/* تغییر رنگ لینک ها بر اثر آمدن روی آنها */
.sidenav a:hover {
  color: #f1f1f1;
}

/*  استایل دکمه ضربدر برای بستن ناوبار */
.sidenav .closebtn {
  position:  absolute;
  top: 0;
  right: 25px;
   font-size: 36px;
  margin-left: 50px;
}
 
/* این استایل برای تنظیم سرعت ظهور ناوبار است*/
#main {
  transition: margin-left .5s;
     padding: 20px;
}

/*می خواهیم فاصله و سایز فونت ها در دستگاه های کوچک تر میزان شود */
@media screen and (max-height: 450px) {
  .sidenav  {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
 }

خوب اینم تموم شد.

نکته: فراموش نکنید که اکثر این کد های CSS الان کار نمی کنند و تغییرات اصلی بعد از دادن کد های js معلوم میشود.

فعلا ما هیچ چیز مشاهده نمیکنیم.

پس باید کدهای js رو بدیم.

اولی: ناوبار بدون جلوه ظاهر شود.

//l باز کردن ناوبار
function openNav() {
        document.getElementById(&quotmySidenav&quot).style.display = &quotblock&quot
  }
  //l بستن ناوبار
function closeNav() {
            document.getElementById(&quotmySidenav&quot).style.display = &quotnone&quot
}

خب همچین ظاهری در میاد:

دومی: ظاهر کردن ناو با جلوه 1 : اسلایدر:

function openNav() {
        document.getElementById(&quotmySidenav&quot).style.width = &quot250px&quot
}
function closeNav() {
        document.getElementById(&quotmySidenav&quot).style.width = &quot0&quot
 }

سومی: ظاهر کردن ناو با جلوه 2 : هل دادن محتوا:

function openNav() {
document.getElementById(&quotmySidenav&quot).style.width = &quot250px&quot
document.getElementById(&quotmain&quot).style.marginLeft = &quot250px&quot
}
function closeNav() {
document.getElementById(&quotmySidenav&quot).style.width = &quot0&quot
document.getElementById(&quotmain&quot).style.marginLeft= &quot0&quot
}

و حاصل اینه:

لازم به ذکره که در تصویر اول دکمه زیر ناوبار پنهان شده بود ولی در این تصویر دکمه در کنار ناوبار قرار داره.

چهارمی : ظاهر کردن ناو با جلوه 3: تغییر شفافیت و تیره شدن صفحه و ظهور ناوبار:


function  openNav() {
  document.getElementById(&quotmySidenav&quot).style.width  = &quot250px&quot
  document.getElementById(&quotmain&quot).style.marginLeft  = &quot250px&quot
  document.body.style.backgroundColor = &quotrgba(0,0,0,0.4)&quot
}
function closeNav() {
   document.getElementById(&quotmySidenav&quot).style.width = &quot0&quot
   document.getElementById(&quotmain&quot).style.marginLeft = &quot0&quot
  document.body.style.backgroundColor = &quotwhite&quot
}

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

پنجمی: ظاهر کردن ناو با جلوه 3: ظهور ناوبار تمام عرض:


function  openNav() {
  document.getElementById(&quotmySidenav&quot).style.width  = &quot100%&quot
}
function closeNav() {
      document.getElementById(&quotmySidenav&quot).style.width = &quot0&quot
}

و نتیجه اینه :

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

اگه مشکلی تو اجرای کد ها داشتین، به من ایمیل بزنین تا فایل فشرده کد هارو براتون بگذارم.

موفق باشیییییییییییید .

اگر کد یا مثال لازم دارید یا دنبال آموزش هستید، Nima Hassani رو تو sololearn دنبال کنید، از همینجا بپرسید، یا به این ایمیل: pigy3p@gmail.com ... پیام بدید. موفق باشید.

javascriptطراحی سایت

نیما حسنی

if (You think I'm a Programmer) { I'm DotNet Developer }

شاید از این پست‌ها خوشتان بیاید