Sorry to bother, I want to create a menu like this one: sample menu could you please guide me? point me in the right direction? what would be the correct name of this kind of menu? what kind of language could I use? any similar examples out there? thanks a lot for your time.
Biz
これをチェックしてください、 http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
あなたのニーズに合ったものを選んでください。
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
nav {
background-color:#414956;
height: 100%;
position: fixed;
right: -220px;
top: 0;
-moz-transition: right 0.2s linear;
-o-transition: right 0.2s linear;
-webkit-transition: right 0.2s linear;
transition: right 0.2s linear;
width: 220px;
z-index: 9001;/* IT'S OVER 9000! */
padding-top: 4em;
}
#menuToggle {
background: #e3117c;
display: block;
position: fixed;
height: 40px;
right: 15%;
top: 33px;
width: 46px;
z-index:9999;
border-radius: 5px;
}
#menuToggle span {
background: white;
display: block;
height:6%;
left: 20%;
position: absolute;
top: 45%;
width: 60%;
}
#menuToggle span:before,
#menuToggle span:after {
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
top: -250%;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 100%;
}
#menuToggle span:after { top: 250%; }
nav a {
color: #fff;
display: block;
font-size: 20px;
margin: 0 0 0 30px;
font-weight: 300;
letter-spacing: 1px;
}
nav a:after {
background: #e3117c;
content: '';
display: block;
height: 2px;
-moz-transition: width 0.5s;
-o-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
width: 0;
margin-top: 0.2em;
}
n
.menu nav a:hover,.menu nav a:focus {
color: #e3117c;
}
.open nav {
right: 0;
}
.open #menuToggle span {
background: transparent;
left: 20%;
top: 45%;
}
.open #menuToggle span:before,
.open #menuToggle span:after {
background: white;
top: 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #menuToggle span:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#menuToggle .navClosed {
-moz-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
-webkit-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#menuToggle .navClosed:before,
#menuToggle .navClosed:after {
-moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;
-o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
-webkit-transition-delay: 0.1s, 0.1s;
transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;
}
#menuToggle .navOpen {
-moz-transition: background 0.1s linear 0.2s;
-o-transition: background 0.1s linear 0.2s;
-webkit-transition: background 0.1s linear;
-webkit-transition-delay: 0.2s;
transition: background 0.1s linear 0.2s;
}
#menuToggle .navOpen:before,
#menuToggle .navOpen:after {
-moz-transition: top 0.2s linear, -moz-transform 0.2s linear;
-o-transition: top 0.2s linear, -o-transform 0.2s linear;
-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
transition: top 0.2s linear, transform 0.2s linear;
}
/*-- //menu-navigation --*/
</style>
<script>
$('#show-hide-menu').click(function() {
if ($('#sidebar').hasClass('visible')) {
$('#sidebar').removeClass('visible');
} else {
$('#sidebar').addClass('visible');
}
});
</script>
</head>
<body>
</head>
<body>
<div class="menu">
<a href="" id="menuToggle"> <span class="navClosed"></span> </a>
<nav>
<a href="#home" class="active scroll">Home</a>
<a href="#about" class="scroll">About</a>
<a href="#services" class="scroll">Services</a>
<a href="#gallery" class="scroll">Gallery</a>
<a href="#news" class="scroll">News</a>
<a href="#price" class="scroll">price</a>
<a href="#contact" class="scroll">Contact</a>
</nav>
</div>
<script>
(function($){
// Menu Functions
$(document).ready(function(){
$('#menuToggle').click(function(e){
var $parent = $(this).parent('.menu');
$parent.toggleClass("open");
var navState = $parent.hasClass('open') ? "hide" : "show";
$(this).attr("title", navState + " navigation");
// Set the timeout to the animation length in the CSS.
setTimeout(function(){
console.log("timeout set");
$('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
}, 200);
e.preventDefault();
});
});
})(jQuery);
</script>
<!--// navbar-->
</body>
</html>
</body>
</html>