lawang code

lawang Code


Tanyakan kode disini

Navigasi tidak mau ke hidden ketika resolusi diubah ke ukuran mobile

ditanyakan oleh Nizar 3 tahun yang lalu

Gimana yah gan ,ketika ukuran browser diperkecil navigasi tersebut akan ke hidden ke dalam toogle menu ?. mohon bantuannya, terima kasih.

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar html</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="assets/images/">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/slider.css">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/slider.js"></script>
</head>
<body>
<!-- Bagian Header -->
<div id="header">
    <div id="container">
        <div id="company-logo">
            <a href="/" title="">
                <img src="#" alt="">
            </a>
        </div>
<!-- Bagian Navigasi -->
    <div id="nav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Career</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
        </div>
    </div>
</div>
<!-- Bagian Slider -->
<div class="slider-container" id="caption-slide">
        <div class="slider">
            <div class="slide">
                <img src="assets/images/1.jpg" alt="">
                <span class="caption">No caption</span>
            </div>
            <div class="slide">
                <img src="assets/images/2.jpg" alt="">
                <span class="caption">No caption</span>
            </div>
            <div class="slide">
                <img src="assets/images/3.jpg" alt="">
                <span class="caption">No caption</span>
            </div>
        </div>
<!-- Slider Control -->
        <div class="switch" id="prev"><span></span></div>
        <div class="switch" id="next"><span></span></div>
    </div>
<!-- Bagian Content -->    
    <p>

    </p>
<!-- Bagian Footer --> 


<script>
    $("#slider-container").sliderUi({
        delay: 8000,
        speed: 100,
        cssEasing: "cubic-bezier(0.285, 1.015, 0.165, 1.000)"
    });
    $("#caption-slide").sliderUi({
        caption: true
    });
</script>

<script>
$(function(){
  $('#nav').click(function() {
    $(this).toggleClass('open');
  });
});
    </script>
</body>
</html>

CSS :

* {
    margin: 0px;
    padding: 0px;
}

body {
    background: grey; 
    font-family: arial, helvetica, sans-serif;
}

#container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
}

/*
.content {
  position: relative;
  padding-top: 80px;
}

.content p {
  margin-bottom: 10px;
}*/

#header {
    z-index: 2;
    position: fixed;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    border-bottom: solid 1px;
}

#company-logo {
    position: absolute;
    padding: 6px;
    left: 0;
}

#nav {
    position: absolute;
    right: 0;
}

#nav ul {
    list-style:none;
}

#nav ul li {
    float: left;
}

#nav ul li a {
    text-decoration: none;
    display: block;
    color: #2C7FBF;
    padding: 0 10px;
    font-weight: bold;
}

#nav ul li a:hover {
    color: #969696;
}

@media (max-width: 599px) {
  #header .container {
    width: 100%;
  }

  #nav {
    width: 100%;
    top: 60px;
  }
  #nav:before {
    content: '\2630';
    display: block;
    position: absolute;
    right: 3%;
    top: -50px;
    line-height: 40px;
    cursor: pointer;
  }
  #nav ul {
    background: #ffffff;
    width: 100%;
  }
  #nav ul li {
    float: none;
  }
  #nav ul li a {
    padding: 10px 3%;
    line-height: 20px;
    border-top: 1px solid #333;
  }
  #nav ul {
    transition: 350ms;
    -moz-transition: 350ms;
    -webkit-transition: 350ms;
    transform: perspective(600) rotate3d(0, 0, 0, 0);
    -moz-transform: perspective(600) rotate3d(0, 0, 0, 0);
    -webkit-transform: perspective(600) rotate3d(1, 0, 0, -90deg);
    transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
  }
  #nav.open ul {
    transform: translateY(0px);
    -moz-transform: translateY(0px);
    -webkit-transform: perspective(600) rotate3d(0, 0, 0, 0);
  }
}

Menampilkan 1-1 dari 1 hasil
handita okviyanto menjawab 3 tahun yang lalu :

biasanya sih ane cuma pake cssframework doang.. mungkin idenya bisa kayak gini

$(window).resize(function(){
 $('#nav').hide();
}


Anda harus login terlebih dahulu untuk memberikan komentar

Recent Tag

X 6
X 48
X 14
X 10
X 1
X 5
X 4
X 18
X 10

Bantuan

Help

Feedback

Help