Cara Cepat Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly Update Terbaru

Sedikit Info Seputar Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly Terbaru 2017 - Hay gaes kali ini team Android Media, kali ini akan membahas artikel dengan judul Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly, kami selaku Team Android Media telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Media. semoga isi postingan tentang Artikel Menu Horizontal, Artikel Responsive Menu, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly Terbaru
link: Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly

Berbagi Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly Terbaru dan Terlengkap 2017

Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly - Menu ini memiliki navigasi dan tampilan yang cukup berbeda dengan menu responsive pada umumnya, sehingga sangat cocok untuk diterapkan pada web atau blog yang didesain mobile-friendly. Berikut coding penyusunnya terdiri dari HTML, CSS dan Jquery :

View Demo 3

HTML<header>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Studio</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <ul class="social">
      <li><a href="#" class="entypo-facebook"></a></li>
      <li><a href="#" class="entypo-twitter"></a></li>
      <li><a href="#" class="entypo-gplus"></a></li>
    </ul>
    <a href="#" class="logo">W</a>
    <a href="#" class="sign">Folow</a>
    
    <div class="mobile">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</header>
<a href="#" class="mobile-sign">Follow</a>

CSS@import url(http://fonts.googleapis.com/css?family=Rokkitt);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  color: #666;
}

a {
  text-decoration: none;
}

header {
  width: 100%;
  min-height: 100px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100001;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1000px) {
  header {
    position: relative;
  }
}

.container {
  margin: 0 auto;
  max-width: 1050px;
  padding: 0 20px;
  clear: both;
  position: relative;
}

@media (max-width: 1000px) {
  .container {
    padding: 100px 0 0;
  }
}

nav {
  display: block;
  position: relative;
}

@media (max-width: 1000px) {
  nav {
    display: none;
    left: 0;
  }
}

nav ul {
  list-style: none;
  text-align: center;
}

@media (max-width: 1000px) {
  nav ul {
    background-color: #eee;
  }
}

nav ul li {
  display: inline-block;
  margin: 40px 30px;
}

@media (max-width: 1000px) {
  nav ul li {
    width: 100%;
    border-top: 1px solid #ddd;
    margin: 0 !important;
    /* Sorry */
  }
}

nav ul li a {
  text-transform: uppercase;
  font-size: 14px;
  color: #aaa;
  letter-spacing: 1px;
  transition: all 0.3s;
}

@media (max-width: 1000px) {
  nav ul li a {
    padding: 1em 0;
    display: block;
  }
  nav ul li a:hover {
    background-color: #ddd;
  }
}

nav ul li a:hover {
  color: #000;
  transition: all 0.3s;
}

nav ul li:nth-child(3) {
  margin-right: 160px;
}

@media (max-width: 1000px) {
  nav ul li: nth-child(3) {
    margin-right: 180px;
  }
}

.social {
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  margin: 40px 0;
}

@media (max-width: 1000px) {
  .social {
    left: 20px;
  }
}

.social li {
  display: inline-block;
  float: left;
  margin-right: 15px;
}

.logo {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  line-height: 70px;
  text-align: center;
  margin-left: -35px;
  background-color: #333;
  color: white;
  font-size: 2em;
}

.sign {
  padding: 0.8em 1.2em;
  position: absolute;
  top: 25px;
  right: 0;
  background-color: #2e76da;
  color: white;
  box-shadow: inset 0px -3px 0px #1c539e;
  transition: all 0.3s;
}

@media (max-width: 1000px) {
  .sign {
    display: none;
  }
}

.sign:hover {
  background-color: #1c539e;
  transition: all 0.3s;
}

.mobile {
  display: none;
  position: absolute;
  right: 5%;
  top: 0;
  width: 40px;
  margin: 36px 0;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .mobile {
    display: block;
  }
}

.mobile span {
  height: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 100%;
  display: block;
  background-color: #aaa;
  margin: 3px 0;
}

.mobile-sign {
  display: none;
  position: relative;
  padding: 0.8em 1.2em;
  background-color: #2e76da;
  color: white;
  box-shadow: inset 0px -3px 0px #1c539e;
  transition: all 0.3s;
  text-align: center;
}

.mobile-sign:hover {
  background-color: #1c539e;
}

@media (max-width: 1000px) {
  .mobile-sign {
    display: block;
  }
}

@media all and (max-width: 1150px) {
  nav ul li {
    margin: 40px 10px;
  }
  .social {
    left: 5%;
  }
  .sign {
    right: 20px;
  }
}

Jquery$(".mobile").click(function() {
  $("nav").slideToggle();
});

var menu = $("nav");
jQuery(window).on('resize', function() {
  if (!jQuery(".mobile").is(":visible") && !menu.is(':visible')) {
    menu.css({
      'display': ''
    });
  }
});

Itulah sedikit Artikel Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly terbaru dari kami

Semoga artikel Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Media. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly