Skip to content

N
NAP-wordpress
Commit 30b55acf authored by imac's avatar imac
Browse files
Options

[Responsive]Home page + header +footer

parent 18a19a75
Hide whitespace changes
Inline Side-by-side
Showing with 429 additions and 72 deletions
wp-content/themes/nap/assets/css/main.css
View file @ 30b55acf
...@@ -225,6 +225,9 @@ II/ Helper..............Helper classes ...@@ -225,6 +225,9 @@ II/ Helper..............Helper classes
.center {text-align: center} .center {text-align: center}
.full-width {width: 100%} .full-width {width: 100%}
.full-height{height: 100%} .full-height{height: 100%}
.display--only-mobile{
display: none;
}
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: " "; content: " ";
...@@ -291,7 +294,8 @@ II/ Helper..............Helper classes ...@@ -291,7 +294,8 @@ II/ Helper..............Helper classes
background: rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04);
} }
.blue-bg{ .blue-bg{
background: #05162b; /*background: #05162b;*/
background: #071130;
color: #fff; color: #fff;
} }
.pink-bg{ .pink-bg{
...@@ -633,6 +637,7 @@ header{ ...@@ -633,6 +637,7 @@ header{
} }
.nav-content > ul >li.current:before, .nav-content > ul >li.current:before,
.nav-content > ul >li.active:before, .nav-content > ul >li.active:before,
.home-footer-nav .nav-content > ul >li:hover:before,
.main-nav .nav-content > ul >li:hover:before{ .main-nav .nav-content > ul >li:hover:before{
width: 28px; width: 28px;
-webkit-transform: scaleX(1); -webkit-transform: scaleX(1);
...@@ -675,8 +680,9 @@ header{ ...@@ -675,8 +680,9 @@ header{
animation-duration: 3s; animation-duration: 3s;
} }
.nav-header { .nav-header {
border-bottom: 1px solid; border-bottom: 1px solid rgba(255,255,255,0.5);
padding: 25px; padding: 25px;
position: relative;
} }
.nav-content{ .nav-content{
height: 100%; height: 100%;
...@@ -698,6 +704,9 @@ header{ ...@@ -698,6 +704,9 @@ header{
.pink-list { .pink-list {
color: #ff6a5f; color: #ff6a5f;
} }
.show-nav{
opacity: 1 !important;
}
/*Submenu*/ /*Submenu*/
nav ul ul{ nav ul ul{
-webkit-column-count: 2; -webkit-column-count: 2;
...@@ -794,6 +803,12 @@ footer{ ...@@ -794,6 +803,12 @@ footer{
.load-page .gallery-wrapper{ .load-page .gallery-wrapper{
overflow: auto; overflow: auto;
} }
/*mobile*/
.nav_open_btn{
width: 20px;
right: 20px;
left: initial;
}
/* ========================================================================== /* ==========================================================================
VII/ Pages...............ALL pages VII/ Pages...............ALL pages
========================================================================== */ ========================================================================== */
...@@ -802,9 +817,11 @@ VII/ Pages...............ALL pages ...@@ -802,9 +817,11 @@ VII/ Pages...............ALL pages
#home { #home {
background: rgba(7,17,48,0.5); background: rgba(7,17,48,0.5);
position: relative;
height: 100%;
} }
.img-wrapper{ .img-wrapper{
height: 100vh; height: 100%;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -838,7 +855,7 @@ aside.news-wrapper { ...@@ -838,7 +855,7 @@ aside.news-wrapper {
right: 0; right: 0;
background: #fff; background: #fff;
color: #182566; color: #182566;
padding: 65px 40px; padding: 65px 35px;
width: 31%; width: 31%;
overflow-x: hidden; overflow-x: hidden;
display: none; display: none;
...@@ -869,6 +886,61 @@ aside.news-wrapper { ...@@ -869,6 +886,61 @@ aside.news-wrapper {
.half-width{ .half-width{
width: 49%; width: 49%;
} }
#home .chevron::after{
color: #fff;
}
#home .home-down{
position: absolute;
bottom: 0px;
height: 25px;
width: 25px;
top: initial;
margin: 0 auto;
border-radius: 50%;
opacity: 1;
cursor: pointer;
}
#home .chevron::after{
height: 5px;
width: 5px;
top: 3px;
}
.home-down-wrapper{
position: absolute;
bottom: 0;
height: 56px;
left: 0;
right: 0px;
}
.footer-home-content{
position: absolute;
bottom: 0px;
top: initial;
opacity: 0.8;
}
.footer-home-content .subcat{
display: none;
}
.footer-home-content .nav-content{
display: block !important;
height: 100% !important;
}
.home-footer-nav .nav-wrapper{
position: absolute;
}
.home-footer-nav .nav-wrapper.fixed{
position: fixed;
top: 121px;
}
.home-footer-nav .nav-wrapper li{
opacity: 1 !important;
transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
}
/* --------------*/ /* ---------->>> Product <<<-----------*/ /* --------------*/ /* --------------*/ /* ---------->>> Product <<<-----------*/ /* --------------*/
#product{ #product{
overflow: hidden; overflow: hidden;
...@@ -2151,35 +2223,166 @@ div.wpcf7-mail-sent-ok{ ...@@ -2151,35 +2223,166 @@ div.wpcf7-mail-sent-ok{
.access-form .white-btn{ .access-form .white-btn{
margin-top: 9px; margin-top: 9px;
} }
/* --------------*/ /* ---------->>> Loading <<<-----------*/ /* --------------*/ /* --------------*/ /* ---------->>> Animation <<<-----------*/ /* --------------*/
#loading-container{ /* -----------------------------------------------------------------------------
background-color: #fff;
width: 100%;
height: 100%;
float:left;
position: fixed;
top: 0;left:0;right: 0;
/*margin:0 -4px -5px -2px;*/
transition: all .2s ease;
z-index: 9999999999999999;
}
#loading-center-absolute { Burger button Cross Animation
/* background: url(../img/logo-loader.png) no-repeat center center;*/
position: absolute; ----------------------------------------------------------------------------- */
width: 100%; .o-grid {
height: 200px; display: -webkit-box;
/*opacity: 0.3;*/ display: -webkit-flex;
background-size: contain; display: -ms-flexbox;
max-width: 200px; display: flex;
margin: 0 auto; -webkit-flex-flow: row wrap;
left: 0; -ms-flex-flow: row wrap;
right: 0; flex-flow: row wrap;
top: 50%; -webkit-box-align: center;
transform: translateY(-50%); -webkit-align-items: center;
-ms-transform: translateY(-50%); -ms-flex-align: center;
-webkit-transform: translateY(-50%); align-items: center;
-moz-transform: translateY(-50%); -webkit-justify-content: space-around;
-o-transform: translateY(-50%); -ms-flex-pack: distribute;
justify-content: space-around;
}
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 19px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 7px;
left: 0px;
right: 0px;
height: 2.4px;
background: #fff;
border-radius: 20px;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
content: "";
}
.c-hamburger span::before {
top: -7px;
}
.c-hamburger span::after {
bottom: -7px;
}
/**Style 2**/
.c-hamburger--htx span {
-webkit-transition: background 0s 0.3s;
transition: background 0s 0.3s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0s;
transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.c-hamburger--htx span::after {
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
/*background-color: #cb0032;*/
}
.c-hamburger--htx.is-active span {
background: none;
}
.c-hamburger--htx.is-active span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
-webkit-transition-delay: 0s, 0.3s;
transition-delay: 0s, 0.3s;
}
/* --------------*/ /* ---------->>> Loading <<<-----------*/ /* --------------*/
#loading-container{
background-color: #fff;
width: 100%;
height: 100%;
float:left;
position: fixed;
top: 0;left:0;right: 0;
/*margin:0 -4px -5px -2px;*/
transition: all .2s ease;
z-index: 9999999999999999;
}
#loading-center-absolute {
/* background: url(../img/logo-loader.png) no-repeat center center;*/
position: absolute;
width: 100%;
height: 200px;
/*opacity: 0.3;*/
background-size: contain;
max-width: 200px;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
} }
\ No newline at end of file \ No newline at end of file
wp-content/themes/nap/assets/css/responsive.css
View file @ 30b55acf
...@@ -23,6 +23,10 @@ ...@@ -23,6 +23,10 @@
height: 80px; height: 80px;
width: 80px; width: 80px;
} }
.news-btn{
height: 93px;
width: 93px;
}
/*Product*/ /*Product*/
#slides{ #slides{
width: 400px; width: 400px;
...@@ -64,17 +68,98 @@ ...@@ -64,17 +68,98 @@
.product-info { .product-info {
width: 65%; width: 65%;
} }
/*Home*/
} }
/* ------------------------*/ /* ---------->>> 1024 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 1024 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
/*Home*/
aside.news-wrapper{
width: 40%;
padding: 65px 20px;
}
} }
/* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/
@media screen and (min-width: 861px) {
.nav-content{
display: block !important;
}
}
@media screen and (max-width: 860px) { @media screen and (max-width: 860px) {
.display--only-mobile{
display: block;
}
/*Helper*/
.close-btn{
top: 15px;
width: 37px;
height: 37px;
right: 20px;
}
.close-btn:before,
.close-btn:after{
left: 18px;
height: 15px;
top: 11px;
}
/*Header*/
.nav-content{
display: none;
padding-left:40px;
height: calc (100vh + 200px) !important;
}
.nav-wrapper{
height: auto;
max-width: 100%;
right: 0;
}
.nav-header{
padding: 0 25px;
}
.header .logo{
height: 50px;
display: inline-block;
background-size: 76px;
}
.pink-list:before{
width: 52%;
}
.main-nav.slideInLeft {
-webkit-animation-name: initial;
-moz-animation-name: initial;
-o-animation-name: initial;
animation-name: initial;
}
/*Home*/
.news-header{
position: initial;
}
.news-btn{
top: 120px;
right: 34px;
}
aside.news-wrapper{
width: 100%;
z-index: 9999999999;
max-width: 100%;
padding: 65px 10px;
}
.news-header,
.news-content{
max-width: 430px;
margin: 0 auto;
}
.news-header h2{
font-size: 18px;
line-height: 21px;
letter-spacing: 0px;
}
/*footer*/
footer .footer{
display: none;
}
} }
/*END (max-width: 860px) */
/* ------------------------*/ /* ---------->>> 620 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 620 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 620px) { @media screen and (max-width: 620px) {
......
wp-content/themes/nap/assets/js/main.js
View file @ 30b55acf
...@@ -6,6 +6,28 @@ $(function(){ ...@@ -6,6 +6,28 @@ $(function(){
$('a[href^="#"], .easyzoom a').click(function(e){ $('a[href^="#"], .easyzoom a').click(function(e){
e.preventDefault(); e.preventDefault();
}); });
//Open Menu
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
var nav = $('.main-nav .nav-content');
//(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
$(".c-hamburger").toggleClass('is-active');
if ($(".c-hamburger").hasClass('is-active')) { //Open menu
nav.removeClass('OFF').addClass("ON");
nav.parent().addClass("show-nav transition");
}
else { //Close menu
nav.removeClass('ON').addClass("OFF");
nav.parent().removeClass("show-nav");
}
nav.stop().slideToggle();
});
}
//load content page on left Panel //load content page on left Panel
$('.footer .right li:not(.nl)').on('click','a',function(e){ $('.footer .right li:not(.nl)').on('click','a',function(e){
$('html').css('overflow','hidden'); $('html').css('overflow','hidden');
...@@ -38,6 +60,28 @@ $(function(){ ...@@ -38,6 +60,28 @@ $(function(){
},0) },0)
}); });
}); });
var div = $('.nav-content');
$('.footer-home-content').on('click','.home-down:not(.scrolled)',function(e){
TweenMax.killTweensOf('.nav-content');
var mainHeight = $('.main').outerHeight();
$(this).addClass('scrolled');
if (!($('.footer-home-content .nav-content').length)){
$('.footer-home-content').append($('.nav-content').clone());
$('.main').outerHeight(mainHeight + $('.footer-home-content').outerHeight());
$('.home-down-wrapper').css('top', - ($('.home-down-wrapper').outerHeight()));
$('.home-down').css('top', -($('.home-down').outerHeight()));
}
//scroll to bottom
$('body').animate({
scrollTop: div.outerHeight()
}, 1000,'swing');
}).on('click','.scrolled',function(){
$(this).removeClass('scrolled');
//$('.footer-home-content .nav-content').remove();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
//Get file name of uploaded file //Get file name of uploaded file
$('#file-p').on('change',function(e){ $('#file-p').on('change',function(e){
var fileName = e.target.files[0].name; var fileName = e.target.files[0].name;
...@@ -119,7 +163,7 @@ $(function(){ ...@@ -119,7 +163,7 @@ $(function(){
//animate menu nav //animate menu nav
$.fn.open_nav = function(){ $.fn.open_nav = function(){
TweenLite.set(".nav-content", {visibility : "visible"}); TweenLite.set(".nav-content", {visibility : "visible"});
var tl = new TimelineMax() var tl = new TimelineMax();
tl.staggerFrom('.nav-content >ul>li, .phototheque-content nav >ul > li',0.5,{opacity:0,x:200},0.1,0.5); tl.staggerFrom('.nav-content >ul>li, .phototheque-content nav >ul > li',0.5,{opacity:0,x:200},0.1,0.5);
tl.staggerFromTo('nav ul ul li ',0.5,{opacity:0,x:200},{opacity:1,x:0},0.1,1.2); tl.staggerFromTo('nav ul ul li ',0.5,{opacity:0,x:200},{opacity:1,x:0},0.1,1.2);
tl.fromTo('.news-btn',0.9,{autoAlpha:0,scale:'0'},{autoAlpha:1,scale:'1'},0); tl.fromTo('.news-btn',0.9,{autoAlpha:0,scale:'0'},{autoAlpha:1,scale:'1'},0);
...@@ -292,7 +336,7 @@ $.fn.getMenuBg = function(){ ...@@ -292,7 +336,7 @@ $.fn.getMenuBg = function(){
$('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ; $('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ;
$('.main,.load-page').outerHeight(containerHeight); $('.main,.load-page').outerHeight(containerHeight);
$('.full-height').outerHeight(maxHeight); $('.full-height').outerHeight(maxHeight);
$('.nav-content').outerHeight( windowHeight - navHeader - 30); $('.nav-content').outerHeight( windowHeight - navHeader - footerHeight);
$('.product-images').outerWidth(windowWidth - productWidth -10); $('.product-images').outerWidth(windowWidth - productWidth -10);
$('.right-container').outerWidth(windowWidth - navMenuWidth); $('.right-container').outerWidth(windowWidth - navMenuWidth);
$('.position--after-menu').css('left',navMenuWidth); $('.position--after-menu').css('left',navMenuWidth);
...@@ -307,7 +351,6 @@ $.fn.getMenuBg = function(){ ...@@ -307,7 +351,6 @@ $.fn.getMenuBg = function(){
$('#user_pass').attr('placeholder', 'Mot de passe'); $('#user_pass').attr('placeholder', 'Mot de passe');
$("#user_login").addClass("my-login-username"); $("#user_login").addClass("my-login-username");
$("#wp-submit").addClass("btn rounded white-btn"); $("#wp-submit").addClass("btn rounded white-btn");
});//END Function });//END Function
function animateOnScroll(){ function animateOnScroll(){
...@@ -349,7 +392,6 @@ $.fn.animation = function(){ ...@@ -349,7 +392,6 @@ $.fn.animation = function(){
} }
function onScrollCover(){ function onScrollCover(){
cover = $('.subcat.current a.active').attr("href"); cover = $('.subcat.current a.active').attr("href");
console.log(cover);
$('.cover-wrapper').each(function () { $('.cover-wrapper').each(function () {
coverWrapper = $(this).data('cat'); coverWrapper = $(this).data('cat');
if (coverWrapper == cover && !($(this).hasClass('current-cover'))) { if (coverWrapper == cover && !($(this).hasClass('current-cover'))) {
...@@ -425,11 +467,18 @@ $(window).load( function() { ...@@ -425,11 +467,18 @@ $(window).load( function() {
});//END document load });//END document load
var timer; var timer;
$(window).scroll(function(e) { $(window).scroll(function(e) {
onScroll(e) onScroll(e);
var stickySidebar = $('.home-down-wrapper').offset().top;
if ($(window).scrollTop() > stickySidebar - $('.nav-header').outerHeight()) {
$('.home-footer-nav .nav-wrapper').addClass('fixed');
}
else {
$('.home-footer-nav .nav-wrapper').removeClass('fixed');
}
}); });
//$(window).bind("scrollStop",onScroll) //$(window).bind("scrollStop",onScroll)
$(document).ready(function(){ $(document).ready(function(){
$('.nav-content li').on('mouseover',function(){ $(document).on('mouseover','.nav-content li',function(){
$(this).stop(false,true).fadeImage(); $(this).stop(false,true).fadeImage();
}); });
// Catalog Page : Change product image depending on selected color // Catalog Page : Change product image depending on selected color
...@@ -465,4 +514,9 @@ $(window).resize(function() { ...@@ -465,4 +514,9 @@ $(window).resize(function() {
window.addEventListener("load", function(){ window.addEventListener("load", function(){
var load_screen = document.getElementById("loading-container"); var load_screen = document.getElementById("loading-container");
document.body.removeChild(load_screen); document.body.removeChild(load_screen);
}); });
\ No newline at end of file
wp-content/themes/nap/front-page.php
View file @ 30b55acf
...@@ -2,10 +2,9 @@ ...@@ -2,10 +2,9 @@
get_header(); get_header();
get_sidebar(); get_sidebar();
$url = nap_attachment_image($ID); $url = nap_attachment_image($ID);
?> ?>
<div id="home"> <div id="home">
<div data-defaultimg ='<?php echo $url ;?>' class="transition img-wrapper" style ="background-image: url('<?php echo $url ;?>')"></div>
<div data-defaultimg ='<?php echo $url ;?>' class="transition img-wrapper" style ="background-image: url('<?php echo $url ;?>')"></div>
<div class="news-btn circle-btn add-icon font-small animated zoomIn"><span>Nouveautés</span></div> <div class="news-btn circle-btn add-icon font-small animated zoomIn"><span>Nouveautés</span></div>
<aside class="news-wrapper container "> <aside class="news-wrapper container ">
<div class="news-header crete"> <div class="news-header crete">
...@@ -13,30 +12,39 @@ $url = nap_attachment_image($ID); ...@@ -13,30 +12,39 @@ $url = nap_attachment_image($ID);
<span class="close-btn"></span> <span class="close-btn"></span>
</div> </div>
<div class="news-content"> <div class="news-content">
<?php <?php
if( get_field('nap_nouveautes',135) ): if( get_field('nap_nouveautes',135) ):
while ( has_sub_field('nap_nouveautes',135) ) : while ( has_sub_field('nap_nouveautes',135) ) :
?> ?>
<article class = "row <?php the_sub_field('nv_taille');?>"> <article class = "row <?php the_sub_field('nv_taille');?>">
<a href="<?php echo the_sub_field('nv_lien');?>"> <a href="<?php echo the_sub_field('nv_lien');?>">
<figure> <figure>
<img src="<?php the_sub_field('nv_image');?>" alt="Nouveautés"> <img src="<?php the_sub_field('nv_image');?>" alt="Nouveautés">
<figcaption> <figcaption>
<?php htmlspecialchars(the_sub_field('nv_titre'));?> <?php htmlspecialchars(the_sub_field('nv_titre'));?>
</figcaption> </figcaption>
</figure> </figure>
</a> </a>
</article> </article>
<?php <?php
endwhile; endwhile;
endif; endif;
?> ?>
</div>
</aside>
<!--Menu for mobile-->
<div class="home-footer-nav display--only-mobile">
<div class="header">
<div class="nav-wrapper footer-home-content">
<div class="home-down-wrapper blue-bg"></div>
<span class = "home-down chevron bottom hidden-elem pink-btn abs-center"></span>
</div>
</div>
</div> </div>
</aside> </div><!--END home -->
</div><!--END home --> <?php
<?php
get_footer(); get_footer();
wp-content/themes/nap/sidebar.php
View file @ 30b55acf
...@@ -3,7 +3,14 @@ ...@@ -3,7 +3,14 @@
<nav class="row"> <nav class="row">
<div class="main-nav nav-wrapper animated slideInLeft"> <div class="main-nav nav-wrapper animated slideInLeft">
<div class="nav-header"> <div class="nav-header">
<a href="<?php echo get_home_url(); ?>" title="nap by CGMP"><h1 class="logo" >nap by CGMP</h1></a> <a href="<?php echo get_home_url(); ?>" title="nap by CGMP"><h1 class="logo" >nap by CGMP</h1></a>
<div class="nav_open_btn abs-center display--only-mobile">
<div class="nav-btn o-grid__item clearfix">
<button class="c-hamburger c-hamburger--htx right">
<span>toggle menu</span>
</button>
</div>
</div>
</div> </div>
<?php get_template_part( 'nav-list' );?> <?php get_template_part( 'nav-list' );?>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment