TGI Post Progress

Variantes para el menu del header.

by Marventus

HTML

<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="clear"></div>
    <div id="progress">
        <div class="tracker"></div>
    </div>
</div>

<div id="featured" class="dummy">
    <p>Featured content</p>
</div>

<div id="content">
    <article>
        <h2>Article 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh eu sem eleifend viverra. Nullam auctor, lacus nec dignissim gravida, leo nunc bibendum leo, eu auctor mi odio vitae elit. Nam rhoncus felis nec libero aliquam, sit amet sagittis est aliquam. Nulla facilisi. Nullam vitae mollis ligula. In ac felis at enim finibus consequat eu id justo. Aenean tempor tristique mi, in semper ante mollis vitae. Aliquam erat volutpat. Fusce fermentum porta quam, a rhoncus quam gravida nec. Cras lobortis lacus sed augue aliquet, a efficitur dui tincidunt.</p>
    </article>
    <article>
        <h2>Article 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nibh eu sem eleifend viverra. Nullam auctor, lacus nec dignissim gravida, leo nunc bibendum leo, eu auctor mi odio vitae elit. Nam rhoncus felis nec libero aliquam, sit amet sagittis est aliquam. Nulla facilisi. Nullam vitae mollis ligula. In ac felis at enim finibus consequat eu id justo. Aenean tempor tristique mi, in semper ante mollis vitae. Aliquam erat volutpat. Fusce fermentum porta quam, a rhoncus quam gravida nec. Cras lobortis lacus sed augue aliquet, a efficitur dui tincidunt.</p>
        <p>Donec ultrices odio laoreet lacus ultricies sagittis. Proin eget dictum tortor. Cras eget odio vulputate, maximus erat vel, fringilla libero. Mauris lacus velit, condimentum non fermentum ut, fringilla nec libero. Nulla facilisi. Integer pulvinar...

CSS

body {
    font-family:Arial, Helvetica, sans-serif!important;
    margin:0 auto;
    max-width:1024px;
}
h2 {
    font-size:3em;
    font-weight:bold;
    margin-bottom:15px;
    text-transform:uppercase;
}
.logo-wrap,
ul {
    height: 50px;
}
.clear {
    clear: both;
}
p.var {
    color: #888;
    font-size: 16px;
    margin: 15px 0 10px 0;
}
p.var span {
    color: #2CAE85;
    font-weight: bold;
}
.menu-wrap {
    left:0;
    position:fixed;
    top:0;
    width: 100%;
}
.logo-wrap {
    float: left;
}
.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;
    margin: 11px 15px;
    text-indent: -9999px;
    width: 233px;
}
.menu {
    float: right;
    list-style-type: none;
    margin-right: 80px;
    padding: 0;
    width: 100%;
    z-index: 0;
}
.menu li {
    cursor: pointer;
    display: inline-block;
    float: left;
    font-size: 11px;
    line-height: 16px;
    padding: 17px 15px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: color 0.5s ease-in-out;
}
.menu li:hover {
    font-weight: bold;
}
 .menu-wrap.var1 {
    background-color: #2CAE85;
}
.var1 .arrow {
    border-bottom: 7px solid #FFF;
}
.var1 .menu li {
    color: #ECECEC;
}
.dummy {
    background:#ddd;
    border:5px solid #bdbdbd;
    height:500px;
    margin-top:100px;
    text-align:center;
}
.dummy:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.dummy p {
    color:#aaa;
    display: inline-block;
    font-size:3em;
    font-weight:bold;
    text-shadow:1px 1px 1px rgba(255,255,255,0.7);
    text-transform:uppercase;
    vertical-align: middle;
}
#content {
    font-size:20px;
    margin-top:50px;
}
#content article {
    margin-bottom:50px;
}
#content p {
    margin-bottom:20px;
}
#progress {
   ...

JavaScript

jQuery(function ($) {
    function updateProgress() {
        var ratio = 0,
            off = $(".menu-wrap").outerHeight(true) + $("#wpadminbar").length > 0 ? $("#wpadminbar").height() : 0,
            tracker = $("#progress .tracker"),
            art, pT, sT, wH;        
        $("article").each(function() {
            pT = $(this).find("p").first().offset().top;
            sT = $(window).scrollTop() + off;
            wH = $(window).height();
           
            if( sT + wH > pT && sT + wH < pT + $(this).height() ) {
                art = $(this);
                return false;
            }
        });
        if( typeof art !== 'undefined' ) {
            var refH = art.height() - art.find("h2").outerHeight(true);
            if( sT + refH < sT + $(window).height() )
                ratio = 1;
            var mark = sT + wH - pT;
            ratio = mark / refH;
        }
        tracker.width( $("#progress").width() * ratio );
    }
        
    $(window).load(function() {
        $(".menu-wrap").each(function () {
            var tW = 0;
            $(this).find(".menu li").each(function () {
                tW += $(this).outerWidth(true);
            });
            $(this).find(".menu").width(tW + 5);
        });
        $("body").height( $(window).height() );
        updateProgress();
    });
    $(window).scroll(function() {
        updateProgress();
    });
});