مشخصات مقاله
آموزش off canvas menu در طراحی وب سایت
در این مقاله می آموزیم که چطور یک منوی Off-canvas ایجاد کنیم.
قدم اول : کد HTML را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < div id = "mySidenav" class = "sidenav" > < a href = "javascript:void(0)" class = "closebtn" onclick = "closeNav()" >×</ a > < a href = "#" >About</ a > < a href = "#" >Services</ a > < a href = "#" >Clients</ a > < a href = "#" >Contact</ a > </ div > < div id = "main" > < h2 >Sidenav Push Example</ h2 > < p >Click on the element below to open the side navigation menu, and push this content to the right.</ p > < span style = "font-size:30px;cursor:pointer" onclick = "openNav()" >☰ open</ span > </ div > < button ></ button > |
قدم دوم : کد CSS را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | body { font-family : "Lato" , sans-serif ; transition: background-color . 5 s; } .sidenav { height : 100% ; width : 0 ; position : fixed ; z-index : 1 ; top : 0 ; left : 0 ; background-color : #111 ; overflow-x: hidden ; transition: 0.5 s; padding-top : 60px ; } .sidenav a { padding : 8px 8px 8px 32px ; text-decoration : none ; font-size : 25px ; color : #818181 ; display : block ; transition: 0.3 s; } .sidenav a:hover { color : #f1f1f1 ; } .sidenav .closebtn { position : absolute ; top : 0 ; right : 25px ; font-size : 36px ; margin-left : 50px ; } #main { transition: margin- left . 5 s; padding : 16px ; } @media screen and ( max-height : 450px ) { .sidenav { padding-top : 15px ;} .sidenav a { font-size : 18px ;} } <button></button> |
با استفاده از دستور جاوا اسکریپت زیر می توانید منو offCanvas بسازید.
مثال ساخت offCanvas :
1 2 3 4 5 6 7 8 9 10 | <p>function openNav() {<br> document.getElementById( "mySidenav" ).style.width = "250px" ;<br> document.getElementById( "main" ).style.marginLeft = "250px" ;<br> }</p> <p>function closeNav() {<br> document.getElementById( "mySidenav" ).style.width = "0" ;<br> document.getElementById( "main" ).style.marginLeft= "0" ;<br> }</p> <button></button> |

با استفاده از دستور زیر منویی می سازید که offCanvas بوده و همراه با Opacity است. یعنی پس از باز شدن منو و هدایت محتوا به سمت راست، رنگ صفحه مقداری تغییر می کند.
مثال ساخت offCanvas Menu همراه با Opacity :
1 2 3 4 5 6 7 8 9 10 11 12 | <p>function openNav() {<br> document.getElementById( "mySidenav" ).style.width = "250px" ;<br> document.getElementById( "main" ).style.marginLeft = "250px" ;<br> document.body.style.backgroundColor = "rgba(0,0,0,0.4)" ;<br> }</p> <p>function closeNav() {<br> document.getElementById( "mySidenav" ).style.width = "0" ;<br> document.getElementById( "main" ).style.marginLeft= "0" ;<br> document.body.style.backgroundColor = "white" ;<br> }</p> <button></button> |

1404/02/02
3058
686
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com