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

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

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

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


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



چگونه یک side navigation شناور ایجاد کنیم.


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

< div id="mySidenav" class="sidenav">
                    < a href="#" id="about">About< /a>
                    < a href="#" id="blog">Blog< /a>
                    < a href="#" id="projects">Projects< /a>
                    < a href="#" id="contact">Contact< /a>
< /div>

    

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


/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -80px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3; /* Blue */
}

#projects {
  top: 140px;
  background-color: #f44336; /* Red */
}

#contact {
  top: 200px;
  background-color: #555 /* Light Black */
}
    

ساید بار با دکمه های شناور در طراحی سایت
  • 18
  •    4
  • تاریخ ارسال :   1399/12/03

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

ارسال

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

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