Harga Jual / Beli Bitcoin

Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly

23:26:00 Wahab Saputra 0 Comments

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 :

Menu Super Responsive Untuk Theme Atau Template Mobile-Friendly

View Demo 3

<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>

@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;
  }
}

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

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

0 komentar:

Jangan titip link.....saya pasti berkunjung balik....
Beri tahu saya di kotak komentar kalau sobat sudah Follow Blog ini, agar saya bisa segera Folback dan tidak ketinggalan Update artikel dari blog sobat...!!!