Much like my
I've not focused much on the styling of it (there's some basic styling but it still looks ugly), but more on the functionality. No JavaScript is involved as it uses a checkbox to determine whether the pop-menu button has been clicked.
It's a nice effect on a mobile phone bottom-menu bar if used and styled correctly.
CSS:
HTML:
You must be registered for see links
, I saw another nice effect I saw on a website a while ago that I wanted to replicate.I've not focused much on the styling of it (there's some basic styling but it still looks ugly), but more on the functionality. No JavaScript is involved as it uses a checkbox to determine whether the pop-menu button has been clicked.
It's a nice effect on a mobile phone bottom-menu bar if used and styled correctly.
You must be registered for see links
CSS:
PHP:
body, html {
position: relative;
height: 100vh;
width: 100vw;
background-color: #efefef;
margin: 0;
padding: 0;
}
#app {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.phone-outline {
height: 570px;
width: 300px;
background-color: #cecece;
border-radius: 15px;
position: relative;
}
.screen-outline {
height: 96%;
width: 94%;
position: absolute;
border-radius: 8px;
top: 2%; left: 3%;
background-color: #fff;
}
.pop-menu--wrapper {
position: absolute;
bottom: 10px; left: 50%;
transform: translateX(-50%);
}
.pop-menu--listener {
-webkit-appearance: none;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
margin: 0;
background-color: #6483ca;
border-radius: 50%;
height: 50px;
width: 50px;
border: 1px solid #6483ca;
border-bottom: 2px solid #4e6aab;
box-shadow: inset 0px 1px 4px rgba(255,255,255,.4), 0 2px 7px rgba(0,0,0,.3);
cursor: pointer;
transition: all .1s ease-in-out;
position: relative;
outline: none;
}
.pop-menu--listener:active {
box-shadow: inset 0px 1px 2px rgba(255,255,255,.2), 0 3px 5px rgba(0,0,0,.3);
}
.pop-menu--listener ~ i {
position: absolute;
color: #fff;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
font-size: 20px;
pointer-events: none;
}
.pop-menu--button {
height: 30px;
width: 30px;
display: block;
border-radius: 50%;
background-color: #7c9add;
color: #fff;
position: absolute;
border: 1px solid #6483ca;
border-bottom: 2px solid #4e6aab;
box-shadow: inset 0px 1px 4px rgba(255,255,255,.4), 0 2px 7px rgba(0,0,0,.3);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition: all .3s cubic-bezier(0.58, 0.04, 0.1, 0.54);
}
.pop-menu--button i {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.pop-menu--button:nth-of-type(1) {
transition-delay: .6s;
}
.pop-menu--button:nth-of-type(2) {
transition-delay: .2s;
}
.pop-menu--button:nth-of-type(3) {
transition-delay: .3s;
}
.pop-menu--listener:checked ~ .pop-menu--button {
pointer-events: all;
opacity: 1;
}
.pop-menu--listener:checked ~ .pop-menu--button:nth-of-type(1) {
top: -6px; left: -18px;
}
.pop-menu--listener:checked ~ .pop-menu--button:nth-of-type(2) {
top: -30px;
}
.pop-menu--listener:checked ~ .pop-menu--button:nth-of-type(3) {
top: -6px; left: calc(100% + 18px);
}
HTML:
PHP:
<div id="app">
<div class="phone-outline">
<div class="screen-outline">
<div class="pop-menu--wrapper">
<input type="checkbox" name="pop-menu--listener" id="pop-menu--listener" class="pop-menu--listener" />
<i class="fa fa-share"></i>
<a href="#twitter" class="pop-menu--button"><i class="fab fa-twitter"></i></a>
<a href="#fb" class="pop-menu--button"><i class="fab fa-facebook"></i></a>
<a href="#insta" class="pop-menu--button"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>