Membuat Dropdown Menu 3 Level dan Efek Animasi CSS 3

Dropdown menu adalah menu yang ketika disentuh dengan mouse (hover), akan keluar sub menu. Multilevel dropdown menu berarti menu yang sub menunya memiliki sub menu lagi lebih dari 2 tingkat atau banyak. 

Kode HTML

<div class=”menu-wrapper”>
<ul class=”menu-horizontal”>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3 <span class=”arrow”></span></a>
<ul class=”submenu level-1″>
<li><a href=”#”>Level 1</a></li>
<li><a href=”#”>Level 1 <span class=”arrow”></span></a>
<ul class=”submenu level-2″>
<li><a href=”#”>Level 2</a></li>
<li><a href=”#”>Level 2  <span class=”arrow”></span></a>
<ul class=”submenu level-3″>
<li><a href=”#”>Level 3</a></li>
<li><a href=”#”>Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Kode CSS

/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#DD3D36;
-webkit-transition:all 0.5s ease-in-out;
}

/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}

/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}ul.submenu li {
position: relative;
}

/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li ul li:hover ul.level-3 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}

Belajar Syntax Dasar SQL (Structured Query Language)

. 

1. Membuat Table Baru

• Syntax : CREATE TABLE nama_table ( field1 type(size),field2 type(size), …)
• Contoh :
  CREATE TABLE karyawan (
  firstname char(15) not null,
  lastname char(15) not null,
  ssn char(9) not null,
  bdate date,
  address char(30) ,
  sex char(1),
  salary decimal(10.2))

2.  Menghapus Table

Sintaks: DROP TABLE nama_table
Contoh: DROP TABLE karyawan

3.  Memperbaharui field (Menambah / mengurangi field)

• Menambah kolom/field baru
ALTER TABLE nama_table
ADD field TYPE(SIZE)

• Menghapus kolom/field
ALTER TABLE nama_table
DROP COLUMN field

4.  Menyisipkan Data Baru

• INSERT INTO nama_table  (field1, field2 ,…) VALUES (nilai1, nilai2 ,…)


• INSERT INTO nama_table VALUES (nilai1, nilai2 ,…) 

Contoh :

• INSERT INTO KARYAWAN (nama, pekerj aan, gaji, mkerja)VALUES ("SUNARDI" ,"STAF AHLI",1500000,3)

• INSERT INTO KARYAWAN VALUES ("SUNARDI" ,"STAF AHLI" ,1500000,3)

5.  Menampilkan Data

• Semua Data.

SELECT *FROM NAMA_TABLE

• Menampilkan field tertentu.

SELECT FIELD1,FIELD2,… FROM  NAMA_TABLE

• Menampilkan data dengan urutan tertentu.

SELECT FIELD1,FIELD2,… FROM NAMA_TABLE ORDER BY FIELD

Gunakan DESC setelah FIELD untuk pengurutan TURUN

• Menampilkan data-data tertentu
SELECT FIELD FROM NAMA_TABLE WHERE <KONDISI>

Contoh :

• SELECT * FROM KARYAWAN WHERE NAMA LIKE “S*”


• SELECT *FROM KARYAWAN WHERE GAJI > 1000000


• SELECT *FROM KARYAWAN WHERE GAJI > 500000 AND GAJI <2000000

atau

• SELECT *FROM KARYAWAN WHERE GAJI BETWEEN 500000 AND 2000000

• SELECT * FROM KARYAWAN WHERE NAMA LIKE “S*” or NAMA LIKE “A*”

• SELECT * FROM KARYAWAN WHERE NAMA NOT LIKE “S*"

6.  Menghapus Data /Baris

DELETE FROM nama_table
WHERE <kondisi>

7.  Memperbaiki/edit Data/Baris

UPDATE nama_table
SET <kondisi1/pengganti>
WHERE <kondisi2/yg diganti> 

Cara Menghemat Bandwidth Website

- Bandwidth web merupakan hal yang terpenting karena menyangkut biaya dan kelangsungan web kita.
- Mengapa demikian ?
- Karena jika salah membuat script, bandwidth kita bisa-bisa habis gak karuan. Padahal pengunjung yang   masuk membuka website kita belumlah banyak. Lantas dimana letak kesalahannya sehingga bandwidth bisa habis dengan cepat ?

Untuk mengatasi hal ini, segera check website Anda dari masalah berikut :

1. Hemat ukuran dan loading website dengan GZip Compression.
Check apakah website Anda telah terkompressi atau belum. Kompressi website selain dapat mengurangi penggunaan bandwidth juga sangat membantu dalam mempercepat loading website. Untuk check kondisi website sudah terkompressi atau belum bisa check di link Check gzip compression.

2. Perkecil Ukuran Image Anda tanpa mengurangi kualitas gambar.
Ukuran gambar yang besar selain memperlambat loading juga akan memboroskan bandwidth Anda. Gunakan type image JPG dengan kualitas 10 untuk memperkecil ukuran file tanpa mengurangi kualitas image Anda.

3. Check frekuensi Crawl dari Search Engine.
Pengambilan data search engine yang terlalu sering juga akan menghamburkan bandwidth Anda. Sesuaikan frekuensi pengambilan data dengan frekuensi update data Anda. Jika situs Anda adalah situs berita yang diupdate setiap jam, Anda boleh-boleh saja mengatur frekuensi pengambilan data search engine setiap satu jam. namun jika website Anda hanyalah blog biasa yang paling cepat satu minggu sekali di update, sebaiknya Anda menyesuaikan pengambilan data search engine juga menjadi satu minggu sekali.

Mempercepat loading Website dengan gzip compression

Ada banyak cara dalam mempercepat server response time, salah satunya dengan menggunakan gzip compression. Tutorial kali ini diperuntukkan bagi sobat yang menggunakan hosting linux dengan server apache.

Langkah-langkah yang diperlukan untuk meng-enable gzip compression adalah sebagai berikut:
1. Buka folder root html Anda dengan Cpanel atau FTP Client. Folder root html biasanya ditempatkan di home/username/public_html.

2. Cari file .htaccess

3. Tambahkan beberapa baris perintah berikut pada file .htaccess Anda:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule> # compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
AddType text/css .css

4. Save .htaccess

Selain untuk mempercepat server response time, cara ini juga sangat berguna untuk menunjang SEO website Anda karena salah satu kriteria SEO adalah response time dari web tersebut.

Elemen Head pada HTML

Elemen yang bisa kita sisipkan diantara tag <head> dan </head> adalah:

<title>, <style>, <meta>, <link>, <script>, <noscript>, dan <base>.

Elemen HTML <title>

Digunakan untuk mendefinisikan Judul web yang akan tampil di browser dan yang akan dimunculkan di search engine. format penulisannya adalah:

<title>Judul Halaman WEB</title>

Elemen HTML <style>

Elemen <style> digunakan untuk mendefinisikan format dari setiap tag dan class (akan dibahas kemudian)

Elemen HTML <meta>

Elemen <meta> digunakan untuk mendefinisikan kata kunci (keyword) dan deskripsi dari halaman web. Elemen <meta> ini dibutuhkan agar web kita mudah ditemukan oleh mesin pencari (search engine) seperti yahoo dan google. Format penulisannya:

Untuk mendefinisikan kata kunci atau keyword dari halaman website:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Sedangkan untuk mendefinisikan deskripsi dari website:

<meta name="description" content="Free Web tutorials on HTML and CSS">

Untuk mendefinisikan Penulis atau author:

<meta name="author" content="Bestariweb Studio">