Submenus with Round Out Borders

by fparent

HTML

<ul class="menu">
    <li class="menu-item">
        <a href="section1" class="menu-link bubble">Section 1</a>
    </li>

    <li class="menu-item with-child">
        <a href="section2" class="menu-link bubble">Section 2</a>
    
        <ul class="submenu bubble">
            <li class="submenu-item">
                <a href="/en/products/prod1" class="submenu-link">Prod 1</a>
            </li>
            <li class="submenu-item">
                <a href="/en/products/prod2" class="submenu-link">Prod 2</a>
            </li>
            <li class="submenu-item">
                <a href="/en/products/prod3" class="submenu-link">Prod 3</a>
            </li>
            <li class="submenu-item">
                <a href="/en/products/prod4" class="submenu-link">Prod 4</a>
            </li>
            <li class="submenu-item">
                <a href="/en/products/prod5" class="submenu-link">Prod 5</a>
            </li>
            <li class="submenu-item">
                <a href="/en/products/prod6" class="submenu-link">Prod 6</a>
            </li>
            <li class="submenu-item">
                <a href="/en/products/prod7" class="submenu-link">Prod 7</a>
            </li>
        </ul>
    </li>

    <li class="menu-item">
        <a href="section3" class="menu-link bubble">Section 3</a>
    </li>
</ul>

CSS

/* Prepare the HTML panel */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { padding: 3em; }

/* Set a default color for the hyperlinks */
a { color: #000; }

/* Reusable class for the white bubbles */
.bubble {
    background-color: #fff;  
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 30px;

  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

/* General style for the list items of the main menu */
.menu-item {
    display: inline-block;
    margin-right: 12px;
    position: relative;
}

/* Create the round borders that will sit at the bottom right 
 * and left corners of the menu item */
.with-child.opened:before,
.with-child.opened:after {
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 15px;
    content: " ";
    z-index: 3;
}

.with-child.opened:before {
    box-shadow: 6px 6px 0 #fff;
    border: 1px solid #f5f5f5;
    border-bottom-right-radius: 30px;
    border-width: 0 1px 1px 0;
    left: -16px;
}

.with-child.opened:after {
    box-shadow: -6px 6px 0 #fff;
    border: 1px solid #edecec;
    border-bottom-left-radius: 30px;
    border-width: 0 0 1px 1px;
    right: -16px;
}

/* The menu hyperlink that will be clickable */
.menu-link {
    width: 180px;
    height: 40px;  
    display: block;
    font-weight: bold;    
    text-decoration: none;
    padding: 12px 20px;
    position: relative;
    z-index: 1;
}

/* Fix the round corners that were getting bigger when
 * mousing over the menu link.
 * Also reset the bottom corners to make them straight and
 * increase the bubble's height. */
.opened .menu-link:hover {
    height: 60px;     
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

/*  Show the submenu on hover...

JavaScript

$(function() {
    $( '.with-child' ).on( 'click', function( e ) {
        
        
        if ( !$( e.target ).hasClass( 'submenu-link' ) ) { 
            e.preventDefault();
            
            $( this )
                .toggleClass( 'opened' )
                .find( '.submenu' ).toggleClass( 'visible' );
        }
    });
});