Responsif Navigation Menu Simpel CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Responsif Navigation Menu Simpel CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Responsif Navigation Menu Simpel CSS
link : Responsif Navigation Menu Simpel CSS

Responsif Navigation Menu Simpel CSS

Responsif Navigation Menu Simpel CSS - Menu navigas adalah bagian terpenting dalam website, karena bertugas mengantarkan pengunjung ke menu yang dituju, kali ini Juragan mau berbagi tutorial membuat navigasi sederhana dengan CSS. begini hasilnya

HTML-nya adalah

<header>
    <div class="nav">
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="tutorials"><a class="active" href="#">Tutorials</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="news"><a href="#">Newsletter</a></li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
   </div>
 </header>

CSS-nya adalah

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
}

Oke gengs, kalo udah jadi Juragan pamit dulu ya, seee youu

Demikianlah Artikel Responsif Navigation Menu Simpel CSS

Sekianlah artikel Responsif Navigation Menu Simpel CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Responsif Navigation Menu Simpel CSS dengan alamat link http://jendeladuniainternet.blogspot.com/2015/12/responsif-navigation-menu-simpel-css.html

Tweet