Skip to content

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

[Responsive]Home page + header +footer

parent 18a19a75
Show 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
.center {text-align: center}
.full-width {width: 100%}
.full-height{height: 100%}
.display--only-mobile{
display: none;
}
.clearfix:before,
.clearfix:after {
content: " ";
......@@ -291,7 +294,8 @@ II/ Helper..............Helper classes
background: rgba(0, 0, 0, 0.04);
}
.blue-bg{
background: #05162b;
/*background: #05162b;*/
background: #071130;
color: #fff;
}
.pink-bg{
......@@ -633,6 +637,7 @@ header{
}
.nav-content > ul >li.current:before,
.nav-content > ul >li.active:before,
.home-footer-nav .nav-content > ul >li:hover:before,
.main-nav .nav-content > ul >li:hover:before{
width: 28px;
-webkit-transform: scaleX(1);
......@@ -675,8 +680,9 @@ header{
animation-duration: 3s;
}
.nav-header {
border-bottom: 1px solid;
border-bottom: 1px solid rgba(255,255,255,0.5);
padding: 25px;
position: relative;
}
.nav-content{
height: 100%;
......@@ -698,6 +704,9 @@ header{
.pink-list {
color: #ff6a5f;
}
.show-nav{
opacity: 1 !important;
}
/*Submenu*/
nav ul ul{
-webkit-column-count: 2;
......@@ -794,6 +803,12 @@ footer{
.load-page .gallery-wrapper{
overflow: auto;
}
/*mobile*/
.nav_open_btn{
width: 20px;
right: 20px;
left: initial;
}
/* ==========================================================================
VII/ Pages...............ALL pages
========================================================================== */
......@@ -802,9 +817,11 @@ VII/ Pages...............ALL pages
#home {
background: rgba(7,17,48,0.5);
position: relative;
height: 100%;
}
.img-wrapper{
height: 100vh;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
......@@ -838,7 +855,7 @@ aside.news-wrapper {
right: 0;
background: #fff;
color: #182566;
padding: 65px 40px;
padding: 65px 35px;
width: 31%;
overflow-x: hidden;
display: none;
......@@ -869,6 +886,61 @@ aside.news-wrapper {
.half-width{
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{
overflow: hidden;
......@@ -2151,8 +2223,139 @@ div.wpcf7-mail-sent-ok{
.access-form .white-btn{
margin-top: 9px;
}
/* --------------*/ /* ---------->>> Loading <<<-----------*/ /* --------------*/
#loading-container{
/* --------------*/ /* ---------->>> Animation <<<-----------*/ /* --------------*/
/* -----------------------------------------------------------------------------
Burger button Cross Animation
----------------------------------------------------------------------------- */
.o-grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-around;
-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%;
......@@ -2162,9 +2365,9 @@ div.wpcf7-mail-sent-ok{
/*margin:0 -4px -5px -2px;*/
transition: all .2s ease;
z-index: 9999999999999999;
}
}
#loading-center-absolute {
#loading-center-absolute {
/* background: url(../img/logo-loader.png) no-repeat center center;*/
position: absolute;
width: 100%;
......@@ -2182,4 +2385,4 @@ div.wpcf7-mail-sent-ok{
-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 @@
height: 80px;
width: 80px;
}
.news-btn{
height: 93px;
width: 93px;
}
/*Product*/
#slides{
width: 400px;
......@@ -64,17 +68,98 @@
.product-info {
width: 65%;
}
/*Home*/
}
/* ------------------------*/ /* ---------->>> 1024 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 1024px) {
/*Home*/
aside.news-wrapper{
width: 40%;
padding: 65px 20px;
}
}
/* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/
@media screen and (min-width: 861px) {
.nav-content{
display: block !important;
}
}
@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 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 620px) {
......
wp-content/themes/nap/assets/js/main.js
View file @ 30b55acf
......@@ -6,6 +6,28 @@ $(function(){
$('a[href^="#"], .easyzoom a').click(function(e){
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
$('.footer .right li:not(.nl)').on('click','a',function(e){
$('html').css('overflow','hidden');
......@@ -38,6 +60,28 @@ $(function(){
},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
$('#file-p').on('change',function(e){
var fileName = e.target.files[0].name;
......@@ -119,7 +163,7 @@ $(function(){
//animate menu nav
$.fn.open_nav = function(){
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.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);
......@@ -292,7 +336,7 @@ $.fn.getMenuBg = function(){
$('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ;
$('.main,.load-page').outerHeight(containerHeight);
$('.full-height').outerHeight(maxHeight);
$('.nav-content').outerHeight( windowHeight - navHeader - 30);
$('.nav-content').outerHeight( windowHeight - navHeader - footerHeight);
$('.product-images').outerWidth(windowWidth - productWidth -10);
$('.right-container').outerWidth(windowWidth - navMenuWidth);
$('.position--after-menu').css('left',navMenuWidth);
......@@ -307,7 +351,6 @@ $.fn.getMenuBg = function(){
$('#user_pass').attr('placeholder', 'Mot de passe');
$("#user_login").addClass("my-login-username");
$("#wp-submit").addClass("btn rounded white-btn");
});//END Function
function animateOnScroll(){
......@@ -349,7 +392,6 @@ $.fn.animation = function(){
}
function onScrollCover(){
cover = $('.subcat.current a.active').attr("href");
console.log(cover);
$('.cover-wrapper').each(function () {
coverWrapper = $(this).data('cat');
if (coverWrapper == cover && !($(this).hasClass('current-cover'))) {
......@@ -425,11 +467,18 @@ $(window).load( function() {
});//END document load
var timer;
$(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)
$(document).ready(function(){
$('.nav-content li').on('mouseover',function(){
$(document).on('mouseover','.nav-content li',function(){
$(this).stop(false,true).fadeImage();
});
// Catalog Page : Change product image depending on selected color
......@@ -466,3 +515,8 @@ window.addEventListener("load", function(){
var load_screen = document.getElementById("loading-container");
document.body.removeChild(load_screen);
});
wp-content/themes/nap/front-page.php
View file @ 30b55acf
......@@ -2,9 +2,8 @@
get_header();
get_sidebar();
$url = nap_attachment_image($ID);
?>
?>
<div id="home">
<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>
<aside class="news-wrapper container ">
......@@ -35,8 +34,17 @@ $url = nap_attachment_image($ID);
</div>
</aside>
</div><!--END home -->
<?php
<!--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><!--END home -->
<?php
get_footer();
get_footer();
wp-content/themes/nap/sidebar.php
View file @ 30b55acf
......@@ -4,6 +4,13 @@
<div class="main-nav nav-wrapper animated slideInLeft">
<div class="nav-header">
<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>
<?php get_template_part( 'nav-list' );?>
</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