Membuat Menu Dropdown Sederhana Dengan CSS Show
Membuat Menu Dropdown Sederhana Dengan CSSMembuat Dropdown Menu Sederhana Dengan CSS, Itulah judul yang kita bahas pada tutorial kali ini, untuk melengkapi tutorial web design bahasa indonesia lengkap di www. malas. com Menu tarik-turun adalah salah satu fitur paling populer di situs web. Sejak zaman kuno, menu tarik-turun telah digunakan di hampir setiap templat situs web. karena fungsinya yang sangat berguna pada sebuah halaman website Diantaranya adalah sebagai petunjuk atau petunjuk halaman pada sebuah website. misalnya pada menu terdapat beberapa link atau hyperlink seperti home, about, contact us, tutorial dan lain-lain Tak hanya itu, menunya juga bisa dibuat anak atau sub menu. misalnya kita memiliki menu induk bernama "Tutorial". nah selanjutnya di menu tutorial kita bisa membuat menu anak seperti HTML, CSS. PHP dan lain-lain Jadi saat pengunjung website meletakkan kursor pada menu " Tutorial " atau mengklik menu " 3 >Tutorial 3 >Tutorial Tutorial “, maka akan muncul sub menu. Sobat pasti penasaran dengan Cara Membuat Menu Dropdown Dengan CSS. pada tutorial kali ini kita akan membahas tuntas Cara Membuat Menu Dropdown Sederhana Dengan CSS. Tonton saja Membuat Menu Dropdown Sederhana Dengan CSSUntuk membuat dropdown menu dengan html dan css tinggal siapkan file html atau php terserah anda Disini saya hanya membuatnya di file html. Saya membuat file dengan nama menu. html Tidak bisa. html 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 < . DOCTYPE html> <html> <kepala>
<judul>Buat Menu Dropdown Dengan CSS3 dan HTML5 - www. malas Goding. com< / judul>
< / kepala> <tubuh>
<tajuk kelas = "tajuk"> <div kelas = "lazy-menu- tuhan" >
<ul> <li><a href = "#">Beranda< / a>< / li> <li><a href = "#">Menu 1< / a>< / li> <li><a href = "#">Menu 2< / a>< / li> <li kelas = "dropdown"><a href = "#">Menu 3< / a> <ul kelas = "isi-dropdown" > <li><a href = "#">Sub Menu 1< / a>< / li> <li><a href = "#">Sub Menu 2< / a>< / li> <li><a href = "#">Sub Menu 3< / a>< / li> <li><a href = "#">Sub Menu 4< / a>< / li> < / ul> < / li> <li><a href = "#">Menu 4< / a>< / li> < / ul>
< / div> < / tajuk>
<br / >
<tengah> <h1>Buat Menu Dropdown Dengan CSS3 dan HTML5 <br / > www. malas Goding. com< / h1> < / pusat>
< / tubuh> < / html> Perhatikan file menu. html diatas, untuk membuat dropdown menu, elemen HTML yang kita gunakan adalah elemen Tutorial membuat list di HTML juga sudah pernah dibahas di tutorial sebelumnya BACA. https. // www. malas. com/learn-html-make-list-in-html/ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ul> <li><a href = "#">Beranda< / a>< / li> <li><a href = "#">Menu 1< / a>< / li> <li><a href = "#">Menu 2< / a>< / li> <li kelas = "dropdown"><a href = "#">Menu 3< / a> <ul kelas = "isi-dropdown" > <li><a href = "#">Sub Menu 1< / a>< / li> <li><a href = "#">Sub Menu 2< / a>< / li> <li><a href = "#">Sub Menu 3< / a>< / li> <li><a href = "#">Sub Menu 4< / a>< / li> < / ul> < / li> <li><a href = "#">Menu 4< / a>< / li> < / ul> Selanjutnya kita menerapkan 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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 Saya yakin Anda semua memahami sintaks CSS di atas. karena kalian pasti sudah mempelajarinya di TUTORIAL CSS di www. malas. com Saya hanya akan membahas dasar-dasar cara membuat menu dropdown Tujuan membuat menu tarik-turun aktif 1 2 3 . tarik-turun. arahkan kursor . isi - tarik-turun { tampilan . blokir ; } sub menu atau class "isi-dropdown" awalnya kita atur dengan css "display. tidak ada". sehingga sub menu tidak terlihat. dan seperti sintaks di atas, ketika elemen li yang memiliki kelas "dropdown" diletakkan di atasnya, elemen sub menu (. fill-dropdown) kita perintahkan untuk tampil dengan sintaks di atas ( display. blokir ). Mari kita coba jalankan di browser dan lihat hasil dari dropdown menu sederhana yang telah kita buat  buat menu dropdown sederhana dengan css Nah teman-teman langsung saja terapkan sintaks menu dropdown di atas ke aplikasi atau website kalian Ini demo yang saya buat di codepen. io, untuk memudahkan teman-teman belajar dan mengotak-atiknya lagi
Lihat Pena Buat menu dropdown sederhana oleh Malas Ngoding (@malasngoding) di CodePen. 0 DEMO UNDUH SUMBER KODE Oke sekian Tutorial Membuat Dropdown Menu Sederhana Dengan CSS semoga bermanfaat Istilah pencarian masuk
Diki Alfarabi Hadi Penggemar koding. Seseorang yang suka mempelajari sesuatu yang baru. terutama tentang pemrograman web dan desain web. senang berbagi ilmu dan belajar dari orang lain
Tag. cara membuat menu dengan css, cara membuat menu dropdown dengan php, cara membuat menu dropdown di blogspot, cara membuat menu dropdown html ul li, cara membuat sederhana menu dropdown, menu dropdown css, dropdown sederhana, buat menu dropdown bootstrap, buat menu dropdown yang menarik, buat menu dropdown responsif dengan css, buat menu dropdown sederhana, buat menu dropdown vertikal dengan css, buat sub menu, dropdown menu, tutorial desain web, desain web Indonesia Produk
Tutorial Terbaru
Toko kamiSOSIALNgoding malas TUTORIAL MENARIK LAINNYAMembuat Slider Responsif Dengan CSS Membuat Slider Responsif Dengan CSS – Selamat datang kembali di tutorial desain web dari www. malas. com. dalam tutorial ini kita akan Diki Alfarabi Hadi Membuat Desain Form Login Dengan CSS Membuat Desain Form Login Dengan CSS - halaman form login adalah halaman yang diakses oleh user ketika Diki Alfarabi Hadi Grup Kode Warna Desain Datar – Selamat datang di artikel rekomendasi warna untuk desain datar dari www. malas. com. Pada artikel ini kita tidak membahas tentang Diki Alfarabi Hadi
|
Cara menggunakan menu html
Pos Terkait
Copyright © 2024 idkuu.com Inc.
