Hexagon Menu Concept

After checking out an article (15 Free Hexagon Icon Sets For Your Project) I got the idea of creating a Hexagon Menu for webpage. Granted, perhaps not very viable for site navigation, but as a quick tool for an inline administration menu I thought it was pretty cool.

image from http://www.webdesigncore.com/2013/12/23/15-free-hexagon-icon-sets-for-your-project/

I fooled around with it a little bit and came up with this quick proof of concept using jQuery.

HTML

<div id='menu'>  
    <ul>
        <li> <a href=''>1</a>
            <ul>
                <li><a href=''>2</a></li>
                <li><a href=''>3</a></li>
                <li><a href=''>4</a></li>
                <li><a href=''>5</a></li>
                <li><a href=''>6</a></li>
                <li><a href=''>7</a></li>
            </ul>
        </li>
    </ul>
</div>  

CSS

#menu {
    margin: 200px 200px;
    text-align: center;
    position: relative;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}
#menu ul.hide {
    display: none;
}
#menu ul li {
    margin: 0;
    padding: 0;
    position: absolute;
}
#menu ul li a {
    background-color: #ddd;
    display: block;
    line-height: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    color: #333;
}
#menu ul li a.active {
    background-color: #f99;
}
#menu ul li.position1 {
    left: -50px;
    top: -25px;
}
#menu ul li.position2 {
    left: 0px;
    top: -50px;
}
#menu ul li.position3 {
    right: -80px;
    top: -25px;
}
#menu ul li.position4 {
    right: -80px;
    bottom: -50px;
}
#menu ul li.position5 {
    left: 0px;
    bottom: -75px;
}
#menu ul li.position6 {
    left: -50px;
    bottom: -50px;
}

JQuery

$('ul ul').each(function () {
    $(this).addClass('hide');
    $(this).children('li').each(function (i) {
        $(this).addClass('position' + (i + 1));
    });
});

$('#menu').on('click', 'a', function (e) {
    e.preventDefault();
    $(this).toggleClass('active');
    $(this).closest('li').siblings('li')
        .find('a.active').removeClass('active');
    if ($(this).hasClass('active')) {
        $(this).siblings('ul').removeClass('hide');
    } else {
        $(this).siblings('ul')
            .addClass('hide')
            .find('ul').addClass('hide').end()
            .find('a').removeClass('active');
    }
});

I will be expanding on this concept in the coming weeks. I hope to having something cool to show shortly.

in the mean time, check it out in JSFiddle: http://jsfiddle.net/liaodrake/8uMUK/