Cara Membuat Menu Navigasi Website Responsive Desktop&Smarphone

cara membuat navigasi website - bagi anda yang mempunyai sebuah website, pasti tidak asing lagi dengan fitur menu navigasi ini bukan ? betul. menu navigasi ini berguna sekali untuk mengganti-ganti halaman yang berada di website anda.

memudahkan pengunjung menemukan artikel yang mereka inginkan dengan melihat menu navigasi. pada artikel ini saya akan membuat menu navigasi responsive untuk desktop maupun untuk smatphone.


<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>

    <nav>
        <div class="toggle">
            <i class="fas fa-bars but"></i>
        </div>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">PORTFOLIO</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>

</body>
</html>E

body{
    margin:0;
    padding:0;
    font-family:sans-serif
}
nav {
    width: 100%;
    background: #00316b;
}
ul{
    width:80%;
    margin:0 auto;
    padding:0;
}
ul li{
    list-style:none;
    display:inline-block;
    padding:20px;
}
ul li:hover{
    background:#e91e63;
}
ul li a{
    color:#fff;
    text-decoration:none;
}
.toggle{
    width:100%;
    padding:10px 20px;
    background:#001f44;
    text-align:right;
    box-sizing:border-box;
    color:#fff;
    font-size:30px;
    display:none;
}
@media(max-width:768px){
    .toggle{
        display:block;
    }
    ul {
        width: 100%;
        display:none;
    }

    ul li {
       display: block;
       text-align: center;
     }
    .active{
        display:block;
    }
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $(".but").click(function () {
                $("ul").toggleClass("active");
            })
        })
    </script>

Demo

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Cara Membuat Menu Navigasi Website Responsive Desktop&Smarphone"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel