Wer eine Webseite programmiert der weiss genau dass das Menu eines der wichtigsten Elemente ist. Wenn der Webseitenbesucher keinen Weg auf eine Unterseite findet, da bringt auch die schönste und beste Webseite nichts. Aus diesem Grund zeige ich euch heute 2 coole und kreative Menu Effekte die ihr für eure Webseiten verwenden und anpassen könnt. Es ist eine gute Basis für spannene Designs

Video

HTML

<section class="container">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Über mich</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Angebote</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </section>

Design 1

.container {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
}

ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #fff;
    font-size: 30px;
    padding: 10px 20px;
    position: relative;
}

a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: scale(0);
    transition: all 500ms; /* dauer der animation */
    transform-origin: left; /* start position der animation*/
}

a:hover::before{
    transform: scaleX(1); /* länge des strichs */
}


a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: scale(0);
    transition: all 500ms; /* dauer der animation */
    transform-origin: right; /* start position der animation*/
}

a:hover::after{
    transform: scaleX(1); /* länge des strichs */
}

Design 2

.container {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
}

ul {
    margin: 0;
    padding: 0; 
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #fff;
    font-size: 30px;
    padding: 5px 20px;
    position: relative;
    display: block;
    /*transition: 1000ms;*/
}

a:before{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scaleY(2);
    transition: 200ms all;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;

}

a:hover:before {
    transform: scaleY(1.2);
    opacity: 1;
}