Cara Membuat Dropdown Menu Dengan HTML Dan CSS

Cara Membuat Dropdown Menu Dengan HTML Dan CSS - Dropdown menu adalah list menu yang muncul ketika kursor datang. Dropdown Menu biasanya digunakan di bagian navbar dalam layout web. Berikut adalah contoh dropdown menu.

Untuk membuat dropdown list anda memerlukan sebuah file HTML dan CSS, dan berikut contohnya.

HTML

<div class="drop-exam">

<ul>

<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li class="dropdown-button"><a href="menu">Menu</a>

<div class="dropdown-menu">

<ul class="dropdown-list">

<li><a href="menu">Menu 1</a></li>
<li><a href="menu">Menu 2</a></li>
<li><a href="menu">Menu 3</a></li>

</ul>

</div>

</li>
<div class="clear"></div>

</ul>

</div>

Save lalu buka file cssnya.

CSS

.drop-exam {

background-color: #ED4C67;
width: 90%;
margin: 50px auto;

}
.drop-exam ul {

list-style-type: none;
margin: 0;
padding: 0;

}
.drop-exam ul li {

float: left;

}
.drop-exam ul li a {

display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;

}
.drop-exam ul li a:hover {

background-color: #12CBC4;

}
.dropdown-button {

position: relative;

}
.dropdown-button:hover .dropdown-menu {

display: block;

}
.dropdown-menu {

transition: all 0.2s;
display: none;
position: absolute;
top: 60px;
left: 0;
background-color: #ED4C67;

}
.dropdown-list li a {

display: block;
width: 100%;
box-sizing: border-box;
width: 150px;

}
.clear {

clear : both;

}

Setelah itu save, dan lihat hasilnya di browser.

Oke itu saja tutorial singkat mengenai dropdown, semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Membuat Dropdown Menu Dengan HTML Dan CSS.
Jangan lupa baca postingan saya sebelumnya Cara Menggunakan Font Eksternal Dengan CSS.

Read More

Cara Menggunakan Font Eksternal Dengan CSS

Cara Menggunakan Font Eksternal Dengan CSS - Font berfungsi untuk menentukan jenis/gaya dari tulisan. Dengan font, anda dapat membuat tampilan web semakin menarik.
Anda dapat mengatur jenis font dengan css, tepatnya dengan property font-family. Secara default, hanya ada beberapa font yang dapat anda gunakan, seperti Arial, Sans-Serif, dll.
Nah untuk mengatasi hal tersebut anda dapat menggunakan Font Eksternal, atau menggunakan file font sebagai font tersebut. Dalam hal ini CSS3 telah menyediakan property @font-face untuk melakukan hal tersebut.
Langsung saja berikut langkah-langkahnya.

1. Siapkan file font

Siapkan dulu file font tersebut, formatnya boleh .ttf, .otf, .woff, dll. Untuk perbedaanya dapat anda cari sendiri. Disini saya akan menggunakan font Josefin Slab, dan filenya adalah JosefinSlab-Regular.ttf.

2. Masukan property @font-face ke css anda

Buka file css anda, kemudian buat property @font-face, berikut kodenya.

@font-face {

font-family: 'Josefin Slab Regular';
src: url(JosefinSlab-Regular.ttf);

}

Penjelasan:

• Untuk font-family diisi dengan nama font yang anda gunakan
• Ganti nama file yang didalam url() dengan file font anda

3. Masukan ke selector CSS

Setelah itu, masukan font di @font-face tadi ke selector yang akan dipakaikan font external. Bisa di body, di class, dll. Cara pemanggilanya sama seperti biasa. Misalkan saya akan menggunakanya untuk class .ubahfont.

.ubahfont {

font-family: 'Josefin Slab Regular';

}

Isi font-family sesuai nama font-family di @font-face tadi.
Dan berikut hasilnya.

Untuk file fontnya dapat kalian download di Google, banyak disana.
Sekian postingan saya yang berjudul Cara Menggunakan Font Eksternal Dengan CSS.
Jangan lupa baca postingan saya sebelumnya Cara Membuat Elemen HTML Berada Di Tengah Secara Vertikal Dan Horizontal.

Read More

Cara Membuat Posisi Elemen HTML Berada Di Tengah Secara Vertikal Dan Horizontal

Cara Membuat Posisi Elemen HTML Berada Di Tengah Secara Vertikal Dan Horizontal - Salah satu permasalahan dalam memposisikan elemen di HTML adalah membuatnya berada di tengah secara vertikal dan horizontal. Saya sendiri juga mengalami hal yang sama sebelumnya. Dan setelah mencari-cari saya menemukan caranya.
Untuk memposisikan elemen di tengah secara vertikal dan horizontal kita dapat mengaturnya di CSS. Ada dua cara yang dapat kaloan coba. Berikut akan saya berikan langkah-langkahnya.

Cara 1 : Menggunakan Position Absolute

Cara pertama yaitu menggunakan position absolute. Berikut adalah kodenya.
HTML

<div class='bungkus'>

<div></div>

</div>

CSS

.bungkus div {

position: absolute;
top: 50%;
left: 50%;
translate: translate(-50%, -50%);
height: 200 px;
width: 200 px;
background-color: #ED4C67;

}

Dan berikut hasilnya

Cara 2 : Menggunakan Tabel

Cara kedua yaitu menggunakan property display table. Langsung saja berikut kodenya.
HTML

<div class="bungkus">

<span class="tengah">Teks Tengah</span>

</div>

CSS

.bungkus {

display: table;
background-color: #1289A7;
height: 200px;
width: 50%;
color: #fff;

}
.tengah {

display: table-cell;
vertical-align: middle;
text-align: center;

}

Dan berikut hasilnya

Itulah dua cara untuk memposisikan elemen ke tengah secara vertikal dan horizontal, semoga bermanfaat.
Sekian postingan saya yang berjudul Cara Membuat Posisi Elemen HTML Berada Di Tengah Secara Vertikal Dan Horizontal.
Jangan lupa baca postingan saya sebelumnya 5 Aplikasi Text Editor Terbaik

Read More

5 Aplikasi Text Editor Terbaik

5 Aplikasi Text Editor Terbaik Untuk PC - Untuk membuat sebuah program komputer atau ngoding, kita membutuhkan sebuah aplikasi yang disebut Text Editor. Text Editor adalah aplikasi yang digunakan untuk menulisan kode program dari program yang kita buat.
Seiring perkembangan jaman Text Editor semakin banyak dan semakin mumpuni fiturnya, banyak aplikasi text editor yang memberikan fitur yang memudahkan penggunanya, dan kali ini saya akan membagikan lima aplikasi yang menurut saya terbaik.

1. Sublime Text

Sublime Text merupakan text editor terbaik menurut saya, Sublime Text lebih mengedepankan kemudahan di aplikasinya. Tampilanya sederhana namun memiliki segudang fitur unggulan.
Sublime text menyediakan puluhan bahasa pemrograman didalamnya, anda juga dapat menginstal plugin untuk memudahkan pekerjaan anda.
Salah satu kelebihan sublime text lainya adalah Multi Platform, artinya aplikasi ini dapat diinstal di berbagai OS, dan juga anti ngelag di PC spek rendah.

2. Visual Studio Code

Visual Studio Code tak kalah keren dibanding app sebelumnya. Aplikasi ini dirancang oleh Microsoft, dan memiliki segudang fitur unggulan. Mulai dari bahasa pemrograman yang komplit, terhubung langsung dengan GIT, dll.
App ini juga memiliki tampilan yang keren banget, dan juga memiliki plugin-plugin yang keren abis.
Sama seperti Sublime Text, Visual Studio Code juga merupakan aplikasi multi platform, tersedia di berbagai OS.

3. Atom

Siapa sih yang gak tau app ini? Aplikasi ini merupakan aplikasi yang cukup populer. Alasanya karena aplikasi ini memiliki tampilan yang maksimal banget dan juga fitur default yang lengkap.
Untuk plugin, Atom merupakan rajanya, atom menyediakan plugin-plugin yang keren abis. Kekurangan dari aplikasi ini adalah aplikasi ini akan ngelag atau lemot di PC spek rendah, dikarenakan fiturnya yang super komplit. Dan aplikasi ini juga multi platform.

4. Notepad++

Bagi pengguna windows tentunya sudah tidak asing dengan aplikasi ini. Aplikasi ini merupakan versi kerenya Notepad bawaan windows. Dengan fitur yang tentunya keren abis.
Sama seperti sublime text, aplikasi ini ringan banget, dijamin gak akan ngelag atau lemot.
Bagi pengguna linux, sekarang sudah ada aplikasi kloningan Notepad ++, yaitu Notepad qq.

5. Bracket

Bracket adalah aplikasi yang dikembangkan oleh Adobe. Bracket lebih fokus ke pengembangan desain web. Maka dari itu fitur desain web di app ini sangat lengkap.
Bracket merupakan aplikasi multiplatform, jadi dapat diinstall di berbagai OS.
Itulah beberapa rekomendasi dari saya, semoga bermanfaat. Sekian postingan saya yang berjudul 5 Aplikasi Text Editor Terbaik Untuk PC

Read More