JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bubble Navigation</title>
    </head>
    
    <body>
        <section>
            <nav class="cf">
                <div class="bubble"><a href="#home">home</a></div>
                <div class="bubble"><a href="#leistungen">leistungen</a></div>
                <div class="bubble"><a href="#referenzen">referenzen</a></div>
                <div class="bubble last"><a href="#kontakt">kontakt</a></div>
                
                <div class="border"></div>
            </nav>
            
            <section>
                <article id="home">home</article>
                <article id="leistungen">leistungen</article>
                <article id="referenzen">referenzen</article>
                <article id="kontakt">kontakt</article>
            </section>
        </section>
    </body>
</html>

CSS

@charset "UTF-8";

/* common */
* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
    font: inherit ;
}

html, body {
    width: 100% ;
    height: 100% ;
    font-family: "Agency FB", serif ;
}

/* clearfix */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }

nav {
    padding: 20px ;
    font-size: 1.3em ;
}

/*
 * Main Wrapper
*/

body > section {
    position: absolute ;
    margin-left: -400px ;
    top: 20px ;
    left: 50% ;
    height: 600px ;
    width: 800px ;
}

body > section h1 {
    position: absolute ;
    top: 60px ;
    right: 50px ;
    font-size: 2em ;
    font-family: "Haettenschweiler" ;
    color: #c0c0c0 ;
}

/*
 * Bubble Navigation
*/

/* bubble styles */
nav > .bubble {
    opacity: .5 ;
    float: left ;
    width: 0 ;
    height: 0 ;
    border: 70px solid #e6e6e6 ;
    border-radius: 70px ;

    /* not officially supported yet :( */
    -moz-transition: margin-top .3s, width .3s, height .3s ;
}

nav > .bubble:not(:first-child) {
    margin-left: -30px ;
}

nav > .bubble:hover {
    position: relative ;
    z-index: 3 ;
    margin-top: -10px ;
    height: 65px ;
    cursor: pointer ;
}

nav > .bubble:not(.last):hover {
    border-bottom-left-radius: 0 ;
    border-bottom-right-radius: 0 ;
}

nav > .bubble.last:hover {
    width: 290px ;
    border-bottom-right-radius: 0 ;
    cursor: pointer ;
}

nav > .bubble:active,
nav > .bubble:focus {
    opacity: 0.8 !important ;
}

nav > .bubble > a {
    display: block ;
    margin-left: -60px ;
    width: 120px ;
    text-align: center ;
    text-decoration: none ;
    color: black ;
    background-color: inherit ;
}

/* bubble article */
nav > .bubble > a + article {
    position: absolute ;
    left: -3000px ;
    z-index: -1 ;
    background-color: lightgreen ;
}

nav > .bubble:hover > a + article {
    left: 0 ;
}

/* bubble coloring */
nav > .bubble:nth-child(1):hover, nav > .bubble:nth-child(1):hover:hover ~ .border { background-color: khaki ;...

JavaScript

$(document).ready( function( ) {
    
    $('.bubble').hover( function( ) {
        $('body > section > article').css({ display : 'none' }) ;
        $( 'body > section > ' + $(this).children('a').attr('href') ).css({ display : 'block' }) ;
        console.log( 'body > section > ' + $(this).children('a').attr('href') ) ;
    } ) ;
    
} ) ;