Cara Membuat Sidemenu Menggunakan HTML, CSS & JQuery

Pernah melihat tampilan admin wordpress? Dimana posisi menu terletak pada bagian samping, bila di klik menu tersebut baru keluar.

 Anda ingin mencobanya? Anda bisa membuatnya menggunakan bahasa scripting sederhana.
Apa saja yang diperlukan untuk membuat program tersebut.
  1. Modul JQuery (bisa dipanggil lewat CDN, bila komputer terhubung langsung dengan jaringan internet atau mendownload modul utamannya disini )
  2. Membuat sebuah file dengan akhiran extensi .html
  3. Membuat sebuah file dengan akhiran extensi .css
  4. Membuat sebuah file dengan akhiran extensi .js

Berikut proses pembuatannya

A. Membuat file HTML-nya

Ketikan script berikut untuk membuat struktur dasar bangunan fondasi file yang akan dibuat


Selanjutnya simpan file dengan nama misalnya index.html


 B. Membuat file CSS-nya

Membuat file css bertujuan untuk mengatur tampilan agar rapih & menentukan posisi.

Berikut script css yang dibuat, sekarang saatnya merapihkan struktur utama tadi, agar tidak terlihat berantakan

Misalkan kita buat file namanya style.css


C. Membuat file Js-nya
Membuat File js dengan menggunakan modul dari JQuery bertujuan untuk mengaktikan fungsi tombol menu, sehingga saat tombol menu di klik maka menu akan keluar

Misalkan kita buat file namanya contoh_event_buka.js

Berikut script kodenya.



Langkah selanjutnya adalah memanggil ke dua file tersebut (style.css & contoh_event_buka.js) ke dalam file index.html Sekarang lihat hasilnya di browser internet



Semoga Bermanfaat :D

Comments

Post a Comment

Popular posts from this blog

Tutorial Mengganti Thermal Pasta Pada Komputer (PC) (Lengkap + Gambar)

Image
Apakah Anda pernah merasa komputer yang Anda gunakan mengalami panas berlebih? Mungkin bisa jadi disebabkan karena beberapa kemungkinan, pertama ventilasi udara yang mengalirkan udara dingin dan panas pada komputer tidak mengalir dengan sempurna karena ventilasi tertutup oleh debu, sehingga udara pada komputer terhambat dan menyebabkan panas.  Atau kemungkinan kedua, dimana pasta pendingin prosesor (Thermal Pasta) sudah kering, sehingga menyebabkan suhu khususnya pada prosesor menjadi panas. Apabila thermal pasta pada prosesor sudah kering maka Anda perlu menggantinya dengan yang baru, agar suhu pada prosesor tetap optimal. Berikut tutorial cara mengganti thermal pasta pada komputer PC 1. Langkah pertama adalah menyiapkan alat – alat yang diperlukan terlebih dahulu a. Thermal Pasta (Baru) b. Kain / Lap Halus c. Alkohol 70% atau lebih d. Bekas kartu perdana / kartu yang tidak terpakai (additional) 2. Cabut sumber daya listrik yang mengaliri kompu
Selengkapnya »

Trik Menyalin Seluruh Nama File Dalam 1 Folder (Direktori)

Image
Apakah Anda kesulitan apabila ingin menyalin seluruh nama – nama file yang ada di dalam sebuah folder (direktori) dikarenakan folder tesebut mengandung banyak file? Bila ya, Anda bisa menggunakan trik sederhana ini guna mempermudah pekerjaan Anda. Caranya simak ulasannya di bawah ini:     Buka folder yang nama filenya ingin disalin.     Klik kanan sambil menekan tombol shift pada folder yang ini diambil nama filenya. 3.        Pilih contexts menu ‘ Open command window here ‘
Selengkapnya »

Cara Membuka File Gambar Menggunakan Terminal (Linux Ubuntu)

Image
Membuka file gambar menggunakan double click itu sudah biasa, bagaimana apabila menggunakan perintah pada command line? Emang bisa? Yup, jawabanya bisa, salah satu kelebihan dari Linux adalah terletak pada fungsi terminalnya yang sangat powerful. Jika anda pernah membaca artikel sebelumnya tentang mengatur suara menggunakan command line pada Linux, mungkin cara ini pun tidak jauh berbeda. Karena pada dasarnya sama. Bila penasaran ingin mencoba cara ini, Anda bisa mencoba cara dibawah ini, berikut caranya. 1.   Buka terminal dengan menekan CTRL + T. 2.   Pindahkan posisi direktori / folder ke tempat direktori / folder gambar anda tersimpan. Dengan mengunakan perintah CD lalu lihat isi direktori teresebut menggunakan perintah LS.
Selengkapnya »