0 szavazat
által 
által újranyitott

<!--MENU-->

    <div class="menu">
        <div class="label"> ☰</div>
        <div class="spacer"></div>
        <div class="item"><span>Home</span></div>
        <div class="item"><span>About</span></div>
        <div class="item"><span>Team</span></div>
        <div class="item"><span>Services</span></div>
        <div class="item"><span>Projects</span></div>
        <div class="item"><span>Contact</span></div>
    </div>

/MENU/
.menu {

text-transform: uppercase;
color: white;
display: block;
cursor: pointer;
pointer-events: none;
position: absolute;
bottom: 20px;
right: 0;
top: 15px;
text-align: right;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 300;
z-index: 999;
position: fixed;
max-height: fit-content;

}

.menu:hover {

pointer-events: all;

}

.label {

display: block;
cursor: pointer;
pointer-events: all;
text-align: right;
margin-right: 15px;
margin-top: -5px;
font-size: 25px;

}

.spacer {

display: block;
width: 80px;
margin: 8px 95px 35px;
cursor: pointer;
position: relative

}

.spacer:before {

content: "";
position: absolute;
border-bottom: 1px solid #ffffff;
height: 1px;
width: 0%;
transition: width 0.3s ease;

transition-delay: 0.7s;

}

.item {

position: relative;
display: block;
margin-bottom: 15px;
margin-right: 15px;
margin-top: 15px;
opacity: 0;
transition: opacity 0.5s ease, top 0.5s ease;
transition-delay: 0;

}

span {

transition: color 0.5s ease;

}

.item:hover span {

text-shadow: 2px 2px 5px white;

}

.menu:hover .spacer:before {

width: 100%;
transition-delay: 0s;

}

.menu:hover .item {

opacity: 1;
top: 0px;

}

.item:nth-child(1) {

transition-delay: 0.45s;

}

.item:nth-child(2) {

transition-delay: 0.4s;

}

.item:nth-child(3) {

transition-delay: 0.35s;

}

.item:nth-child(4) {

transition-delay: 0.3s;

}

.item:nth-child(5) {

transition-delay: 0.25s;

}

.item:nth-child(6) {

transition-delay: 0.2s;

}

.item:nth-child(7) {

transition-delay: 0.15s;

}

.item:nth-child(8) {

transition-delay: 0.1s;

}

.item:nth-child(9) {

transition-delay: 0.05s;

}

.item:nth-child(10) {

transition-delay: 0s;

}

.menu:hover .item:nth-child(1) {

transition-delay: 0.25s;

}

.menu:hover .item:nth-child(2) {

transition-delay: 0.3s;

}

.menu:hover .item:nth-child(3) {

transition-delay: 0.35s;

}

.menu:hover .item:nth-child(4) {

transition-delay: 0.4s;

}

.menu:hover .item:nth-child(5) {

transition-delay: 0.45s;

}

.menu:hover .item:nth-child(6) {

transition-delay: 0.5s;

}

.menu:hover .item:nth-child(7) {
transition-delay: 0.55s;
}

.menu:hover .item:nth-child(8) {

transition-delay: 0.6s;

}

.menu:hover .item:nth-child(9) {

transition-delay: 0.65s;

}

.menu:hover .item:nth-child(10) {

transition-delay: 0.7s;

}

1 válasz

0 szavazat
(8,1e pont) által 
által kiválasztott
 
Legjobb válasz

Szia!

Erre nem tudok konkrét megoldással szolgálni, esetleg ez a cikk segíthet!
https://medium.com/@jaredt_28429/why-do-hamburger-menus-break-in-ios-safari-e076083bda5c

...