{if $_vars.pages}
<nav class="navbar navbar-new"  id="navbar-main" role="navigation" {if $_config.zindex} style="z-index:{$_config.zindex};" {/if} >
<div class="container">
<div class="navbar-header">
            <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{foreach from=$_vars.pages key=i item=item}
{if $_config.redirections[$item.id_pag] != ''}
  {assign var="redirections_id" value=$_config.redirections[$item.id_pag]}
{/if}
{if ($_config.page && $_config.page[$item.id_pag] == 'true') || !$_config.page}

{assign var="bar" value=$i+1}{assign var="next" value=$_vars.pages.$bar.level_pag}

<li class="dropdown-submenu level{$item.level_pag}{if $_vars.currentpages[$item.level_pag]==$item.id_pag} active{/if}"><a target="{$_config.target[$item.id_pag]}" {if $_Global.config.template  == 'PageFan'}target="_blank"{/if} {if $_config.redirections_ext[$item.id_pag] != ''} target="_blank"{/if}{if $_config.widths[$item.id_pag] != ''}  style="width:{$_config.widths[$item.id_pag]}px;"{/if} href="{if $_Global.config.template  == 'PageFan'}{$_Global.www}{/if}{if $_config.redirections_ext[$item.id_pag] != ''}{$_config.redirections_ext[$item.id_pag]}{else}{if $_config.redirections[$item.id_pag] != ''}{$_Global.pages.$redirections_id.name_pag}-{$redirections_id}{else}{$item.name_pag}-{$item.id_pag}{/if}.html{/if}">{$item.title_pag}</a>

    {if $next > $item.level_pag}
    <ul class="dropdown-menu level{$item.level_pag}">
    {elseif $next == $item.level_pag}
    </li>
    {elseif $next < $item.level_pag}
      {section name=fooo loop=$item.level_pag-$next}
        </ul></li>
      {/section}
    {/if}



{/if}
{/foreach}
</ul>

</div>
</div>
</nav>

{literal}
<style>

.navbar-toggle .icon-bar {
  border-radius: 1px;
  display: block;
  height: 2px;
  width: 22px;
}

.navbar {
border-radius: 0;
margin :0px!important;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}



.navbar
{
  margin-bottom: 0px;
}

#navbar {
  margin: auto;
  width: -moz-max-content;
  width: intrinsic;
  width: -webkit-max-content;
  width: -ms-max-content;
  width: -o-max-content;
}
.navbar-collapse
{
  padding-left: 15px!important;
  padding-right: 15px!important;
}
</style>

{/literal}


{if $_config.style_menu == "classique"}
{literal}
<style>
@media screen and (max-width: 763px) {
#navbar li {
  float: left;
  width: 100%;
}
#navbar li a{
float: left;
text-align: left;
width: 100%;
}
}
</style>
{/literal}
{/if}

{if $_config.style_menu == "3d"}
{literal}
<style>

header.inactive {
  cursor: pointer;
  transform: translate3d(-45%, -15%, 0px) scale(0.5);
  -webkit-transform:translate3d(-45%, -15%, 0px) scale(0.5);
}

header {
  transition: all 0.3s ease-in-out 0s;
}

nav {
  left: 0;
  min-height: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 20;
  z-index: 90;
}

@media screen and (max-width: 763px) {

nav {
  left: 30%;
  min-height: 100%;
  position: absolute;
  top: 0%;
  width: 70%;
  z-index:90;
  background: transparent;

}
#navbar li {
  float: left;
  margin: 1px;
  width: 100%;
  opacity: 0;
transform: translate3d(70%, 0px, 0px) scale(0.2);
-webkit-transform: translate3d(70%, 0px, 0px) scale(0.2);
transition: all 0.3s ease-in-out 0s, opacity 0.3s ease 0s;
}
#navbar li.visible {
  opacity: 1;
  -webkit-transform: translate3d(0px, 0px, 0px) scale(1);
  transform: translate3d(0px, 0px, 0px) scale(1);
}

}

</style>


{/literal}

{/if}


{literal}
<script>


var timerIn = 200;
var timerOut = 200;
$('#navbar li').hover(function() {
    $(this).find('> .dropdown-menu').stop(true, true).fadeIn(timerIn);
    $(this).addClass('open');
}, function() {
    $(this).find('> .dropdown-menu').stop(true, true).fadeOut(timerOut);
    $(this).removeClass('open');
});

$('.navbar-header, .navbar-header button').on('touchstart click', function(){
    var wrapper=$('header');
    if(!wrapper.hasClass('inactive')){
      wrapper.addClass('inactive');
      setTimeout(function(){
        wrapper.addClass('flag');
      },100);

      $('#navbar').show();

      var timer = 0;
      $('nav li').each(function(i,v){
        timer = 40 * i;
        setTimeout(function(){
          $(v).addClass('visible');
        }, timer);
      });
    }else{
      $('header').trigger('click');
    }

$('header').on('touchstart click', function(){
    var wrapper=$('header');
    
    if(wrapper.hasClass('flag')){
      wrapper.removeClass('inactive flag');
      $('li').removeClass('visible');
    }
    $('#navbar').hide();
});
    return false;
});


</script>
{/literal}

{if $_config.fixed == "oui"}

{literal}
<script>

jQuery(document).ready(function($) {
  
    // Fixa navbar ao ultrapassa-lo
    var navbar = $('#navbar-main'),
        distance = navbar.offset().top,
        $window = $(window);
        if(distance == 0)
          distance = 1;
    $window.scroll(function() {
        if ($window.scrollTop() >= distance) {
            navbar.removeClass('navbar-fixed-top').addClass('navbar-fixed-top');
            $("body").css("padding-top", "70px");
        } else {
            navbar.removeClass('navbar-fixed-top');
            $("body").css("padding-top", "0px");
        }
    });
});

</script>

{/literal}

{/if}


{/if}