teste css

by olimann

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<header class="fixed">
    <div class="logo left"><i class="fi fi-heart"></i></div>
      
 <div class="nav-cont-slide right">        
        <button class="nav-btn right">
            <span>   
                <i class="fi fi-list"></i>
                <i class="fi fi-x"></i>
            </span>      
        </button>
  
        <nav class="nav-absolute">
            <ul>
              <li><a>portfolio</a></li>
              <li><a>A propos</a></li>
              <li><a>contact</a></li>   
            </ul>    
        </nav>
     
    </div>
  
</header>

    <button class="scroll-top">
        <i class="fi fi-arrow-up"></i>          
    </button>

<main class="row">
<div class="large-12 columns">
<p>
    Illud tamen te esse admonitum volo, primum ut qualis es talem te esse omnes existiment ut, quantum a rerum turpitudine abes, tantum te a verborum libertate seiungas; deinde ut ea in alterum ne dicas, quae cum tibi falso responsa sint, erubescas. Quis est enim, cui via ista non pateat, qui isti aetati atque etiam isti dignitati non possit quam velit petulanter, etiamsi sine ulla suspicione, at non sine argumento male dicere? Sed istarum partium culpa est eorum, qui te agere voluerunt; laus pudoris tui, quod ea te invitum dicere videbamus, ingenii, quod ornate politeque dixisti.
</p> 

</div>  
</main>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300&subset=greek-ext);

body {
    font-family: "Open Sans", Arial, serif;
	margin: 0;
    text-rendering: optimizeLegibility;
    min-height: 3000px;
    background-color: #f2f2f2;
}
header.fixed {
    width:100%;
    padding: 30px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #eee;
}

main {
    height: 100%;
    background-color: yellow;
}


.nav-cont-slide,
.nav-absolute,
.nav-btn span,
.scroll-top{    
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;   
}
.logo {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: orange;
    color: #fff;
    text-align: center;
    font-size: 2em;

}



/*MENU SLIDE*/

.nav-cont-slide {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #222;
    overflow: hidden;
}

.nav-absolute{  
    height: 50px;
    width: 350px;
    position: absolute;
    top: 0;
    left: 50px;
    -webkit-transition-delay: .2s; /* Safari */
    transition-delay: .2s;
}

nav ul {
    margin: 0;
    padding: 0;
    font-size:0; /*bug espace*/
    width: auto;
      
}

nav > ul > li {
    display: inline-block;


}
nav li a {
    display: block;
    color: #999;
    height: 50px;    
    line-height: 50px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 600;
    text-transform:uppercase;
}
nav li a:hover{
    color:orange;
}

/*  BONTON MENU OPEN */
.nav-btn,
.nav-btn:focus{
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    font-size: 2em;
    z-index: 999;
    background-color: #222;
    color: #fff;
    outline: none;

}

.nav-btn span{
    width: 50px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;

}

.nav-btn span i{
    width: 50px;
   ...

JavaScript

//$(document).ready(function(){
//		$(".nav-btn").click(function(){
//		$(".nav-cont-slide").toggleClass("open");
//	})
//});


////////////////////Scroll to top //

var	scrollTop = $('.scroll-top');

$(document).on( 'scroll', function(){
    if ($(window).scrollTop() > 1000) {
      scrollTop.addClass('show');
      
    } else {
      scrollTop.removeClass('show');

    }
  });

  scrollTop.on('click', scrollToTop);

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}


////////////////////TESTE


var toggle = false;
var isOpen = false;
var overBloc = $(".nav-cont-slide");
var overBody = $("main");
var btnPanel = $(".nav-btn");

btnPanel.click(function () {
    if (toggle == false && isOpen == false) {
        openMenu();
    } else {
        if (toggle == true && isOpen == true) {
            closeMenu();

        }
    }
});


//click body close
overBody.click(function (e) {
    if (toggle == true && isOpen == true) {
        btnPanel.removeClass('open');
        closeMenu();
        e.stopPropagation();

    }
});

//resize close
$(window).resize(function () {
    if (toggle == true) {
        btnPanel.removeClass('open');
        closeMenu();
    }
});

function openMenu() {
    toggle = true;
    isOpen = true;
   // overBloc.addClass('open');
    //btnPanel.addClass('open');    

    overBloc.add(btnPanel).addClass('open');
}

function closeMenu() {
    toggle = false;
    isOpen = false;
    btnPanel.removeClass('open');
    overBloc.removeClass('open');
}