création du double menu animé avec le thème supermint

HTML/PHP

création d'une zone éditable pour assigner un auto-nav au menu déroulant 
html du menu déroulant est dans le fichier: 
header.php(themes/super_mint/elements)

juste après la balise: <div class="pagewrapper"> (ligne 295)

	<a id="conteneurHamburger" href="javascript:void(0)">
	<div id="hamburger">
	  <span></span>
	  <span></span>
	  <span></span>
	  <span></span>
	</div>
</a>
		
<div id="menuHamburger">
	<?php		
		$ga = new GlobalArea('menu_hamburger');
		$ga->display();
	?>
</div>

JQUERY/PHP

LE JQUERY AJOUTER AU THÈME
ajouter dans le fichier header.php(themes/super_mint/elements)




<?php if($o->__double_header) : ?>
<?php if($u -> isLoggedIn ()) { ?>
<style>

      #hamburger{top:67px;}
      #menuHamburger{top:480px;}
      #menuHamburger>div:nth-child(2){top: -45px;}
      #menuHamburger>div:last-child{top: -145px;left: -15px;}
      #menuHamburger>div:first-child>div{padding:0px;}     
      #menuHamburger{z-index:10!important;}
      #menuHamburger>div{top:0px;}
      #menuHamburger>div:first-child{
      top: -100px;
      position: relative;
      padding: 20px 185px 20px 0px;}

#top_nav{
  z-index:10;
  position:relative;
  width:100%;
  background:#fff;
  top:0px!important;}
#middle{top:0px!important;}
#top{position:relative;top:0px!important;}
#fixed-top{position:relative;top:0px!important;}

//rend le menuHamburger fonctionel en mode edit sur la page d'accueil
    #b2886-1560{width: 315px;padding: 0;border: 2px dotted #f00!important;}
    #b2886-1560>div{
       padding:15px 0px 20px 35px;
       background:#333;
       position:relative;}
    #b2887-1560>div{padding:45px 0px 0px 0px;background:#f3f3f3;}
    #menuHamburger>#a1560controls{
      position:relative;
      background:#fff;
      text-align:center;
      top:0px;
      width:327px;}
    #menuHamburger>#a1560{
      position:relative;
      width:320px;
      top:0px;
      background:none;
      padding:0px;}
</style>
<?php } else { ?>
<script>
                                      
  function toggleHamburgerDesktop() {
      
   if($("#menuHamburger").css('top') == '0px'){
     $("#menuHamburger").css('pointer-events','none');
     $("#hamburger").toggleClass('open');
     $("#menuHamburger").stop().animate({top: -1000}, 2500);
     $("#hamburger span").stop().animate({backgroundColor: "#000"}, 1000);
     $('#top_nav>div h2').animate({ marginLeft: '20px'}, 1500);
   }else{
     $("#menuHamburger").css('pointer-events','none');
     $("#menuHamburger").stop().animate({ top: 0 }, 1300,
        function(){
          $('#top_nav>div h2').stop().animate({ marginLeft: '275px'}, 750);
          $("#menuHamburger").css('pointer-events','all'); 
        });
     $("#hamburger").toggleClass('open');
     $("#hamburger span").stop().animate({backgroundColor: "#fff"}, 1500);
   }     
  }
        
  function hamburgerScrollTop(){
    $("#hamburger").removeClass('open');
    $("#hamburger span").stop().animate({backgroundColor: "#000"}, 1000);
    $("#menuHamburger").stop().animate({top: -1000}, 2500);
    $('#top_nav>div h2').animate({ marginLeft: '20px'}, 1500);
  }               
            
  function toggleHamburgerMobile() {
    if($("#menuHamburger").css('top') == '0px'){
     $("#hamburger").toggleClass('open');
     $("#menuHamburger").stop().animate({top: -1000}, 2500);  
    }else if($("#menuHamburger").css('top') == '-1000px'){
     $("#hamburger").toggleClass('open');
     $("#menuHamburger").stop().animate({ top: 0 }, 1500);
    };
    if($("#top_nav").css('top')=='50px'){
       $("#top_nav").stop().animate({top: -1000}, 1000);
    }
  }
         	
$(document).ready(function(){

   if ($(window).width() < 979) {
       $("#conteneurHamburger").click(toggleHamburgerMobile);
       $("#top_nav").css( "top", "-1000px" );
                    
       $( "#top_nav>div h2" ).click(function() {
             if($("#top_nav").css('top') == '50px'){
                $("#top_nav").stop().animate({top: -1000}, 1000);
             }else{
                $("#top_nav").stop().animate({top: 50}, 1000);						
             }
       });
   }else {	    
       $("#fixed-top").css( "top", "0px" );
       $("#conteneurHamburger").click(toggleHamburgerDesktop);

       var scrollHandler = function () {
	   positionScroll=$(window).scrollTop();
	
           if(positionScroll>10){
             if($("#fixed-top").css('top')=='0px'){
                $("#fixed-top").stop().animate({ top: -45 }, 500);
	        $("#hamburger").stop().animate({ top: 15 }, 500);			
	        $(top_nav).stop().animate({ top: 0 }, 500);
             }else{
               if($("#fixed-top").css('top')=='-45px'){
                  $("#fixed-top").stop().animate({ top: 0 }, 500);
                  $("#hamburger").stop().animate({ top: -45 }, 10);
                  $(top_nav).stop().animate({ top: 45 }, 500);
                  hamburgerScrollTop();
                }
            }
       }
       $(window).scroll(scrollHandler);    
   }
});
</script>
<?php }  ?>

    

CSS

LE CSS AJOUTÉ AU THÈME
à la fin du fichier screen.css (themes/super_mint/stylesheets)- ligne 13

 #fixed-top {
     position: fixed;
     width: 100%;
     height: 50px;
 }
 #top_nav {
     height: 54px;
     padding-right: 1%;
     padding-left: 3%;
     width: 96%!important;
     ;
     position: fixed;
     z-index: 10;
     background: #fff!important;
     top: 42px;
 }
 #top_nav h2 {
     margin-top: -5px;
 }
 #menuHamburger {
     width: 320px;
     position: fixed;
     top: -1000px;
     z-index: 4;
 }
 #conteneurHamburger {
     position: fixed;
     z-index: 5;
 }
 #hamburger {
     width: 25px;
     height: 10px;
     position: fixed;
     top: -60px;
     margin-top: -2px;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: .5s ease-in-out;
     -moz-transition: .5s ease-in-out;
     -o-transition: .5s ease-in-out;
     transition: .5s ease-in-out;
     cursor: pointer;
 }
 #hamburger span {
     display: block;
     position: absolute;
     height: 6px;
     width: 100%;
     background: #000;
     opacity: 1;
     left: 0;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: .25s ease-in-out;
     -moz-transition: .25s ease-in-out;
     -o-transition: .25s ease-in-out;
     transition: .25s ease-in-out;
 }
 #hamburger span:nth-child(1) {
     top: 0px;
 }
 #hamburger span:nth-child(2),
 #hamburger span:nth-child(3) {
     top: 8px;
 }
 #hamburger span:nth-child(4) {
     top: 16px;
 }
 #hamburger.open span:nth-child(1) {
     top: 10px;
     width: 0%;
     left: 50%;
 }
 #hamburger.open span:nth-child(2) {
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
 }
 #hamburger.open span:nth-child(3) {
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }
 #hamburger.open span:nth-child(4) {
     top: 18px;
     width: 0%;
     left: 50%;
 }
 #menuHamburger>div:nth-child(1) {
     padding: 19px 0px 19px;
     background: #333;
 }
 #menuHamburger>div:nth-child(2) {
     padding: 60px 0px 0px 0px;
     width: 320px;
     background: #f5f5f5;
     position: absolute;
     left: 0;
     border-radius: 0px;
 }
 #menuHamburger>div:last-child {
     position: relative;
     top: -45px;
     left: -15px;
 }
 #menuHamburger>div div ol {
     align-items: center;
     display: flex;
     position: relative;
     flex-direction: column;
 }
 #menuHamburger>div div ol li {
     width: 100%;
 }
 #menuHamburger>div div ol li a {
     width: 100%;
     text-align: center;
     padding: 15px 0px;
     color: #A1A1A1;
 }
 #menuHamburger>div div ol li a:hover {
     color: #fff;
 }
 #menuHamburger>div div ol li:last-child {
     position: absolute;
     top: -45px;
     left: 40px;
 }
 #menuHamburger>div:first-child>div {
     padding: 0px 110px;
 }
 #top_nav>div>div>div:last-child div>ul {
     display: flex;
     list-style-type: none;
     padding: 0px;
     margin: 0px
 }
 #top_nav>div>div>div:last-child div>ul>li {
     padding: 17px;
 }
 #top_nav>div>div>div:last-child div>ul>li:hover {
     background: #333;
     color: #fff;
     cursor: pointer;
 }
 #top_nav>div h2 {
     margin-left: 20px;
 }
 @media (min-width: 979px) {
     #hamburger {
         left: 15px;
     }
 }
 @media (max-width: 979px) {
     #header img {
         max-width: 200%!important;
         margin-left: -50%;
     }
 }
 @media (max-width: 650px) {
     #header img {
         max-width: 300%!important;
         margin-left: -100%;
     }
 }
 @media (max-width: 979px) {
     #top_nav>div h2 {
         margin-left: 0px;
     }
     body {
         overflow-x: hidden;
     }
     #fixed-top {
         height: 50px;
     }
     #menuHamburger {
         width: 100%;
         padding-top: 50px;
         z-index: 2;
     }
     #hamburger {
         right: 20px;
         top: 15px;
     }
     #hamburger span {
         background: #fff;
     }
     #menuHamburger>div div ol li:last-child {
         position: relative;
         left: 0px;
         top: -340px;
     }
     #menuHamburger>div:first-child {
         display: none;
     }
     #menuHamburger>div:nth-child(2) {
         padding-top: 120px;
         display: flex;
         flex-direction: column;
         width: 100%;
         text-align: center;
     }
     #menuHamburger>div:last-child {
         text-align: right;
         padding: 0px;
         top: -55px;
     }
     #menuHamburger>div:last-child span {
         color: #333!important;
     }
     .container>div:first-child {
         position: absolute;
         left: 15px;
         width: auto!important;
     }
     .container>div>div:nth-child(2) {
         display: none;
     }
     .container>div>div:last-child {
         display: none;
     }
     .container>div>div:first-child {
         width: 100%!important;
         padding-bottom: 10px;
     }
     #top {
         z-index: 2!important;
     }
     #top_nav {
         -webkit-box-shadow: 0px 6px 5px 0px rgba(50, 50, 50, 0.75);
         -moz-box-shadow: 0px 6px 5px 0px rgba(50, 50, 50, 0.75);
         box-shadow: 0px 6px 5px 0px rgba(50, 50, 50, 0.75);
     }
     #top_nav>div>div>div:last-child div>ul>li {
         padding: 8px;
     }
     #top_nav div>h2 {
         text-align: center;
         top: 50px;
         position: fixed;
         background: #f2f2f2;
         color: #1688c4;
         width: 100%;
         border-radius: 0px 0px 50px 50px;
     }
     #top_nav div>h2:hover {
         cursor: pointer;
     }
     #top_nav div>h2:after {
         content: " ";
         position: absolute;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 9.5px 5.5px 0 5.5px;
         border-color: #1688c4 transparent transparent transparent;
         margin-top: 20px;
         margin-left: 10px;
     }
     #top_nav>div>div>div:last-child div>ul {
         line-height: 3;
         flex-direction: column;
         text-align: center!important;
     }
     #top_nav>div>div>div {
         width: 100%!important;
     }
     #fixed-top div div ul li {
         display: none;
     }
     #fixed-top div div ul li:nth-child(1) {
         display: block;
     }
     #top_nav {
         height: auto;
         top: -500px;
         display: flex;
         flex-direction: column;
         padding: 15% 0px;
         padding-top: 70px;
         width: 100%!important;
     }
     #menuHamburger>div {
         height: auto;
         width: 100%;
         padding: 52px 0px 0px 0px;
     }
     #menuHamburger>div,
     #top_nav {
         height: 80vh;
     }
 }

CE QUI A ÉTÉ SUPPRIMER

header.php (themes/super_mint/elements):

/***********************ligne 385********************************/

	/*	if($o->__select_nav_mobile) :
		    $bt_main = BlockType::getByHandle('autonav');
		    $bt_main->controller->displayPages = 'top';
		    $bt_main->controller->orderBy = 'display_asc';                  
		    $bt_main->controller->displaySubPages = 'all';
		    $bt_main->controller->displaySubPageLevels = 'all';
		    $bt_main->render('templates/super_mint_selectbox');
	    endif;  */

/***********************ligne 270********************************/
<!---<?php 
	 $a = new Area('Logo_top');
					   
	$a->display($c);
      ?>
	<?php if($o->__fixed_header) : ?>
  <script>
		$(document).ready(function(){
	var ccm_height = 0;
         if($("#ccm-toolbar").length){
	  ccm_height = $("#ccm-toolbar").height();
          }
	var nav_height = $("#top_nav").height();
        var top_height = $("#fixed-top").css("top",ccm_height+"px").height();
	var header_height = $("#top+.full-width-header").height();
	var top = top_height-header_height+nav_height;
	//*$("#top_nav").css("top",(top_height+ccm_height)+"px");
	$("#middle").css("top",top+"px");
	$("#bottom").css("top",top+"px");
	$("#footerpush").css("top",top+"px");
	$("#top").css("top",(top+nav_height)+"px");
		});
  </script>
<?php endif ?>--->

/***********************ligne 295********************************/

<!---<div class="mobile-placeholder-nav">
      <div class="top_nav" id="fixed-nav">
	<ul>
<li class="mobile-in-nav">
<a href="#mobile_nav"><i class="fa fa-bars fa-lg"></i></a>
</li>
<li class="search-in-nav">
<form action="
<?php //echo Loader::helper('navigation')->getCollectionURL($p)?>
"id="expand-search">
<input type="search" class="span3" id="search-keywords" name="query"/>
</form>
</li>
</ul>
</div>
</div>--->



Création du bouton on/off pour le menu animé

/single_pages/dashboard/theme_super_mint_options/theme_options.php

array(
"name" => t("Double header"),
"desc" => t("anime le header"),
"id" => "fixed_header",
"value"=>'options',
"activated" => false,
"type" => "toggle"
),