Show DevBest CSS Pop Menu

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
Much like my , 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.



Obs5Ygh12HD3.png
ASMR3Fy62HD3.png


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>
 

Users who are viewing this thread

Top