Slide menu disappear in Explorer for Windows Phone 8.1

258 Views Asked by At

I'm developing a website with a responsive slider menu. It should slides from the top to the bottom (on mobile view 320x480px) and it works fine with Safari on MacOSX, Chrome-Firefox-Explorer on Windows 8.1, Safari on iPhone iOS and Chrome on Android but it doesn't work with Explorer on Windows Phone 8.1. Touching the opening button it moves to the bottom but when the closing button is touched it slides to the top and then completely disappears (but it should remain resized and visible).

I tried to work on the css, setting the "visibility:visible !important" or "display:block !important" but it didn't work. Maybe it's a js problem but i'm not able to fix it.

Here's the html:

<div id="wrapper_principale">
  <div id="container_menu">
    <div id="navigazione_principale">
      <div class="riga-nav">
        <a href="info.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/menu/piene/info.svg"><br>info</div></a>
        <a href="news.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/menu/piene/news.svg"><br>news</div></a>
        <a href="marchi.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/menu/piene/marchi.svg"><br>marchi</div></a>
        <a href="mappa.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/menu/piene/map.svg"><br>mappa</div></a>
        <a href="abbigliamento.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Abbigliamento.svg"><br>abbigliamento</div></a>
        <a href="alimentari.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Alimentari.svg"><br>alimentari</div></a>
        <a href="benessere.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Benessere.svg"><br>benessere</div></a>
        <a href="casa.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Casa.svg"><br>casa</div></a>
        <a href="ristorazione.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Ristorazione.svg"><br>ristorazione</div></a>
        <a href="servizi.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Servizi.svg"><br>servizi</div></a>
        <a href="tempo_libero.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Tempo_libero.svg"><br>tempo libero</div></a>
        <a target="blank" href="http://www.facebook.com/LaTorreSuzzara"><div class="blocco-nav facebook-blocco"><img class="icone-menu facebook" src="immagini/icone/Facebook.svg"></div></a>
        <a href="index.html"><div class="blocco-nav special logo-torre"></div></a>
        <div class="blocco-nav-doppio"><input type="search" id="search" name="search" class="txt" size="20" placeholder="cerca e premi invio..."></div>
        <div class="blocco-nav special menu-button">
        <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x" id="open-button">
        <span class="lines"></span>
      </div>
    </div>
  </div>
</div>

And here's the scss rules:

#container_menu {
  position: fixed;
  z-index: 100;
  background-color: $sfondo_menu;
  left: 0;
  top: 0;
  width: 100%;
  height: 356px;
  font-family: Cuprum;
  color: $colore_sfondo_chiaro;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate3d(0,-267px,0);
  -moz-transform: translate3d(0,-267px,0);
  -o-transform: translate3d(0,-267px,0);
  transform: translate3d(0,-267px,0);
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -webkit-transform 0.4s;
  -o-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  -o-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);

#navigazione_principale {
white-space: nowrap;
width: 100%;
margin-left: 0px;
margin-top: 0px;
font-size: 16px;
color: $colore_sfondo_chiaro;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

.riga-nav {
    white-space: nowrap;
    width: 100%;
    height: $altezza_navbar;
    position: relative;
    //border-bottom: 1px dashed $colore_sfondo_chiaro;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    &:last-child {
        right: 0px;
        border-bottom: none;
        border-right: none;
    }
}

.blocco-nav {
    width: 25%;
    height: $altezza_navbar;
    float: left;
    //border-right: 1px dashed $colore_sfondo_chiaro;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    background: linear-gradient(to top, transparent 50%, $marrone_scuro_menu 50%);
    background-size: 100% 201%;
    background-position: left bottom;
    border-bottom: 0px solid $arancione_menu;
    transition: all 0.3s ease;

    &:hover {
        //background-color: $marrone_scuro_menu;
        background-position: left top;
        cursor: pointer;
        border-bottom: 10px solid $arancione_menu;
    }
}

.blocco-nav-doppio {
    width: 50%;
    height: $altezza_navbar;
    float: left;
    //border-right: 1px dashed $colore_sfondo_chiaro;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
}

And the js:

(function () {
"use strict";
var bodyEl = document.body,
    content = document.querySelector('navigazione_principale'),
    openbtn = document.getElementById('open-button'),
    closebtn = document.getElementById('close-button'),
    isOpen = false;

function toggleMenu() {
    if (isOpen) {
        classie.remove(bodyEl, 'show-menu');
    } else {
        classie.add(bodyEl, 'show-menu');
    }
    isOpen = !isOpen;
}

function initEvents() {
    openbtn.addEventListener('click', toggleMenu);
    if (closebtn) {
        closebtn.addEventListener('click', toggleMenu);
    }
}

function init() {
    initEvents();
}

init();

}());

This is the website if you want to check (it's an under construction link) http://giacomotest.altervista.org/TORRErestyling

Any suggestion?

0

There are 0 best solutions below