Cara Membuat Menu Bar Cantik di Blog

Minggu, 05 Januari 2014

Membuat Menu Bar di Blog hanya membutuhkan html Unordered List (ul li) dan sedikit CSS untuk membuatnya cantik.

Pada tutorial kali ini, kita akan membuat Menu Bar cantik berwarna Biru Hitam, penampakannya seperti dibawah ini.

Cara Membuat Menu Bar Cantik di Blog
Menu Bar Cantik

Menu tersebut saya adaptasi dari CSSMenumaker.com, hanya saya rubah backgrundnya, dari yang awalnya menggunakan gambar saya rubah hanya dengan warna (rgb) saja. Tujuannya tentu saja untuk menghemat waktu Load blog kita.

Baik, langsung saja kita mulai Cara Membuat Menu Bar-nya.


1. Dasar Pembuatan Menu Bar


Kita semua tahu bahwa untuk membuat sebuah menu bar, kita harus menyusun unordered list (ul li) sebanyak jumlah daftar yang akan kita buat.

Misal kita akan membuat 4 Daftar Menu, maka kita harus menyusun ul li sebanyak 4x.

Contoh :

<div id="cssmenu">
<ul>
   <li class="active"><a href="index.html"><span>Home</span></a></li>
   <li><a href="#"><span>Products</span></a></li>
   <li><a href="#"><span>About</span></a></li>
   <li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>


Mungkin teman-teman akan bertanya kenapa ada div yang membungkus menunya ? ini fungsinya nanti untuk memberi border blue dibagian bawah menu kita nantinya, dan kalau tidak salah sejauh yang sedar memang sebuah Menu Bar idealnya dibungkus dengan divisi atau navigasi (html 5).


2. Membuat Menu Bar Menjadi Horisontal


Default dari sebuah unordered list adalah tegak (vertikal), ceritanya disini kita kan, akan Membuat Menu Bar yang mengarah ke samping alias horisontal, maka kita butuh css yang namanya float:left, kita tambahkan pada listnya.

Contoh ;

#cssmenu ul li {
  float: left;
  list-style: none;
}


List style disana berfungsi sebagai CSS Reset yaitu untuk menghapus bulatan kecil yang secara default menempel di unordered list.


3. Mempercantik Warna Menu Bar dengan CSS


Agar hasilnya makin cantik kita perlu memberi warna pada Menu Bar kita. Cara pemberian warna cukup mudah yaitu dengan menambah, background: warna pada setiap menunya.

Contoh :

#cssmenu {
zoom: 1;
height: 69px;
background: rgb(121, 121, 238);
border-radius: 2px;
width: auto;
width: 600px;
}

#cssmenu ul {
background: rgb(58, 55, 55);
}

#cssmenu ul li a:hover, #cssmenu ul li.active a {
background: rgb(121, 121, 238);
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
opacity: 1;
}


Disini kita menambahkan warna biru ketika mouse mengarah ke menu (hover).

Source lengkap Menu Bar bisa teman-teman copy dibawah ini :

Source CSS Menu Bar Cantik :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: 'Capriola', sans-serif;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: '';
  display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu {
  zoom: 1;
  height: 69px;
  background: rgb(121, 121, 238);
  border-radius: 2px;
  width: auto;
}
#cssmenu ul {
  background: rgb(58, 55, 55);
}
#cssmenu ul li {
  float: left;
  list-style: none;
}
#cssmenu ul li a {
  display: block;
  height: 37px;
  padding: 22px 30px 0;
  margin: 4px 2px 0;
  border-radius: 2px 2px 0 0;
  text-decoration: none;
  font-size: 15px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  font-weight: 400;
  opacity: .9;
}
#cssmenu ul li:first-child a {
  margin: 4px 2px 0 0;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  background: rgb(121, 121, 238);
  display: block;
  height: 37px;
  margin-top: 0px;
  padding-top: 26px;
  color: #004f7c;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
  opacity: 1;
}
</style>
<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>



Mungkin sampai disini dulu tutorial mengenai Cara Membuat Menu Bar Cantik di Blog yang bisa saya bagikan kepada teman-teman. Hehe, maaf kalau kurang jelas, soal masih pemula dalam Membuat Menu Bar.

Artikel Terkait dengan Cara Membuat Menu Bar Cantik di Blog

Posting Komentar