Fractionnement image de fond ouvert pour révéler le menu

Question

Je suis en train de créer un menu comme https://squareup.com/shop

Lorsque vous appuyez sur un des onglets de nav diapositives (« produits » « « ressources » » types d'affaires) l'image de héros pour révéler un menu.

Je pense que je suis sur la bonne voie, mais je suis coincé avec une logique/jquery. J'ai aussi l'impression de manquer quelque chose.

HTML

<header> 
    <div class="menu" style="background-image: url(my-background-image.jpg);"> 
     <a class="click-me"> 
      menu item 
     </a> 
     <div class="hidden"> 
      <ul class="nav nav-tabs nav-stacked"> 
       <li class="active"><a href="#">nav1</a></li> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
       <li><a href="#">link</a></li> 
      </ul> 
     </div> <!-- end hidden --> 
    </div> <!-- end menu --> 
    <div class="banner" style="background-image: url(my-background-image.jpg);"> <!-- SAME IMAGE AS MENU BG IMAGE --> 
    </div> 
</header> 

CSS

.menu { 
    background-position: top; 
    background-size: 100% auto; 
    height:100px; 

} 

.hidden-content { 
    display: none; 
} 

.banner { 
    background-size: 100% auto; 
    padding-bottom: 42%; 
    background-repeat: no-repeat; 
    background-position: 0 -100px; 
} 

JQUERY

<script> 
    $(document).ready(function(){ 
     $(".click-me").click(function() { 
     $(".hidden").slideDown(); 
     }); 
    ); 
</script> 

Un grand merci à l'avance.

Answer 1

Fermer la div#menu avant la div.hidden je au lieu d'une couleur de l'image afin que vous puissiez vérifier comment il fonctionne

$(".click-me").click(function() { 
 
    $(".hidden").slideDown(); 
 
    //If you use the toggle() function, you can show and hide you hidden class on every click 
 
    // $(".hidden").toggle(); 
 
});

.menu { 
 
    background-color: red; 
 
    background-position: top; 
 
    background-size: 100% auto; 
 
    height: 100px; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.banner { 
 
    background-color: blue; 
 
    background-size: 100% auto; 
 
    padding-bottom: 42%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0 -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <div class="menu"> 
 
     <a class="click-me"> 
 
      menu item 
 
     </a> 
 
    </div> 
 
    <div id="hidden" class="hidden"> 
 
     <ul class="nav nav-tabs nav-stacked"> 
 
      <li class="active"><a href="#">nav1</a></li> 
 
      <li><a href="#">link</a></li> 
 
      <li><a href="#">link</a></li> 
 
      <li><a href="#">link</a></li> 
 
      <li><a href="#">link</a></li> 
 
     </ul> 
 
    </div> 
 
    <!-- end hidden --> 
 
    <div class="banner"> 
 
     <!-- SAME IMAGE AS MENU BG IMAGE --> 
 
    </div> 
 
</header>

Answer 2

Vous pouvez utiliser .animate(), .is(), .siblings(), .addClass(), .removeClass(), .toggleClass(), .data(), .finish()

var curr, bg = $(".bg:last"), 
 
    content = $(".content"), 
 
    nav = $("nav a"); 
 
    nav.eq(5).data("content", $("<h3/>", {text:"F"})) 
 
$("a").click(function fx(e) { 
 
    // clicked `a` element 
 
    var elem = $(e.target); 
 

 
    elem.addClass("current") 
 
    .siblings().removeClass("current"); 
 
    // set `curr` to `elem` 
 
    if (!curr) { 
 
    curr = elem; 
 
    }; 
 
    // is `.content` displayed? 
 
    var active = content.is(".active"); 
 
    // if `curr` is `elem` or `curr` is `elem` 
 
    // and `content` is displayed 
 
    if (curr.is(elem) || !active) { 
 
    bg 
 
     .animate({ 
 
     top: active ? -100 : 0 
 
     }, { 
 
     start: function() { 
 
      content.toggleClass("active") 
 
      .slideDown(1050, function() { 
 
       // set `html` of `content to `elem` `data-*` attribute 
 
       content.html(elem.data("content")); 
 
      }) 
 
     }, 
 
     duration: 1000, 
 
     done: function() { 
 
      curr = elem; 
 
      // if content is not displayed remove `nav a` "current" `className` 
 
      if (!content.is(".active")) { 
 
      nav.removeClass("current"); 
 
      }; 
 
     } 
 
     }) 
 
    } else { 
 
    // if `curr` is not `elem` 
 
    bg 
 
     .finish().animate({ 
 
     top: -100 
 
     }, function() { 
 
     // set `curr` to `elem` 
 
     curr = elem; 
 
     // remove `content` `html`, toggle "active" `className` 
 
     content.empty().toggleClass("active"); 
 
     fx(e); // call `fx` 
 
     }); 
 
    }; 
 

 
});

nav { 
 
    width: 200px; 
 
    text-align: center; 
 
} 
 
nav a { 
 
    font-size: 36px; 
 
    text-decoration: none; 
 
} 
 
.current { 
 
    color: violet; 
 
} 
 
.bg { 
 
    background: olive; 
 
    width: 200px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.content { 
 
    display: none; 
 
    background: tan; 
 
    width: 200px; 
 
    height: 100px; 
 
    font-size: 36px; 
 
    text-align: center; 
 
    color: purple; 
 
} 
 
.content * { 
 
    margin: 0 !important; 
 
} 
 

 
.content a { 
 
    color:blue; 
 
    font-style:italic; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<body> 
 
    <nav> 
 
    <!-- define content to display at `data-*` --> 
 
    <a href="#" data-content="<p>A<a href='#abc'>abc</a></p>">a</a> 
 
    <a href="#" data-content="<div>B</div>">b</a> 
 
    <a href="#" data-content="<h2>C</h2>">c</a> 
 
    <a href="#" data-content="<mark>D</mark>">d</a> 
 
    <a href="#" data-content="<img src='' alt='E' style='background:gold;width:50px;height:50px;'>">e</a> 
 
    <a href="#">f</a> 
 
    <a href="#" data-content="<h1>G</h1>">g</a> 
 
    </nav> 
 
    <div class="bg"></div> 
 
    <div class="content"></div> 
 
    <div class="bg"></div> 
 
    <div id="abc">123</div> 
 
</body>

Answer 3

est ici une solution qui maintient l'en-tête avec une hauteur fixe, partie inférieure hidding de l'image telle qu'elle se déplace vers le bas.

$(document).ready(function() { 
 
     $(".click-me").click(function() { 
 
     $(".hidden-content").slideDown(); 
 
     }); 
 
    });

header { 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
.menu { 
 
    background-position: top; 
 
    background-size: cover; 
 
    min-height: 100px; 
 
} 
 
.hidden-content { 
 
    display: none; 
 
} 
 
.hidden-content li { 
 
    display: inline-block; 
 
} 
 

 
.banner { 
 
    background-size: cover; 
 
    padding-bottom: 42%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0 -100px; 
 
} 
 

 
.click-me { 
 
    display: block; 
 
    position: absolute; 
 
    top: 20px left: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header> 
 
    <div class="menu" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/8d/Rocky_Mars_Surface.jpeg)"> 
 
    <a class="click-me" href="javascript:"> 
 
      menu item 
 
     </a> 
 
    </div> 
 
    <!-- end menu --> 
 
    <div class="hidden-content"> 
 
    <ul class="nav nav-tabs nav-stacked"> 
 
     <li class="active"><a href="#">nav1</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
     <li><a href="#">link</a></li> 
 
    </ul> 
 
    </div> 
 
    <!-- end hidden --> 
 
    <div class="banner" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/8d/Rocky_Mars_Surface.jpeg);"> 
 
    <!-- SAME IMAGE AS MENU BG IMAGE --> 
 
    </div> 
 
</header>