Mobile Global Menu

by liammccann1992

HTML

<button onclick="handleBreak()" id="steelContent">Break</button>
<button onclick="undoBreak()" id="steelContent">Undo Break</button>
<ul class="global-menu">
    <li class="global-dropdown">	<span>
        <img src="http://cdn1.iconfinder.com/data/icons/ose/Globe.png"/>
					</span>

        <ul>
            <li>	<a href='/sheet/ataglance/?regionId=2'>Central &amp; South America</a>

            </li>
            <li>	<a href='/sheet/ataglance/?regionId=3'>North America</a>

            </li>
            <li>	<a href='/sheet/ataglance/?regionId=4'>China</a>

            </li>
            <li>	<a href='/sheet/ataglance/?regionId=5'>India</a>

            </li>
            <li>	<a href='/sheet/ataglance/?regionId=6'>South East Asia</a>

            </li>
            <li>	<a href='/sheet/ataglance/?regionId=7'>North East Asia</a>

            </li>
            <li>	<a href='/sheet/ataglance/?regionId=8'>CIS</a>

            </li>
            <li>	<a href='/sheet/ataglance/?regionId=9'>Europe</a>

            </li>
        </ul>
    </li>
</ul>

CSS

.global-menu2 {
    position:relative;
    width:100%;
}
.global-menu2 li span img {
    width:50px;
    height:50px;
}
ul.global-menu2 li a {
    display: block;
    text-decoration: none;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#b6cce8;
    text-align:center;
    width:100%;
    min-width:200px;
}
ul.global-menu ul li a {
    width: 100%;
}
ul.global-menu2 li {
    float: left;
}
ul.global-menu2 li ul {
    display:none;
}
ul.global-menu2 ul li {
    clear: both;
    margin-left: 20px;
    padding-top:5px;
    padding-bottom:5px;
}
ul.global-menu2 ul li :hover {
    background-color:pink;
}
.shown {
    display: block !important;
}

JavaScript

$(function () {
    $('.global-dropdown span').bind('click.mynamespace', function (obj) {
        dropdown(obj.currentTarget);
    });
});
var breakPoint = 10000;
$(window).resize(function () {
    if ($(window).width < breakPoint) {
        handleBreak();
    } else {
        undoBreak();
    }
});

function handleBreak() {
    console.log("Width: " + $(window).width() + " breaking!");
    var toMove = $(".global-menu").remove();
    $(toMove).removeClass("global-menu");
    $(toMove).addClass("global-menu2");
    $(toMove).insertBefore('#steelContent');
    $('.global-menu2 li span').attr("onclick", "dropdown(this)");
}

function undoBreak() {
    console.log("Width: " + $(window).width() + " undoing breaking!");
    var toMove = $(".global-menu2").remove();
    $(toMove).removeClass("global-menu2");
    $(toMove).addClass("global-menu");
    $(toMove).insertAfter('#steelContent');
    $('.global-menu li span').attr("onclick", "return false;");
}


function dropdown(obj) {
    console.log(obj);
    //Get the UL we want to show
    var ul = $(obj).parent().find("ul");
    //If its hidden then show it

    if (!$(ul).hasClass("shown")) {
        console.log("SHOWING");
        $(ul).addClass("shown");
    }
    //If its shown then hide it
    else {
        console.log("HIDING");
        $(ul).removeClass("shown");
    }
}