Free CSS menu horisontal dan vertikal

Gratis Horisantal CSS menu tanpa gambar

Horisontal CSS menu tanpa gambar h01

Kode HTML Menu h01:

<div id="navbar-h01">
 <ul id="navlist-h01">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
 </ul>
</div>

Kode CSS Menu h01:

#navbar-h01 {font:bold .76em tahoma, arial, sans-serif;width:100%;margin:0;padding:0;float:left;background:#fff;}
#navbar-h01 ul {margin:0;padding:0 0 0 10px;list-style:none;}
#navlist-h01 li {display:inline;list-style:none;}
#navlist-h01 li a {display:block;float:left;margin:0;padding:6px 9px 6px 10px;text-decoration:none;background:#000;}
#navlist-h01 li a:link, #navlist-h01 li a:visited {color:#fff;border-right:1px solid #fff;}
#navlist-h01 li a:hover, #navlist-h01 li #current {background:#f00;}

Preview CSS Horisontal CSS Menu h01:

Horisontal CSS menu tanpa gambar h02

Kode HTML Menu h02:

<div id="navbar-h02">
 <ul id="navlist-h02">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
 </ul>
</div>

Kode CSS Menu h02:

#navbar-h02 {font:bold .76em tahoma, arial, sans-serif;width:100%;margin:0;padding:0;float:left;background:#fff;}
#navbar-h02 ul {margin:0;padding:0 0 0 10px;list-style:none;}
#navlist-h02 li {display:inline;list-style:none;}
#navlist-h02 li a, #navlist-h02 li a:link {margin:0;padding:6px 9px 6px 10px;background-color:#000;color:#fff;text-decoration:none;float:left;border-right:1px solid #fff;}
#navlist-h02 li a:hover, #navlist-h02 li a:active {color:#ff0;text-decoration:none;padding-top:4px;background:#333;}
#navlist-h02 li #current {color:#ff0;border-color:#fff;background:#333;}

Preview CSS Horisontal CSS Menu h02:

Horisontal CSS menu tanpa gambar h03

Kode HTML Menu h03:

<div id="navbar-h03">
 <ul id="navlist-h03">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
 </ul>
</div>

Kode CSS Menu h03:

#navbar-h03 {font:bold .76em tahoma, arial, sans-serif;width:100%;margin:0;padding:0;float:left;background:#fff;}
#navbar-h03 ul {margin:0;padding:0 0 0 10px;list-style:none;}
#navlist-h03 li {display:inline;list-style:none;}
#navlist-h03 li a {display:block;float:left;margin:0 0 2px 0;padding:5px 8px;text-decoration:none;background:#f90;border:1px solid #ddd;border-color:#eee #000 #333 #eee;}
#navlist-h03 li a:link, #navlist-h03 li a:visited {color:#000;border-right:1px solid #333;}
#navlist-h03 li a:hover, #navlist-h03 li #current {background:#fc3;padding:6px 7px 4px 9px;border-color:#000 #eee #eee #000;}

Preview CSS Horisontal CSS Menu h03:

Horisontal CSS menu tanpa gambar h04

Kode HTML Menu h04:

<div id="navbar-h04">
 <ul id="navlist-h04">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
 </ul>
</div>

Kode CSS Menu h04:

#navbar-h04 {font:bold .76em tahoma, arial, sans-serif;margin:0;padding:0;width:100%;float:left;background:#fff;}
#navbar-h04 ul {margin:0;padding-left:10px;list-style:none;}
#navlist-h04 {border-bottom:1px solid #000;padding-bottom:25px;}
#navlist-h04 li {display:inline;list-style:none;}
#navlist-h04 li a:link, #navlist-h04 li a:visited {background:#fcc;border:1px solid #000;color:#666;float:left;margin:0 1px;padding:5px 8px;text-decoration:none;}
#navlist-h04 li a:link#current, #navlist-h04 li a:visited#current {background:#fff;border-bottom:1px solid #fff;color:#000;}
#navlist-h04 li a:hover {background:#fcf;color:#000;}

Preview CSS Horisontal CSS Menu h04:

Gratis Vertikal CSS menu tanpa gambar

Vertikal CSS menu tanpa gambar v01

Kode CSS Menu v01:

<div id="sidebar-v01">
 <ul class="menulist-v01">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
  <li><a href="#">Menu List 06</a></li>
 </ul>
</div>

Kode CSS Menu v01:

#sidebar-v01 {font:bold .76em tahoma, arial, sans-serif;margin:0;padding:0;}
#sidebar-v01 ul, .menulist-v01 li {list-style:none;margin:0;padding:0;}
.menulist-v01 {width:100%;background:#fff;margin:0;padding:0;}
.menulist-v01 li {background:#000;border:1px solid #000;margin-bottom:2px;}
.menulist-v01 li a {color:#fc0;text-decoration:none;padding:6px 10px;display:block;}
.menulist-v01 li a:hover {color:#fff;padding:6px 10px;background:#f00;}
.menulist-v01 li #current {color:#fff;padding:6px 10px;background:#f00;border-color:f00;}

Preview CSS Vertikal CSS Menu v01:

Vertikal CSS menu tanpa gambar v01

Kode HTML Menu v02:

<div id="sidebar-v02">
 <ul class="menulist-v02">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
  <li><a href="#">Menu List 06</a></li>
 </ul>
</div>

Kode CSS Menu v02:

#sidebar-v02 {font:bold .76em tahoma, arial, sans-serif;margin:0;padding:0;}
#sidebar-v02 ul, .menulist-v02 li {list-style:none;margin:0;padding:0;}
.menulist-v02 {width:100%;background:#ccc;margin:0;padding:0;}
.menulist-v02 li {background:#000;border:1px solid #000;margin-bottom:2px;}
.menulist-v02 li a {display:block;text-decoration:none;color:#fff;padding:6px 10px;}
.menulist-v02 li a:hover {color:#fff;background:#999;padding:3px 10px 9px 10px;}
.menulist-v02 li #current {color:#fff;background:#999;padding:6px 10px;}

Preview CSS Vertikal CSS Menu v02:

Vertikal CSS menu tanpa gambar v03

Kode HTML Menu v03:

<div id="sidebar-v03">
 <ul class="menulist-v03">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
  <li><a href="#">Menu List 06</a></li>
 </ul>
</div>

Kode CSS Menu v03:

#sidebar-v03 {font:bold .76em tahoma, arial, sans-serif;margin:0;padding:0;}
#sidebar-v03 ul, .menulist-v03 li {list-style:none;margin:0;padding:0;}
.menulist-v03 {width:100%;background:#fdf5e6;margin:0;padding:0;}
.menulist-v03 li {background:#ffc782;margin-bottom:2px;}
.menulist-v03 li a {position:relative;padding:6px 10px;text-decoration:none; display:block;color:#000;border:1px solid #ddd;border-color:#eee #333 #333 #eee;}
.menulist-v03 li a:hover, .menulist-v03 li #current {color:#000;padding:7px 9px 5px 11px;border-color:#000 #eee #eee #000;}

Preview CSS Vertikal CSS Menu v03:

Vertikal CSS menu tanpa gambar v04

Kode HTML Menu v04:

<div id="sidebar-v04">
 <ul class="menulist-v04">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
  <li><a href="#">Menu List 06</a></li>
 </ul>
</div>

Kode CSS Menu v04:

#sidebar-v04 {font:bold .76em tahoma, arial, sans-serif;margin:0;padding:0;}
#sidebar-v04 ul, .menulist-v04 li {list-style:none;margin:0;padding:0;}
.menulist-v04 {width:100%;background:#999;margin:0;padding:0;border-bottom:2px solid #999;border-right:2px solid #999;}
.menulist-v04 a {display:block;text-decoration:none;margin:2px 0 2px 0;color:#000;background:#ddd;border-width:1px;border-style:solid;border-color:#000;border-left:14px solid #333;padding:4px 14px 6px;}
.menulist-v04 a:hover, .menulist-v04 li #current {background:#eee;border-color:#000;padding:6px 14px 4px 16px;}

Preview CSS Vertikal CSS Menu v04:

Vertikal CSS menu tanpa gambar v05

Kode HTML Menu v05:

<div id="sidebar-v05">
 <ul class="menulist-v05">
  <li><a href="#" id="current">Menu List 01</a></li>
  <li><a href="#">Menu List 02</a></li>
  <li><a href="#">Menu List 03</a></li>
  <li><a href="#">Menu List 04</a></li>
  <li><a href="#">Menu List 05</a></li>
  <li><a href="#">Menu List 06</a></li>
 </ul>
</div>

Kode CSS Menu v05:

#sidebar-v05 {font:bold .76em tahoma, arial, sans-serif;margin:0;padding:0;}
#sidebar-v05 ul, .menulist1 li {list-style:none; background:#637c89}
.menulist-v05 {width:100%;background:#ccc;}
.menulist-v05 li {border:1px solid #000;margin-bottom:2px; background:#ccc}
.menulist-v05 li a, .menulist-v05 li a:link {display:block;padding:5px;color:#000;border-left:4px solid #fff;text-decoration:none;}
.menulist-v05 li a:hover {border-color:#000;background:#ccc;color:#f00;}

Preview CSS Vertikal CSS Menu v05:

Internet Teknologi Informasi

Blog yang membahas tentang Internet, Komputer, Teknologi Informasi termasuk html, css, javascript, tips, triks dan tutorials.