Bottom Right Menu

Developer
Samuel Janes
Size
2,426 Kb
Views
42,504
  1. Bottom Right Menu Previews
  2. Bottom Right Menu HTML Codes
  3. Bottom Right Menu CSS Codes
  4. Bottom Right Menu JS Codes

How do I make an bottom right menu?

What is a bottom right menu? How do you make a bottom right menu? This script and codes were developed by Samuel Janes on 14 September 2022, Wednesday.

Bottom Right Menu Previews
IQ Test

Bottom Right Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bottom Right Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav"> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <div class="nav_buttons"> <div class="nav-btn"> <img src="http://placekitten.com/g/3840/3840" /> <div class="label"> <p>About</p> </div> </div> <div class="nav-btn"> <img src="http://placekitten.com/g/55/55" /> <div class="label"> <p>Work</p> </div> </div> <div class="nav-btn"> <img src="http://placekitten.com/g/5000/5000" /> <div class="label"> <p>Contact</p> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bottom Right Menu - Script Codes CSS Codes

body{ font-family: Arial, Sans-Serfid; overflow-x:hidden; padding:0; margin:0;
}
.nav{ widtH:55px; height:55px; background-color:#f93645; border-radius:50%; position:fixed; right:15px; bottom:15px; transition: .15s ease-in-out; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; z-index:3;
}
.hamburger{ widtH:25px; height:25px; position:absolute; top:15px; right:15px;
}
.hamburger span{ width:25px; height:5px; position:absolute; background-color:white; transition: .15s ease-in-out; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -o-transition: .15s ease-in-out;
}
.hamburger span:nth-child(1){ top:0;
}
.hamburger span:nth-child(2){ top:10px;
}
.hamburger span:nth-child(3){ top:20px;
}
.hamburger span:nth-child(3):after{
}
.hamburger.open span:nth-child(1){ top:10px; transform: rotate(-45deg);
}
.hamburger.open span:nth-child(2){ opacity:0;
}
.hamburger.open span:nth-child(3){ top:10px; transform: rotate(45deg);
}
.hamburger.open{ animation: rotate-hamburger-x .25s linear; -webkit-animation: rotate-hamburger-x .25s linear;
}
@keyframes rotate-hamburger-x{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }
}
@-webkit-keyframes rotate-hamburger-x{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }
}
.nav_buttons{ position:absolute; bottom:70px; height:195px; opacity:0; transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transform: rotateX(60deg); transform-origin:center bottom; border-radius:50px; z-index:1;
}
.nav_buttons.open{ opacity:1; transform: rotateX(0deg)
}
.nav-btn{ width:55px; height:55px; display:block; margin-bottom:15px; background-color:transparent; border-radius:50%; position:relative;
}
.nav-btn img{ width:55px; height:55px; position:absolute; border-radius:50%; right:0; top:0; z-index:4;
}
.label{ position:absolute; right:24px; widtH:100px; height:55px; border-radius: 27.5px; overflow:hidden; transition: .15s ease-in-out; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; color:black; opacity:0.35;
}
.label p { font-size:17.5px; text-align:left;
}
.label-animate{ opacity:1;
}

Bottom Right Menu - Script Codes JS Codes

$(window).load( function(){ $(".hamburger").toggleClass("open"); $(".nav_buttons").toggleClass("open"); setTimeout( function(){ $(".hamburger").removeClass("open"); $(".nav_buttons").removeClass("open"); }, 2500);
});
$(".hamburger").click( function(){ $(this).toggleClass("open"); $(".nav_buttons").toggleClass("open");
});
$(".nav-btn").hover( function(){ $(this).find(".label").toggleClass("label-animate");
});
Bottom Right Menu - Script Codes
Bottom Right Menu - Script Codes
Home Page Home
Developer Samuel Janes
Username SamuelJanes
Uploaded September 14, 2022
Rating 3
Size 2,426 Kb
Views 42,504
Do you need developer help for Bottom Right Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Samuel Janes (SamuelJanes) Script Codes
Name
Hamburger Menus
Multi-Step Sign Up Form
Material Ripple Effect on Button
CSS only tooltips
Modest Mouse Night on the Sun in CSS
Navigation layout
New Portfolio Idea
Clipped Navigation
Cool Loader
Navigation triangle
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!