Lompat ke konten Lompat ke sidebar Lompat ke footer
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
Surya
Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

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