<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Flubby navigation 2</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<div></div>
<div></div>
</div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
<ul>
<li>
Item 1
<ul>
<li>Subitem</li>
<li>Other sub</li>
</ul>
</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Subitem</li>
</ul>
</li>
<li>Item 4</li>
</ul>
</body>
</html>
/*Downloaded from https://www.codeseek.co/chrislaarman/flubby-navigation-2-jPyNZE */
body {
margin: 0px;
text-align: center;
}
body > div {
filter: blur(5px) contrast(10);
-webkit-filter: blur(7px) contrast(10);
padding: 50px;
background-color: lightblue;
height: 250px;
overflow: hidden;
}
body > div div {
float: left;
background-color: blue;
color: black;
font-size: 30px;
width: 150px;
height: 50px;
transition: all 0.5s cubic-bezier(0.5, -1.5, 0.5, 2);
margin-left: -3px;
cursor: pointer;
}
body > div div:hover {
margin-top: -10px;
height: 60px;
}
body > div div:hover div {
opacity: 1;
width: 150px;
height: 100px;
margin-bottom: -50px;
margin-top: 10px;
}
body > div div div {
transition: all 1s cubic-bezier(0.5, -1.5, 0.5, 2);
transition-delay: .2;
opacity: 0;
height: 0px;
width: 250px;
}
ul {
position: absolute;
z-index: 2;
left: 15px;
margin-top: -301px;
margin-left: -9px;
color: white;
pointer-events: none;
}
ul li {
position: relative;
float: left;
display: block;
width: 147px;
padding: 17px 0px;
font-size: 14px;
text-align: center;
font-weight: bold;
font-family: verdana;
border-radius: 10px;
}
ul li ul {
margin-top: 17px;
margin-left: -55px;
}
ul li ul li {
transition: all 0.5s cubic-bezier(0.5, -1.5, 0.5, 2);
opacity: 1;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
