آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ساخت منو تمام صفحه در طراحی وب سایت

آموزش طراحی سایت

آموزش ساخت منو تمام صفحه در طراحی وب سایت


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



قدم اول : کد HTML را اضافه کنید.
مثال :

< !-- The overlay -->
< div id="myNav" class="overlay">

  < !-- Button to close the overlay navigation -->
                     < a href="javascript:void(0)" class="closebtn" onclick="closeNav()">& times;< /a>
    
  < !-- Overlay content -->
                    < div class="overlay-content">
                    < a href="#">About< /a>
                    < a href="#">Services< /a>
                    < a href="#">Clients< /a>
                    < a href="#">Contact< /a>
  < /div>

< /div>

< !-- Use any element to open/show the overlay navigation menu -->
< span onclick="openNav()">open< /span>
    

قدم دوم :   کد CSS را اضافه کنید.
مثال :


/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

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

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
    

قدم سوم :  کد جاوا اسکریپت را اضافه کنید.
مثال زیر نوار منوی بالایی هم پوشانی شده را هنگامی که تغییر میکند از چپ به راست، اسلاید بندی می کند ( از عرض 0 تا 100%).

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav"). style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav"). style.width = "0%";
}
    

مثال زیر نوار منو بالایی هم پوشانی شده را بصورت آبشاری ( سرازیر شدن ) اسلاید بندی میکند (از ارتفاع 0 تا 100 %)
نکته : در این مثال ، توجه داشته باشید که کد CSS از کد مثال زده شده بالایی متمایز می باشد (ارتفاع پیش فرض صفر است ، عرض 100 % و overflow-y ، بصورت پنهان است (اسکرول عمودی را غیرفعال کنید ، مگر برای صفحات کوچک)) :

/* Open */
function openNav() {
  document.getElementById("myNav"). style.height = "100%";
}

/* Close */
function closeNav() {
  document.getElementById("myNav"). style.height = "0%";
}
    

این مثال نوار منوی بالایی را بدون متحرک سازی باز میکند.

/* Open */
function openNav() {
  document.getElementById("myNav"). style.display = "block";
}

/* Close */
function closeNav() {
  document.getElementById("myNav"). style.display = "none";
}
    

ساخت منو تمام صفحه در طراحی وب سایت
  • 99
  •    40
  • تاریخ ارسال :   1399/11/17

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .