Halo, jumpa lagi dengan saya, pada tutorial kali ini saya akan bagikan kalian tutorial mengenai bagaimana Cara Membuat Menu Slide Dengan CSS3 Dan Javascript, baik langsung saja kita mulai praktik nya.
Langsung saja, silahkan kalian buat struktur HTML seperti berikut.
|
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 |
<header> <span class="menu-anchor"></span> </header> <menu> <ul> <li><a href="#">Home</a></li> <li><a href="#">Produtos</a></li> <li><a href="#">Serviços</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Contato</a></li> </ul> </menu> <section class="main"> <div class="post"> <h1>Um tÃtulo</h1> <p>Lorem ipsum dolor sit amet</p> </div> <div class="post"> <h1>Pellentesque consectetur luctus</h1> <p>Nullam magna mauris.</p> </div> <div class="post"> <h1>Nullam magna mauris</h1> <p>Lorem ipsum dolor sit amet,</p> </div> </section> |
Untuk Paragraf nya bisa kalian isikan sesuai keinginan, lebih banyak lebih bagus, setelah itu kita akan desai dulu tampilan nya, dengan kode CSS3 berikut ini.
|
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
* { margin: 0; padding: 0; } /* Isto é necessário para não haver rolagens horizontais quando movermos os elementos */ html, body {overflow-x: hidden;} body { font: 100% arial, verdana, tahoma, sans-serif; color: #FFF; background-color: #f1c40f; } header { background: #f49c14; padding: 30px; overflow: hidden; } header h1 { display: inline-block; vertical-align: middle; text-align: center; width: 80%; font-size: 1.5em; } h1 a {color: #FFF; text-decoration: none;} header input { float: right; padding: 10px; width: 200px; border: none; } .main { padding: 30px; } .main p { font-size: .9em; line-height: 1.2em; margin-bottom: 20px; } .menu-anchor { width: 40px; height: 32px; display: inline-block; vertical-align: middle; position: relative; text-indent: -9999px; overflow: hidden; cursor: pointer; background: #FFF; } .menu-anchor:before { content: ""; display: block; margin: 7px auto; width: 70%; height: 0.25em; background: #f49c14; box-shadow: 0 .45em 0 0 #f49c14, 0 .9em 0 0 #f49c14; } .menu-active .menu-anchor {background: #d55401} menu { position: fixed; top: 0; left: 0; z-index: 1; width: 220px; height: 100%; padding-top: 10px; background: #d55401; box-shadow: inset -5px -10px 10px 0 rgba(0,0,0,.3) } menu li a { display: block; border-bottom: 1px solid rgba(255,255,255,.3); margin: 0 10px; padding: 10px; color: #FFF; text-decoration: none; } menu li a:hover { background: #FFF; color: #d55401; } /* Aqui você esconde o menu para fora da tela O valor é exatamente a largura da sidebar */ menu { -webkit-transform: translateX(-220px); -moz-transform: translateX(-220px); -ms-transform: translateX(-220px); transform: translateX(-220px); -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; transition: all .25s linear; } /* Essa é a posição original do HEADER e do MAIN */ header, .main { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; transition: all .25s linear; } /* Com a classe menu-active na tag HTML */ .menu-active menu { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .menu-active header, .menu-active .main { -webkit-transform: translateX(220px); -moz-transform: translateX(220px); -ms-transform: translateX(220px); transform: translateX(220px); } |
Kalo sudah, sekarang kita akan memasukan kode Javascript berikut, untuk membuat tombol menu berfungsi menjadi slide ketika di klik. berikut kode nya.
|
1 2 3 4 5 6 |
$(document).ready(function(){ $('.menu-anchor').on('click touchstart', function(e){ $('html').toggleClass('menu-active'); e.preventDefault(); }); }) |
Setelah semua sudah di ketikan, jangan lupa disimpan, kemudian jalankan dibrowser masing-masing dan lihat hasilnya.
Baik, cukup mudah yah ? silahkan kalian modifikasi lagi menjadi lebih keren tentunya :). Sekian tutorial mengenai Cara Membuat Menu Slide Dengan CSS3 Dan Javascript, semoga bermanfaat, amin.
Selamat mencoba 🙂