create Menu Button Broaden To Navigation Menu On Click on utilizing html css and js. Designed by Mathieu Lavoie a codepen person.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Mathieu Lavoie</title>
<hyperlink rel="stylesheet" href="https://csshint.com/menu-button-expand-to-navigation-menu-on-click/./fashion.css">
</head>
<physique>
<!-- partial:index.partial.html -->
<div class="menuContainer"> <span class="menuTitle">menu</span>
<div class="menu">
<ul>
<li> <a href="#">reveals</a></li>
<li> <a href="#">media</a></li>
<li> <a href="#">about</a></li>
<li> <a href="#">merch</a></li>
</ul>
</div>
</div>
<!-- partial -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="./script.js"></script>
</physique>
</html>
CSS
@import url(https://fonts.googleapis.com/css?household=Inconsolata:400,700);
physique {
background: #111;
coloration: #D8D8D8;
}
* li {
list-style: none;
}
* a {
text-decoration: none;
coloration: #D8D8D8;
}
.menuContainer {
show: block;
place: relative;
width: 750px;
margin: 0 auto;
}
.menu {
width: 150px;
top: 150px;
show: block;
place: relative;
margin: 0px auto;
background: #D8D8D8;
border-radius: 100%;
border: 1px strong #D8D8D8;
cursor: pointer;
z-index: 10;
}
.menu ul {
padding: 0;
width: 100%;
show: none;
place: relative;
text-align: middle;
prime: 35px;
}
.menu ul li {
show: inline-block;
place: relative;
font-family: Inconsolata;
font-size: 25px;
margin-right: 25px;
box-sizing: border-box;
width: 125px;
letter-spacing: 3px;
text-align: middle;
line-height: 50px;
}
.menu ul li:energetic {
text-transform: uppercase;
}
.menu ul li:last-child {
margin-right: 0;
}
.menu ul li:hover {
background: #D8D8D8;
}
.menu ul li:hover a {
coloration: #000;
}
.menuTitle {
line-height: 150px;
width: 150px;
coloration: #000;
text-transform: uppercase;
font-size: 40px;
text-align: middle;
letter-spacing: 8px;
show: block;
place: relative;
margin: 0 auto;
prime: 150px;
z-index: 11;
padding-left: 10px;
font-family: Inconsolata;
cursor: pointer;
-webkit-user-select: none;
}
JAVASCRIPT
var $menu = $('.menu');
var $wholeMenu = $('.menu, .menuTitle');
var $menuUl = $('.menu ul');
var $menuTitle = $('.menuTitle');
var $menuContainer= $('.menuContainer');
var rely = 0;
var click on = true;
$wholeMenu.click on(operate(){
if (click on) {
click on = false;
$menuTitle.css({'z-index': 9});
var tl = new TimelineLite();
tl.to($menu, 0.4, {css:{
width: 750,
background: "#000",
borderRadius: 0,
borderTop: "1px strong #D8D8D8"
}, ease:Expo.easeInOut});
tl.to($menuTitle, 0.25, {x:0, y:-110, coloration:"#fff"});
setTimeout(operate(){
$menuUl.fadeIn();
}, 250);
} else {
click on = true;
$menuTitle.css({'z-index': 11});
$(this).css({borderRadius: "100%"})
var tl = new TimelineLite();
tl.to($menu, 0.25, {css:{
width: 150,
background: "#FFF",
borderRadius: "100%",
borderTop: "1px strong #D8D8D8"
}, ease:Expo.easeInOut})
tl.to($menuTitle, 0.25, {x:0, y:0, coloration:"#000"});
$menuUl.conceal();
};
})
