Beranda / CSS / HTML / Javascript

Cara Membuat Menu Navigasi Website Responsive Desktop&Smarphone

Oleh Surya Posting Komentar
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

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