Sunday, 23 September 2018
CSS isometric navigation menu | Responsive top navigation menu css | coo...
Source code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>isometric menu</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:700");
body {
margin: 0;
height: 100vh;
width: 100vw;
background: #000000;
overflow: hidden;
}
* {
box-sizing: border-box;
}
#page {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#center {
position: absolute;
z-index: 5;
background-color: #ffff64;
transition: 0.25s;
animation: float 1s infinite;
}
#center .icon {
padding: 40px 0px;
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
/* transform: skew(-50deg); */
}
.bar {
height: 15px;
width: 50%;
background: #000000;
}
.btn {
width: 200px;
height: 200px;
}
nav {
position: relative;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
width: 200px;
height: 200px;
}
.btn.item {
position: absolute;
top: 0;
z-index: 1;
transition: all 0.25s ease-out;
left: 0px;
top: 0px;
opacity: 1;
}
.btn.item:not(.opened) {
background: rgba(255, 255, 255, 0.5);
}
#center:hover {
cursor: pointer;
background: #ff1464 !important;
}
#center:hover .bar {
background: #ffffff;
}
.btn.item span:hover {
cursor: pointer;
background: #ff1464 !important;
color: #ffffff !important;
}
.btn.item span {
opacity: 0;
}
.btn.item.opened span {
opacity: 1;
background: #ffff64;
color: #000000;
padding: 0 15px;
}
.btn.item.opened {
font-family: "open sans";
font-size: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
#up,
#bottom {
top: 20px;
left: -20px;
}
#right,
#left {
top: 40px;
left: -40px;
}
#up.opened {
top: -100%;
left: 0;
}
#right.opened {
left: 140%;
top: 0;
}
#bottom.opened {
top: 100%;
left: 0;
}
#left.opened {
left: -140%;
top: 0;
}
#center.close .bar.top {
position: absolute;
top: 40px;
left: 50px;
transform-origin: center left;
transform: rotateZ(45deg);
width: 70%;
}
#center.close .bar.bottom {
position: absolute;
bottom: 40px;
left: 50px;
transform-origin: center left;
transform: rotateZ(-45deg);
width: 70%;
}
#center.close .bar.middle {
width: 0;
}
@keyframes float {
0%,
100% {
top: 0px;
left: 0px;
}
50% {
top: -5px;
left: 5px;
}
}
</style>
</head>
<body>
<div id="page">
<nav>
<div id="center" class="btn">
<div class="icon">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<div id="up" class="btn item">
<span>Contacts</span>
</div>
<div id="right" class="btn item">
<span>About</span>
</div>
<div id="bottom" class="btn item">
<span>Widgets</span>
</div>
<div id="left" class="btn item">
<span>Home</span>
</div>
</nav>
</div>
<script>
const navItems = document.querySelectorAll("nav .item");
document.querySelector("#center").addEventListener("click", function() {
for (let i = 0; i < navItems.length; i++) {
navItems[i].classList.toggle("opened");
}
document.querySelector("#center").classList.toggle("close");
});
</script>
</body>
</html>
Subscribe to:
Post Comments (Atom)
Awesome, thanks for posting code
ReplyDelete