Simple Flat UI Navigasi Menu

Simple Flat UI Navigasi Menu - Penggunaan Flat UI elemen ke dalam menu navigasi blog seperti Simple Menu UI Efek Flip CSS3 dan Simple Tooltip Menu Dropdown CSS3 serta Simple Flat UI Subscribe Email yang masih bernuansa Ui style.

Sebagai Penampakan Sederhananya sebagai berikut :

• DEMO CODE

CSS

/* Main Colors
===============================*/
.ijo {background:#16A085;}
.ijo:checked {background:#1ABC9C;}

.biru {background:#2980B9;}
.biru:checked {background:#3498DB;}

.ijo-enom {background:#2ecc71;}
.ijo-enom:checked {background:#27ae60;}

.abang {background:#C0392B;}
.abang:checked {background:#E74C3C;}

.peteng {background:#2C3E50;}
.peteng:checked {background:#34495E;}

.kuning {background:#F39C12;}
.kuning:checked {background:#F1C40F;}

/* CSS Menus
===============================*/
nav {
  position:relative;
  width:700px;
  margin:30px auto;
  margin-bottom:40px;
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
  padding:15px;
  text-align:left;
}

li {
  list-style:none;
  color:#fff;
  font-weight:600;
  display:inline-block;
}

li > a, a:visited {
  padding:15px;
  color:#fff;
  text-decoration:none;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

li > a:hover {
  background:rgba(0, 0, 0, 0.1);
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.nav-search {
  position:absolute;
  right:9px;
  top:11px;
  background:rgba(0, 0, 0, 0.1);
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
  border:none;
  padding:5px;
  padding-left:15px;
  outline:none;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.nav-search:focus {
  background:#fff;
  font-weight:600;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.nav-search::-webkit-input-placeholder {
   color: #FFF;
}

.nav-search:-moz-placeholder {
   color: #FFF;
}

.nav-search::-moz-placeholder {
   color: #FFF;
}

.nav-search:-ms-input-placeholder {
   color: #FFF;
}

/* Search Elements
===============================*/
.search {
  padding:10px;
  width:300px;
  display:block;
  margin:0 auto;
  margin-bottom:10px;
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
  border:none;
  color:#fff;
  outline:none;
}

.search:focus {
  background:#fff;
  border:2px solid #34495E;
  color:#34495E;
  font-weight:600;
}

.search::-webkit-input-placeholder {
   color: #FFF;
}

.search:-moz-placeholder {
   color: #FFF;
}

.search::-moz-placeholder {
   color: #FFF;
}

.search:-ms-input-placeholder {
   color: #FFF;
}

.search:-ms-input-placeholder {
   color: #FFF;
}

HTML

<nav class="ijo">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="abang">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="kuning">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="peteng">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="biru">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="ijo-enom">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

Silakan pilih warna sesuai dengan selera anda dan ganti tanda # dengan url anda