Cara Membuat Menu Navbar Efek Rotate

Menu Navbar adalah sebuah navigasi menu dalam sebuah website yang tentu sangat penting untuk digunakan oleh user ,bagi seorang web design tentu akan membuat semenarik dan mudah digunakan bagi pengunjung website. Karena sebagian Menu ada yang langsung terlihat bahkan tersembunyi, dalam kasus kali ini saya akan membuat sebuah menu navbar tersembunyi. Oke kalau begitu jangan kemana-mana langsung saja ikutin langkah-langkah berikut ini:Langkah Pertama buat file HTML seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Membuat Menu Navbar Efek Transform CSS</title>
</head>
<body>
	<div class="page">
		<ul class="menu">
			<li><a href="">Beranda</a></li>
			<li><a href="">Profile</a></li>
			<li><a href="">Tentang Kami</a></li>
		</ul>
		<div id="btn-toggle">
			<i class="open">
				<span></span>
				<span></span>
				<span></span>
			</i>
			<i class="close">
				<span></span>
				<span></span>
				<span></span>
			</i>
		</div>
		<div class="container">
			<div>
				<h1>Where does it come from?</h1>
				<hr>
                               <!-- Gunakan Text dummy lorem ipsum didalam tag paragraph -->
				<p>Lorem Ipsum is simply dummy text  <br>
					Lorem Ipsum is simply dummy text <br>
				It is a long established fact that a reader (injected humour and the like). 
                            </p>
			</div>
		</div>
	</div>
</body>
</html>

Langkah Kedua tambahkan style CSS seperti dibawah ini agar tampilan Menu Navbar lebih terlihat menarik

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap'); 
		* {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }
        html,
        body {
            font-family: 'Josefin Sans', sans-serif;
            font-size: 16px;
            overflow: hidden;
            height: 100%;
        }
        .page{
            background-color: #006c68;
            height: 100%;
        }
        .menu{
            position: fixed;
            bottom:230px;
            left: 20px;
            list-style: none;
        }
        .menu li{
            margin-bottom: 90px;
            transform: translateX(-300px);
            transition: transform .7s cubic-bezier(1, 0.005, 0.24, 1)
        }
        .menu li:nth-child(2){
            margin-left: 40px
        }
        .menu li:nth-child(3){
            margin-left: 80px
        }
        .menu a{
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #e5e5e5;
            transition: color .2s;
            font-weight: bold;
        }
        .container{
            padding: 50px 20%;
            height: 200%;
            background-color: #fff;
            transition: transform .7s cubic-bezier(1, 0.005, 0.24, 1);
            transform-origin: top left;
            z-index: 2;
            box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.4)
        }
        .container div{
            font-size: 1.5em;
            text-align: justify;
            height: 50%;
            overflow-y: auto
        }
        #btn-toggle{
            position: absolute;
            z-index: 3;
            background-color: #ff720b;
            border-bottom-right-radius: 100%;
            width: 100px;
            height: 75px;
            cursor: pointer;
        }
        #btn-toggle i {
            position: absolute;
            margin: 10px 25px;
            transition: transform .7s cubic-bezier(1, 0.005, 0.24, 1)
        }
        #btn-toggle i span{
            display: block;
            width: 35px;
            height: 5px;
            background-color: #fff;
            margin: 6px 0;
        }
        #btn-toggle i.close span:nth-child(1){
            transform: rotate(-45deg) translate(-9px, 6px)
        }
        #btn-toggle i.close span:nth-child(2){
            opacity: 0;
        }
        #btn-toggle i.close span:nth-child(3){
            transform: rotate(45deg) translate(-8px, -8px)
        }
        #btn-toggle i.open{
            transform-origin: -160px -100px;
        }
        #btn-toggle i.close{
            transform: rotate(20deg);
            transform-origin: -100px -160px;
        }
        .rotate .container{
            transform: rotate(-30deg)
        }
        .rotate #btn-toggle .open{
            transform: rotate(-20deg)
        }
        .rotate #btn-toggle .close{
            transform: rotate(0)
        }
        .rotate .menu li{
            transform: translateX(0);
            transition: transform .35s .45s cubic-bezier(0.175, 0.885, 0.32, 1.275)
        }
        .rotate .menu li:nth-child(2){
            transition-delay: .47s;
        }
        .rotate .menu li:nth-child(3){
            transition-delay: .48s
        }

Langkah Ketiga sisipkan script dari javascript yang berfungsi untuk menampilkan menu navbar supaya terlihat efek rotate nya:

<script>
		document.getElementById('btn-toggle').addEventListener('click', function(){
			document.getElementsByClassName('page')[0].classList.toggle('rotate');
		})
	</script>

Demikian pembahasan tentang Cara Membuat Menu Navbar Efek Rotate ,semoga bermanfaat dan sampai jumpa dengan pembahasan lainnya

terima kasih