CSS popout menu - html

Question

I am having trouble with this menu, i am hoping someone can help me.
I have a div, which is hoverable and i am trying to let it show several (altough only one in this example) menu options. But as soon as cursor leaves the main btn, the menu collapses back.
Can someone help?
.upload-image {
width: 50px;
height: 50px;
background: #333;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -3000;
}
.upload-media:hover .upload-image {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}
.upload-media {
width: 50px;
height: 50px;
background: #ff5fa7;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
left: 50%;
top:50px;
position: relative;
}
.upload-media::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 4px;
margin-top: -2px;
top: 50%;
left:15px;
right:15px;
z-index: 9;
border-radius: 5px;
}
.upload-media::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 4px;
margin-left: -2px;
left: 50%;
top: 15px;
bottom: 15px;
z-index: 9;
border-radius: 5px;
}
<div class="upload-media">
<div class="upload-image">
</div>
</div>
https://codepen.io/anon/pen/mjJQzo

Answer 1

All you have to do is add parent element like this.
<div class="circle-menu">
<div class="upload-media">
<div class="upload-image">
</div>
</div>
</div>
Then change the hover to the parent element.
.circle-menu:hover .upload-image {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}
FULL CODE:
.upload-image {
width: 50px;
height: 50px;
background: #333;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -3000;
}
.circle-menu:hover .upload-image {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}
.upload-media {
width: 50px;
height: 50px;
background: #ff5fa7;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
left: 50%;
top:50px;
position: relative;
}
.upload-media::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 4px;
margin-top: -2px;
top: 50%;
left:15px;
right:15px;
z-index: 9;
border-radius: 5px;
}
.upload-media::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 4px;
margin-left: -2px;
left: 50%;
top: 15px;
bottom: 15px;
z-index: 9;
border-radius: 5px;
}
<div class="circle-menu">
<div class="upload-media">
<div class="upload-image">
</div>
</div>
</div>

Answer 2

The problem is that as soon as you are no longer, hovering over the .upload-media div, the CSS :hover selector no longer has effect. You can use jQuery's $().hover() function and its $().css() function to change the CSS of a class.
.upload-image {
width: 50px;
height: 50px;
background: #333;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -3000;
}
/*.upload-media:hover .upload-image {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}*/
.upload-media {
width: 50px;
height: 50px;
background: #ff5fa7;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
left: 50%;
top:50px;
position: relative;
}
.upload-media::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 4px;
margin-top: -2px;
top: 50%;
left:15px;
right:15px;
z-index: 9;
border-radius: 5px;
}
.upload-media::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 4px;
margin-left: -2px;
left: 50%;
top: 15px;
bottom: 15px;
z-index: 9;
border-radius: 5px;
}
<div class="upload-media">
<div class="upload-image">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.upload-media').hover(function(){
$('.upload-image').css('transform','translate(40px,-45px)');
});
</script>
Pure Javascript method (adding an event listener for mouseover and adding a class to upload-image when upload-media is hovered over):
.upload-image {
width: 50px;
height: 50px;
background: #333;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
-o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -3000;
}
.upload-image-visible {
-webkit-transform: translate(40px,-45px);
-moz-transform: translate(40px,-45px);
-o-transform: translate(40px, -45px);
-ms-transform: translate(40px,-45px);
transform: translate(40px,-45px);
}
.upload-media {
width: 50px;
height: 50px;
background: #ff5fa7;
border-radius: 25px;
-webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
left: 50%;
top:50px;
position: relative;
}
.upload-media::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 4px;
margin-top: -2px;
top: 50%;
left:15px;
right:15px;
z-index: 9;
border-radius: 5px;
}
.upload-media::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 4px;
margin-left: -2px;
left: 50%;
top: 15px;
bottom: 15px;
z-index: 9;
border-radius: 5px;
}
<div class="upload-media">
<div class="upload-image">
</div>
</div>
<script>
document.getElementsByClassName("upload-media")[0].addEventListener("mouseover", function(){
document.getElementsByClassName("upload-image")[0].classList.add("upload-image-visible");
});
</script>

Answer 3

i think your goal is to achieve something beautiful like this
made using svg filters. that is optional you can edit and remove it.
all the credits goes for Lucas Bebber for This pen
see in full page snippet
body {
background: #ccc;
}
.menu {
margin-top: 100px;
-webkit-filter: url("#goo");
filter: url("#goo");
}
.menu-item,
.menu-open-button {
background: #e91e63;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked+.menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked+.menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked+.menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
.menu-item:hover {
background: white;
color: #e91e63;
}
.menu-item:nth-child(3) {
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
transition-duration: 180ms;
}
.menu-item:nth-child(7) {
transition-duration: 180ms;
}
.menu-item:nth-child(8) {
transition-duration: 180ms;
}
.menu-item:nth-child(9) {
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked+.menu-open-button {
transition-timing-function: linear;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked~.menu-item {
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked~.menu-item:nth-child(3) {
transition-duration: 180ms;
-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
transform: translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked~.menu-item:nth-child(4) {
transition-duration: 280ms;
-webkit-transform: translate3d(90.9466px, -52.47586px, 0);
transform: translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked~.menu-item:nth-child(5) {
transition-duration: 380ms;
-webkit-transform: translate3d(90.9466px, 52.47586px, 0);
transform: translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked~.menu-item:nth-child(6) {
transition-duration: 480ms;
-webkit-transform: translate3d(0.08361px, 104.99997px, 0);
transform: translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked~.menu-item:nth-child(7) {
transition-duration: 580ms;
-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
transform: translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked~.menu-item:nth-child(8) {
transition-duration: 680ms;
-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
transform: translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked~.menu-item:nth-child(9) {
transition-duration: 780ms;
-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
transform: translate3d(-0.25084px, -104.9997px, 0);
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<i class="fa fa-bar-chart"></i>
<i class="fa fa-plus"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-cog"></i>
<i class="fa fa-ellipsis-h"></i>
</nav>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feComposite in2="shadow" in="goo" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>