در خدمت شما هستیم با آموزش ساخت دکمه نویگیتور کناری
آموزش ساخت دکمه نویگیتور کناری به شما کمک میکند که بتوانید دکمه هایی مشابه تصویر بالا بسازید
سلام برنامه این آموزش را به صورت اختصاصی برای شما کاربران عزیز ضبط کرده است
برای ساخت دکمه های navigation شما ابتدا باید موقعیتی برای آن در سایت خود تعیین کنید
در این آموزش ما موقعیت بالا و سمت راست را انتخاب کردیم
برای ساخت کمه ابتدا باید کد های زیر را به body خود اضافه کنید
<div id="mySidenav"> <a href="#" id="home">خانه</a> <a href="#" id="blog">وبلاگ</a> <a href="#" id="projects">پروژه ها</a> <a href="#" id="contact">کاربران</a> </div>
سپس برای جلوه دادن و استایل بندی آن باید کد های زیر را به css خود اضافه کنید
body{
direction:rtl;
}
#mySidenav a{
position:absolute;
right:-95px;
transition:0.3s;
padding:15px;
width:100px;
text-decoration:none;
font-size:20px;
color:#fff;
border-radius: 5px 0 0 5px;
text-align:center;
}
#mySidenav a:hover{
right:0;
}
#home{
top:20px;
background-color:#4caf50;
}
#blog{
top:80px;
background-color:#2196f3;
}
#projects{
top:140px;
background-color:#f44336;
}
#contact{
top:200px;
background-color:#555;
}کار ساخت دکمه نویگیتور تمام است
جزئیات بیشتر آموزش در ویدیو آموزش موجود می باشد
شما می توانید ویدیو آموزش را همراه سورس کد آن از باکس دانلود موجود در زیر همین پست دانلود نمایید