Image disappears after animation + window resize

Question

Image disappears after animation + window resize

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm building a menu for my blog, I found some codes on the net, and I'm trying to implement one of them. The problem is this: the image disappears from the header menu when I do the following:

Shrink the window to a mobile phone size

I open the menu burger, I close again

Expanding the window

And puff ... I do not have the logo. What is escaping me? I have the code below:

CSS

     /* Interface - Mobile */

    .fa:before {
    font-family: FontAwesome;
    }

    header .bgMenu {
     height: 80px;
    background-color: #fff;
    box-sizing: border-box;
    text-align: right;
    }

header.fixedMenu {
    position: fixed;
    width: 100%;
}

.navMenu {
  z-index: -1;
  position: relative;
}



.linksMenu {
  display: none;
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
}

.linksMenu.showMenu {
  display: block;
  background-color: #148dcd;
  padding-top: 2em;
  margin-top: -2.25em;
}

.linksMenu a {
  color: #ECEFF1;
  text-align: left;
  font: 1em Oswald;
  font-family: 'Exo', sans-serif;
  padding: .8em;
  display: block;
  text-decoration: none;


}

.linksMenu a:before {
  margin: 0 1em 0 .25em;
}

.linksMenu li:nth-child(1) a {
  background-color: rgba(0,116,166,.4);
}

.linksMenu li:nth-child(2) a {
  background-color: rgba(0,116,166,.55);
}

.linksMenu li:nth-child(3) a {
  background-color: rgba(0,116,166,.7);
}

.linksMenu li:nth-child(4) a {
  background-color: rgba(0,116,166,.85);
}

.linksMenu li:nth-child(5) a {
  background-color: rgba(0,116,166,1);
}

.burgerMenu {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-color: #148dcd;
  border-radius: 50%;
  display: inline-block;
  margin: 15px;
}

.burger {
  top: 22px;
  right: 10px;
  opacity: 1;
}

.burger::before {
  top: 10px;
  content: "";
  display: block;
}

.burger::after {
  bottom: 10px;
  content: "";
  display: block;
}

.burger::after, .burger::before, .burger {
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  background-color: #fff;
  border-radius: 2px;
  width: 29px;
  height: 5px;
  position: absolute;
}

/* Shade from Burger Menu */

.bgShade {
  background-color: rgba(0,0,0,.75);
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100vw;
  visibility: hidden;
  transition: .25s linear;
  opacity: 0;
}

.bgShade.showShade {
  opacity: 1;
  visibility: visible;
}

.bgShade.hideShade {
  opacity: 0;
  visibility: hidden;
}

/* Scroll locked */

body.bodyStopped {
  overflow: hidden;
}

/* Transition from Burger menu to X */

.burgerMenu.showMenu .burger::after{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  bottom: 0px;
}

.burgerMenu.showMenu .burger::before{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 0px;
}

.burgerMenu.showMenu .burger{
  background: rgba(111,111,111,.0);
}

/* Interface - Desktop */

@media screen and (min-width: 768px) {

  header .bgMenu {
    background-color: rgba(20,141,205,1);
  }

  div.burgerMenu {
    display: none;
  }

  .navMenu {
    z-index: 0;
  }

  .linksMenu {
    display: block;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  .linksMenu li {
    display: inline-block;
  }

  .navMenu .linksMenu li a {
    background-color: transparent;
    color: #0c547b;
    font-family: 'Exo', sans-serif;
    font-weight:bold;
    font-size: 1.3em;
    padding: 33px 1.2em 24px .8em;
    transition: .25s;
  }

  .navMenu .linksMenu li a:hover {
    color: #fff;
  }

  .navMenu.bounceOutUp {
    animation-name: unset;
  }

  .figureProfile.animated.zoomInUp img {
    max-width: inherit;
    width: 360px;
  }

  .bgShade.fadeIn,
  .bgShade.fadeOut {
    display: none;
  }
}

JQuerry

// Burger Menu transitions
var count = 0;
$(".burgerMenu").click(function() {
    count++;
    // Var to identify even or odd click
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // Odd clicks
    if (isEven(count) === false) {
        $("header").addClass("fixedMenu");
        $(".burgerMenu").addClass("showMenu");
        $(".linksMenu").addClass("showMenu");
        $(".navMenu").removeClass("bounceOutUp");
        $(".navMenu").addClass("bounceInDown");
        $(".bgShade").removeClass("hideShade");
        $(".bgShade").addClass("showShade");
        $("body").addClass("bodyStopped");
    }
    // Even clicks
    else if (isEven(count) === true) {

        //$("header").removeClass("fixedMenu"); 
        $(".burgerMenu").removeClass("showMenu");
        $(".navMenu").removeClass("bounceInDown");
        $(".navMenu").addClass("bounceOutUp");
        $(".bgShade").removeClass("showShade");
        $(".bgShade").addClass("hideShade");
        $("body").removeClass("bodyStopped");
    }
});



// Burger menu without one extra click
$('.linkHeader').click(function() {
    count++;
});

HTML

<div class="bgShade animated"></div>
            <header id="header" class="animated">


            <div class="bgMenu" style="background: #148dcd">

              <div style="padding:15px 0px 0px 15px; float:left;"><img src="http://www.doveloper.com/wp-content/uploads/2016/11/blog-logo-hover-300x90.png"height="60" width="200"></div>

                <div class="burgerMenu">
                <div class="burger"></div>

            </div>
            <nav class="navMenu animated">
            <ul class="linksMenu">
                <li class="cool-link" id="home-menu-button"><a href="#" class="fa fa-code">Início</a></li>
                <li class="cool-link" id="articles-menu-button"><a href="#" class="fa fa-book">Artigos</a></li>
                <li class="cool-link" id="courses-menu-button"><a href="#" class="fa fa-rocket">Cursos</a></li>
                <li class="cool-link" id="tools-menu-button"><a href="#" class="fa fa-cog">Ferramentas</a></li>
                <li class="cool-link" id="about-menu-button"><a href="#" class="fa fa-briefcase">Sobre</a></li>
            </ul>
    </nav>
  </div>
</header>

If you want to see for yourself here: link

html jquery css

asked by anonymous 17.05.2017 / 13:39

2 answers

Nhibernate Self-reference Mapping Laravel 5.1 problems with csrf_token

score 0 · Answer 1

I was able to solve the problem using this "deviation":

    $(window).on('resize', function(){


    if ($(window).width() < 768) {
       $("#logo_mobile").css("display","block");
        $("#logo_desktop").css("display","none");

    }
    else {
          $("#logo_mobile").css("display","none");
        $("#logo_desktop").css("display","block");
    }

});

So I guarantee that the image will reappear. Theoretically this will almost never be executed because the user usually does not change the size of the window.

score 0 · Answer 2

The problem is that you are adding the .showMenu class to the $(".linksMenu") element when the burger is opened and is not removing this class when the burger is closed . This way, it was conflicting in the elements and leaving the div of the hidden logo.

The solution is to add the following line in the script, within block else if (isEven(count) === true) { to remove such class:

$(".linksMenu").removeClass("showMenu");

Another thing is to do a function that closes the burger automatically (if it is open) when the window size is greater than or equal to 768px (same size referenced in CSS as @media ):

$(window).on("load resize", function(){
    if(window.innerWidth >= 768){
        $(".linksMenu").removeClass("showMenu");
        if($("nav.navMenu").hasClass("bounceInDown")){
            $(".burgerMenu").trigger("click");
        }
    }
});

// Burger Menu transitions
var count = 0;
$(".burgerMenu").click(function() {
    count++;
    // Var to identify even or odd click
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // Odd clicks
    if (isEven(count) === false) {
        $("header").addClass("fixedMenu");
        $(".burgerMenu").addClass("showMenu");
        $(".linksMenu").addClass("showMenu");
        $(".navMenu").removeClass("bounceOutUp");
        $(".navMenu").addClass("bounceInDown");
        $(".bgShade").removeClass("hideShade");
        $(".bgShade").addClass("showShade");
        $("body").addClass("bodyStopped");
    }
    // Even clicks
    else if (isEven(count) === true) {

        //$("header").removeClass("fixedMenu"); 
        $(".burgerMenu").removeClass("showMenu");
        $(".linksMenu").removeClass("showMenu");
        $(".navMenu").removeClass("bounceInDown");
        $(".navMenu").addClass("bounceOutUp");
        $(".bgShade").removeClass("showShade");
        $(".bgShade").addClass("hideShade");
        $("body").removeClass("bodyStopped");
    }
});

$(window).on("load resize", function(){
	if(window.innerWidth >= 768){
        $(".linksMenu").removeClass("showMenu");
		if($("nav.navMenu").hasClass("bounceInDown")){
			$(".burgerMenu").trigger("click");
		}
	}
});

// Burger menu without one extra click
$('.linkHeader').click(function() {
    count++;
});

/* Interface - Mobile */

    .fa:before {
    font-family: FontAwesome;
    }

    header .bgMenu {
     height: 80px;
    background-color: #fff;
    box-sizing: border-box;
    text-align: right;
    }

header.fixedMenu {
    position: fixed;
    width: 100%;
}

.navMenu {
  z-index: -1;
  position: relative;
}



.linksMenu {
  display: none;
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
}

.linksMenu.showMenu {
  display: block;
  background-color: #148dcd;
  padding-top: 2em;
  margin-top: -2.25em;
}

.linksMenu a {
  color: #ECEFF1;
  text-align: left;
  font: 1em Oswald;
  font-family: 'Exo', sans-serif;
  padding: .8em;
  display: block;
  text-decoration: none;


}

.linksMenu a:before {
  margin: 0 1em 0 .25em;
}

.linksMenu li:nth-child(1) a {
  background-color: rgba(0,116,166,.4);
}

.linksMenu li:nth-child(2) a {
  background-color: rgba(0,116,166,.55);
}

.linksMenu li:nth-child(3) a {
  background-color: rgba(0,116,166,.7);
}

.linksMenu li:nth-child(4) a {
  background-color: rgba(0,116,166,.85);
}

.linksMenu li:nth-child(5) a {
  background-color: rgba(0,116,166,1);
}

.burgerMenu {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-color: #148dcd;
  border-radius: 50%;
  display: inline-block;
  margin: 15px;
}

.burger {
  top: 22px;
  right: 10px;
  opacity: 1;
}

.burger::before {
  top: 10px;
  content: "";
  display: block;
}

.burger::after {
  bottom: 10px;
  content: "";
  display: block;
}

.burger::after, .burger::before, .burger {
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  background-color: #fff;
  border-radius: 2px;
  width: 29px;
  height: 5px;
  position: absolute;
}

/* Shade from Burger Menu */

.bgShade {
  background-color: rgba(0,0,0,.75);
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100vw;
  visibility: hidden;
  transition: .25s linear;
  opacity: 0;
}

.bgShade.showShade {
  opacity: 1;
  visibility: visible;
}

.bgShade.hideShade {
  opacity: 0;
  visibility: hidden;
}

/* Scroll locked */

body.bodyStopped {
  overflow: hidden;
}

/* Transition from Burger menu to X */

.burgerMenu.showMenu .burger::after{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  bottom: 0px;
}

.burgerMenu.showMenu .burger::before{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 0px;
}

.burgerMenu.showMenu .burger{
  background: rgba(111,111,111,.0);
}

/* Interface - Desktop */

@media screen and (min-width: 768px) {

  header .bgMenu {
    background-color: rgba(20,141,205,1);
  }

  div.burgerMenu {
    display: none;
  }

  .navMenu {
    z-index: 0;
  }

  .linksMenu {
    display: block;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  .linksMenu li {
    display: inline-block;
  }

  .navMenu .linksMenu li a {
    background-color: transparent;
    color: #0c547b;
    font-family: 'Exo', sans-serif;
    font-weight:bold;
    font-size: 1.3em;
    padding: 33px 1.2em 24px .8em;
    transition: .25s;
  }

  .navMenu .linksMenu li a:hover {
    color: #fff;
  }

  .navMenu.bounceOutUp {
    animation-name: unset;
  }

  .figureProfile.animated.zoomInUp img {
    max-width: inherit;
    width: 360px;
  }

  .bgShade.fadeIn,
  .bgShade.fadeOut {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="bgShade animated"></div>
<header id="header" class="animated">
    <div class="bgMenu" style="background: #148dcd">
        <div style="padding:15px 0px 0px 15px; float:left;"><img src="http://www.doveloper.com/wp-content/uploads/2016/11/blog-logo-hover-300x90.png"height="60" width="200"></div>
        <div class="burgerMenu">
            <div class="burger"></div>
        </div>
        <nav class="navMenu animated">
            <ul class="linksMenu">
                <li class="cool-link" id="home-menu-button"><a href="#" class="fa fa-code">Início</a></li>
                <li class="cool-link" id="articles-menu-button"><a href="#" class="fa fa-book">Artigos</a></li>
                <li class="cool-link" id="courses-menu-button"><a href="#" class="fa fa-rocket">Cursos</a></li>
                <li class="cool-link" id="tools-menu-button"><a href="#" class="fa fa-cog">Ferramentas</a></li>
                <li class="cool-link" id="about-menu-button"><a href="#" class="fa fa-briefcase">Sobre</a></li>
            </ul>
        </nav>
    </div>
</header>