TGI Nav Menu

Variantes para el menu del header.

by Marventus

HTML

<p class="var">Variante <span>1</span>:</p>
<div class="menu-wrap var1">
    <div class="logo-wrap">
        <a class="logo" href="http://thegeekinvasion.com" target="_blank">&nbsp;
        </a>
    </div>
    <ul class="menu">
        <li>Geekin'</li>
        <li>Gamin'</li>
        <li>Bands</li>
        <li>Reviews</li>
    </ul>
    <div class="arrow"></div>
</div>
<p class="site">Site Here</p>
<hr>
<!--<div class="clear"></div>-->
<p class="var">Variante <span>2</span>:</p>
<div class="menu-wrap var2">
    <div class="logo-wrap">
        <a class="logo" href="http://thegeekinvasion.com" target="_blank">&nbsp;
        </a>
    </div>
    <ul class="menu">
        <li>Geekin'</li>
        <li>Gamin'</li>
        <li>Bands</li>
        <li>Reviews</li>
    </ul>
    <div class="arrow"></div>
</div>
<p class="site">Site Here</p>

CSS

@import url('http://fnt.webink.com/wfs/webink.css/?project=48A0FEEA-BDD3-4D13-87A6-73DC10C33BB5&fonts=31B87CF9-F410-ED20-E812-2F143D523935:f=Hermes-Regular');
 * {
    font-family:"Hermes-Regular", Arial, Helvetica, sans-serif;
}
hr {
    background-color: #FFF;
    border: 0;
    border-bottom: 3px dashed #2CAE85;
    color: #FFF;
    margin: 40px 0;
}
p {
    color: #888;
}
p.site {
    border: 1px solid #E3E3E3;
    border-width: 0 1px;
    font-size: 30px;
    padding: 30px 0;
    text-align: center;
}
p.var {
    font-size: 20px;
    margin: 15px 0 10px 0;
}
p.var span {
    color: #2CAE85;
    font-weight: bold;
}
.clear {
    clear: both;
}
.menu-wrap {
    width: 100%;
}
.logo-wrap {
    float: left;
    margin-left: 60px;
}
.logo {
    background: url("http://thegeekinvasion.com/wp-content/themes/eleven40-pro/images/tgi-logo-mini.png") no-repeat center center;
    background-size: contain;
    display: inline-block;
    height: 28px;
    text-indent: -9999px;
    width: 233px;
}
.menu {
    float: right;
    list-style-type: none;
    margin-right: 80px;
    padding: 0;
    width: 100%;
}
.menu li {
    cursor: pointer;
    display: inline-block;
    float: left;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: color 0.3s ease-in-out;
}
.menu li:hover {
    font-weight: bold;
}
.arrow {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    display: none;
    height: 0;
    position: fixed;
    width: 0;
}
/* **********
   VARIANTES
   ********** */

/* Variante 1 */
.var1, .var1 div, .var1 ul {
    height: 50px;
}
.var1 {
    background-color: #2CAE85;
}
.var1 .logo {
    margin: 11px 15px;
}
.var1 .arrow {
    border-bottom: 7px solid #FFF;
}
.var1 .menu li {
    color: #ECECEC;
    padding: 17px 15px;
}
/* Variante 2 */
.var2, .var2 div, .var2 ul {
    height: 46px;
}
.var2 {
    border-bottom: 4px solid #2CAE85;
    border-top: 1px solid...

JavaScript

jQuery(function ($) {
    function arrowToggle(e) {
        var m = e.data.m,
            arr = e.data.arr,
            ta = e.data.ta,
            taOf = ta.offset(),
            arrL = taOf.left,
            arrT = taOf.top  - parseInt(arr.css("border-left-width").replace("px", ""), 10);
        if (m === "on") {
            arr
                .css({"top": arrT, "left": arrL})
                .show()
            ;
            ta.on("mousemove", function (ev) {
                arr.css({"left": ev.clientX - 20});
            });
        } else if (m === "off") {
            ta.off("mousemove");
            arr.hide();
        }
    }
    $(window).load(function () {
        $(".menu-wrap").each(function () {
            var tW = 0;
            $(this).find(".menu li").each(function () {
                tW += $(this).outerWidth();
                console.log($(this).text() + ": " + $(this).outerWidth());
            });
            $(this).find(".menu")
                .width(tW + 5)
                .on("mouseover", {m: "on", arr: $(this).find(".arrow"), ta: $(this).find(".menu")}, arrowToggle)
                .on("mouseout", {m: "off", arr: $(this).find(".arrow"), ta: $(this).find(".menu")}, arrowToggle);
            /*if( $(this).hasClass("var2") )
                $(this).find(".logo-wrap").width( $(this).width() - $(this).find(".menu").outerWidth(true) );*/
        });
        $(".site").css({
            "margin-left" : $($(".logo-wrap")[0]).offset().left + "px",
            "margin-right" : parseInt($($(".menu")[0]).css("margin-right").replace("px"),10 ) + 5 + "px"
        });
    });
});