Cara membuat menu vertical dengan CSS

Setelah sekian lama tidak posting sebuah artikel, kali ini saya akan mencoba membuat tutorial cara membuat menu vertical dengan CSS, karena di comment artikel cara membuat menu dropdown dengan css ada yang minta dibuatkan tutorial dengan menu vertical.

Pertama, buatlah struktur HTML menu yang ingin dibuat :

<nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorial</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Profile</a></li>
    </ul>
</nav>

Setelah itu kita coba tambahkan submenu pada menu primary diatas, contohnya:

<nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorial</a>
     <ul>
     <li><a href="#">WordPress</a></li>
     <li><a href="#">Photoshop</a></li>
     <li><a href="#">Web Design</a>
        <ul>
         <li><a href="#">HTML</a></li>
         <li><a href="#">CSS</a></li>
        </ul>
     </li>
    </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Profile</a></li>
    </ul>
</nav>
Tampilan sebelum diberi code CSS

Memang terlihat sangat tidak menarik karena memang kita belum menambahkan code CSS untuk mempercantik tampilan menu tersebut. Langsung saja kita coba tambahkan beberapa code css, silahkan anda tambahkan code berikut ini ke file css anda :

nav ul ul {
 display: none;
}
nav ul li:hover > ul {
 display: block;
}
nav ul {
 background: #efefef;
 padding: 0;
 list-style: none;
 position: relative;
 display: inline-table;
}
nav ul:after {
 content: "";
 clear: both;
 display: block;
}
nav ul li {
 position:relative;
 width:150px;
}
nav ul li:hover {
 background: #1b9bff;
}
nav ul li:hover a {
 color: #fff;
}
nav ul li a {
 display: block;
 padding: 12px 25px;
 color: #757575;
 text-decoration: none;
}
nav ul ul {
 background: #5f6975;
 border-radius: 0px;
 padding: 0;
 position: absolute;
 top:0;
 left:100%;
}
nav ul ul li {
 float: none;
 position: relative;
}
nav ul ul li a {
 padding: 12px 25px;
 color: #fff;
}
nav ul ul li a:hover {
 background: #1b9bff;
}

nav ul ul ul {
 position: absolute;
 left: 100%;
 top:0;
}

Berikut penjelasan dari code CSS yang membuat vertical menu ini berjalan dengan baik:
nav ul li {
 position:relative;
 width:150px;
}

Pada kali ini si sub-menu li pertama (Home, Tutorial, Contact, Profil) di berikan position:relative, agar menu ini bisa kita atur posisinya sedemikian rupa sesuai kebutuhan dan juga menjadikan sub-menu pertama ini sebagai elemen induk.

nav ul ul {
 background: #5f6975;
 border-radius: 0px;
 padding: 0;
 position: absolute;
 top:0;
 left:100%;
}

Disini sub-menu dari menu (Wordpress, Photoshop, Web, Design) diberikan position:absolute; sehingga kita bisa mengatur posisinya sedemikian rupa untuk mengikuti elemen induk yang diberikan pada sub-menu pertama tadi silahkan anda coba atur-atur value dari property left dan top nya.

Jika anda sudah mencobanya maka tampilan akhirnya akan menjadi seperti ini:

Tampilan akhir Menu vertical dengan CSS
Sekian tutorial CSS tentang cara membuat menu vertical dengan CSS, jika ada kesalahan atau yang ingin ditanyakan silahkan di comment, Terima kasih

Struktur Dasar HTML

Struktur Dasar HTML, pada kesempatan kali ini saya akan mencoba memberikan informasi tentang struktur HTML. Seharusnya informasi ini diberikan saat pertama kali, agar lebih memahami tentang fungsi dari tiap-tiap struktur HTML

Berikut Struktur Dasar HTML:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>


Penjelasan Kode:

<html>
......
</html>


Tag <html> ini digunakan untuk menyatakan bahwa halam website menggunakan bahasa HTML.

<head>
......
</head>


Tag <head> adalah kepala dari halaman website. Pada tag ini anda bisa menambahkan banyak informasi seperti meta, css, javascript, font dan lain lain.

Contoh, memanggil external file css dan javascript dan font dari google webfont.
<head>
<title>
Contoh dari Title
</title>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript" href="script.js"></script>
</head>


<title>
.......
</title>


Tag <title> digunakan untuk menyatakan title website anda. Tag ini disimpan didalam tag <head></head>
Struktur HTML - Title

<body>
.......
</body>


Tag <body> ini digunakan untuk menampilkan isi dari website anda. Semua yang ingin anda tampilkan, dimasukan dalam tag <body> ini, bisa image, teks, video, musik dan lain-lain.

Sekian informasi Struktur Dasar HTML yang bisa saya sampaikan, semoga tutorial HTML ini bermanfaat dan mohon maaf apabila ada kesalahan atau kekurangan :)

Cara Membuat Search Form Responsive

Membuat sebuah Search form adalah hal sederhana yang mungkin orang-orang yang mengenal HTML dan CSS bisa membuatnya. Namun kali ini saya ingin berbagi pengalaman dalam membuat search form yang responsive. Dalam membuat search form ini, kita perlu menggunakan property dari CSS yaitu "position".
Jika masih bingung dalam penggunaan property position, teman-teman bisa melihat referensi langsung nya dari w3schools.

Langsung saja berikut code untuk membuat search form responsive:

Kode HTML:

<form class="searchform">
  <input type="text" name="s">
  <input type="submit" value="Search" title="Search Button">
</form>


Kode CSS:

.searchform{
  position:relative
}
.searchform input[type="text"]{
  background: #EBEBEB;
  height: auto;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-bottom: 0;
  padding: 7px;
  border: none;
  float: left;
  color: #5F5F5F;
  width: 100%;
  height: 34px;
  float: none;
  padding-right: 70px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="submit"]{
  background: #6B6B6B;
  border: none;
  padding: 7px;
  color: #fff;
  height: 34px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin:0
}


Silahkan anda coba kecilkan layar browser anda atau coba buka website anda dengan smartphone/tablet.
Sekian artikel belajar css tentang membuat search form responsive, silahkan dicoba dan semoga bermanfaat.

Cara mengetahui font yang digunakan website

Pada artikel kali ini saya akan berbagi pengetahuan saya tentang bagaimana mengetahui font yang digunakan pada sebuah website. Terkadang ketika kita menggunakan internet kemudian melihat website/blog orang lain terlihat unik karena font nya bagus, kita pun menjadi penasaran sebenarnya website itu menggunakan font apa?

Sebenarnya untuk mengetahui hal tersebut tidak terlalu sulit. Beberapa browser seperti Google Chrome, Mozilla Firefox dan Internet Explorer sudah menyediakan tools untuk mengetahui font sebuah website.

Berikut Cara mengetahui font yang digunakan website, pada contoh kali ini kita menggunakan contoh website ini sendiri http://ngajarcss.blogspot.com/

Menggunakan Google Chroome:

  1. Buka Google Chrome
  2. Masuk ke alamat http://ngajarcss.blogspot.com/
  3. Klik kanan text yang ingin di ketahui, misalnya title post. Kemudian pilih Inspect Elemen

  4. Inspect Element

  5. Kemudian akan muncul dibawah layar seperti ini

  6. Layar web developer

  7. Kemudian dibagian kanan, pilih computed dan cari font-family

  8. Computed tab

  9. Font family yang digunakan pada text post title adalah "Lato".

Begitulah yang saya ketahui tentang cara mengetahui font yang digunakan sebuah website. Pada dasarnya browser sudah mempunyai tools untuk mengetahui font atau warna dll. Biasanya kita bisa membuka layar web developer dengan menggunakan F12. Jika kurang dimenegrti silahkan tinggalkan comment. Tetap semangat Belajar HTML dan CSS.

Cara membuat menu Dropdown dengan CSS

Pada artikel kali ini saya akan mencoba berbagi tutorial tentang membuat menu dropdown dengan CSS. Sesuai dengan judulnya jadi disini kita hanya menerapkan code CSS dan tidak menggunakan javascript.

Pertama buatlah struktur HTML dari menu yang ingin di gunakan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Diatas adalah menu utama dan sekarang coba buat submenu, misalkan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Setelah anda membuat submenu, silahkan anda cek menu yang anda buat tadi. Memang terlihat kurang menarik dan biasa saja karena kita belum menambahkan style pada menu tersebut. Berikut code css yang membuat dropdown anda berjalan dengan baik:
nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

Berikut penjelasan dari code css:

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

Code ini mengartikan, bahwa elemen yang memiliki submenu, tidak akan di tampilkan. Dan akan tampil ketika terjadi hover pada li yang mempunyai submenu.

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}

Code ini adalah styling untuk submenu. Artikel mempunyai submenu WordPress, Photoshop dan Web Design. Nah style ini dimaksudkan untuk submenu.
Jika sudah maka tampilan akhir dari code diatas adalah seperti ini:

Dropdown menu dengan CSS


Sekian tutorial tentang membuat menu dropdown dengan CSS, jika ada yang salah atau yang ingin ditanyakan silahkan comment saja.

Bisa di download disini

Tutorial membuat template website

Sebuah template website memang berbeda-beda, namun dibalik perbedaan itu ada satu hal persamaan pada setiap website. Ya, mereka selalu mempunyai struktur yang sama, yaitu header, content dan footer. Apakah membuat template website itu susah? Dibilang susah ngga, dibilang gampang juga tidak! Ini tergantung dari kreatifitas orang yang membuatnya. Kali ini saya akan berbagi tutorial membuat dasar sebuah template website.

Goal dari tutorial ini adalah sebagai berikut:

Dasar membuat layout website
Langsung saja, silahkan buka code editor yang sering anda gunakan misalnya notepad++, sublime dkk. Buat sebuah file misalnya diberi nama index, jangan lupa format dari file ini ada html. Berikut code yang digunakan untuk index.html:

<html>
<head>
<title>Membuat Layout sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span class="title">Dipakai untuk Header</span>
</div>
<div class="content">
<div class="entry-content">
<span class="title">Isi dari konten</span>
</div>
<div class="sidebar">
<span class="title">Isi dari sidebar</span>
</div>
</div>
<div class="footer">
<span class="title">Isi untuk footer</span>
</div>
</div>
</body>
</html>

Klik save, kemudian kita tambahkan style untuk index.html . Kemudian buat file bernama style dengan format .css , simpan satu folder dengan file index.html tadi.
Berikut code untuk style.css:

.container{
margin:0 auto;
max-width:978px;
}

.header{
background:red;
height:200px;
}
.content{
overflow:hidden
}
.entry-content{
background:#eee;
width:642px;
float:left;
display:inline;
height:500px;
}
.title{
font-size:40px;
font-weight:bold;
}
.sidebar{
background:#21E28D;
width:336px;
display:inline;
float:left;
height:500px;
}

.footer{
background:#333;
height:200px;
}

Kemudian buka lagi index.html di browser anda. Jika tampilannya sama dengan goal diatas maka anda sukses dalam tutorial ini. Sekian tulisan pengalaman ngajarcss tentang Tutorial membuat template website ini, semoga bermanfaat.

Cara menambah code css di Blogger

Pada artikel sebelumnya yang berjudul "Cara membuat box code di blogger" kita diharuskan menambahkan code css pada blogger, namun muncul sebuah pertanyaan. Bagaimana cara menambahkan code css di blogger?

Ya, memang banyak pada kalangan beginner di blogger yang mencari-cari dimana tempat untuk menambah/mengganti code css untuk website nya. Berbeda halnya dengan platform lain yang code stylenya di pisahkan dengan file-file lain yang biasanya disimpan dalam file bernama "style.css", namun di Blogger ini kita hanya mengedit 1 file saja karena memang format yang digunakan adalah xml. Berikut adalah cara menambah code css di blogger:

  1. Masuk ke blogger dashboard
  2. Pilih website anda
  3. Masuk ke menu Template
  4. Pada option Live on Blog, klik Edit HTML. Kemudian akan muncul barisan code xml, klik pada field tersebut(maksudnya kolom code tersebut).
  5. Tekan Ctrl+F , kemudian ketik ]]></b:skin>
  6. Jika berhasil, anda bisa menambahkan code css anda di atas code ]]></b:skin>

Contoh penambahan code css:

.kotak{
width:200px;
height:200px;
background:#000;
}

]]></b:skin>

Selamat mencoba dan semoga bermanfaat.