DEV Community

loading...
Cover image for Mobile menu with scroll effects

Mobile menu with scroll effects

stokry profile image Stokry ・4 min read

CSS is not only used to provide a basic style for a web page to make it look more attractive. There are plenty of other things that one can do with CSS as well. With the ability to create animations and interactions, CSS along with HTML allows web developers the opportunity to play around and experiment with different methods.

I want to show you a cool mobile menu with scroll effects, obviously you can modify and optimize the code, this is just a raw example.

Let's jump to the code.

*  {
    box-sizing:  border-box;
}
html,
body  {
    margin:  0;
}
body  {
    font-family:  sans-serif;
    background-color:  #5E8066;
}
a  {
    text-decoration:  none;
}
.container  {
    position:  relative;
    margin:  35px  auto  0;
    width:  300px;
    height:  403px;
    background-color:  #483634;
    overflow:  hidden;
}
#toggle  {
    display:  none;
}
#toggle:checked~.toggle-container  .button-toggle  {
    box-shadow:  0  0  0  550px  rgba(0,  0,  0,  0.1),  inset  0  0  0  20px  rgba(0,  0,  0,  0.1);
}
#toggle:checked~.toggle-container  .button-toggle:before  {
    transform:  translateY(-50%)  rotate(45deg)  scale(1);
}
#toggle:checked~.toggle-container  .button-toggle:after  {
    transform:  translateY(-50%)  rotate(-45deg)  scale(1);
}
#toggle:checked~.nav  {
    margin-bottom:  100px;
    pointer-events:  auto;
    transform:  translate(50px,  50px);
}
#toggle:checked~.nav  .nav-item  {
    color:  #e2eb54;
    letter-spacing:  0;
    height:  40px;
    line-height:  40px;
    margin-top:  0;
    opacity:  1;
    transform:  scaleY(1);
    transition:  0.5s, opacity 0.1s;
}
#toggle:checked~.nav  .nav-item:nth-child(1)  {
    transition-delay:  0.15s;
}
#toggle:checked~.nav  .nav-item:nth-child(1):before  {
    transition-delay:  0.15s;
}
#toggle:checked~.nav  .nav-item:nth-child(2)  {
    transition-delay:  0.1s;
}
#toggle:checked~.nav  .nav-item:nth-child(2):before  {
    transition-delay:  0.1s;
}
#toggle:checked~.nav  .nav-item:nth-child(3)  {
    transition-delay:  0.05s;
}
#toggle:checked~.nav  .nav-item:nth-child(3):before  {
    transition-delay:  0.05s;
}
#toggle:checked~.nav  .nav-item:nth-child(4)  {
    transition-delay:  0s;
}
#toggle:checked~.nav  .nav-item:nth-child(4):before  {
    transition-delay:  0s;
}
#toggle:checked~.nav  .nav-item:before  {
    opacity:  0;
}
#toggle:checked~.content  {
    padding-top:  30px;
}
#toggle:checked~.content:before  {
    background-color:  rgba(0,  0,  0,  0.3);
}
.button-toggle  {
    position:  absolute;
    display:  inline-block;
    width:  20px;
    height:  20px;
    margin:  25px;
    background-color:  transparent;
    border:  none;
    cursor:  pointer;
    border-radius:  100%;
    transition:  0.6s;
}
.button-toggle:hover  {
    box-shadow:  0  0  0  8px  rgba(0,  0,  0,  0.1),  inset  0  0  0  20px  rgba(0,  0,  0,  0.1);
}
.button-toggle:before,
.button-toggle:after  {
    position:  absolute;
    content:  '';
    top:  50%;
    left:  0;
    width:  100%;
    height:  2px;
    background-color:  #e2eb54;
    border-radius:  5px;
    transition:  0.5s;
}
.button-toggle:before  {
    transform:  translateY(-50%)  rotate(45deg)  scale(0);
}
.button-toggle:after  {
    transform:  translateY(50%)  rotate(-45deg)  scale(0);
}
.nav  {
    display:  inline-block;
    margin:  25px  25px  20px;
    pointer-events:  none;
    transition:  0.5s;
} 
.nav-item  {
    position:  relative;
    display:  inline-block;
    float:  left;
    clear:  both;
    color:  transparent;
    font-size:  14px;
    letter-spacing:  -6.2px;
    height:  7px;
    line-height:  7px;
    text-transform:  uppercase;
    white-space:  nowrap;
    transform:  scaleY(0.2);
    transition:  0.5s, opacity 1s;
}
.nav-item:nth-child(1)  {
    transition-delay:  0s;
}
.nav-item:nth-child(1):before  {
    transition-delay:  0s;
}
.nav-item:nth-child(2)  {
    transition-delay:  0.05s;
}
.nav-item:nth-child(2):before  {
    transition-delay:  0.05s;
}
.nav-item:nth-child(3)  {
    transition-delay:  0.1s;
}
.nav-item:nth-child(3):before  {
    transition-delay:  0.1s;
}
.nav-item:nth-child(4)  {
    transition-delay:  0.15s;
}
.nav-item:nth-child(4):before  {
    transition-delay:  0.15s;
}
.nav-item:nth-child(1)  {
    letter-spacing:  -8px;
}
.nav-item:nth-child(2)  {
    letter-spacing:  -7px;
}
.nav-item:nth-child(n + 4)  {
    letter-spacing:  -8px;
    margin-top:  -7px;
    opacity:  0;
}
.nav-item:before  {
    position:  absolute;
    content:  '';
    top:  50%;
    left:  0;
    width:  100%;
    height:  2px;
    background-color:  #6EC4A3;
    transform:  translateY(-50%)  scaleY(5);
    transition:  0.5s;
}
.content  {
    position:  relative;
    text-align:  center;
    transition:  0.5s;
}
.content:before  {
    position:  absolute;
    content:  '';
    top:  0;
    left:  0;
    width:  100%;
    height:  100%;
    background-color:  transparent;
    z-index:  2;
    transition:  0.5s;
}
.circle  {
    display:  inline-block;
    width:  75px;
    height:  75px;
    background-color:  #87b391b3;
    border-radius:  100%;
}
.text  {
    margin:  15px  0  30px;
}
.text  p  {
    display:  inline-block;
    width:  250px;
    padding:  5px;
    background-color:  #87b391;
    font-size:  14px
}
.text  span:first-child  {
    width:  50px;
}
.text  span:last-child  {
    width:  80px;
}
Enter fullscreen mode Exit fullscreen mode

and little bit of HTML

<div  class="container">
    <input  id="toggle"  type="checkbox">
    <label  class="toggle-container"  for="toggle">
    <span  class="button button-toggle"></span>
    </label>
    <nav  class="nav">
        <a  class="nav-item"  href="">Your tasks</a>
        <a  class="nav-item"  href="">Add new one</a>
        <a  class="nav-item"  href="">History</a>
        <a  class="nav-item"  href="">Settings</a>
    </nav>
    <section  class="content">
        <img  class="circle"  src="https://gravatar.com/avatar/4ecf4664076bcd472cf3255ae2b94433?s=400&d=robohash&r=x">
        <div  class="text">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            </p>
        </div>
    </section>
</div>
Enter fullscreen mode Exit fullscreen mode

The final output looks like this:

enter image description here

Thank you all!

Discussion

pic
Editor guide