Почему при переходе из респонсив в десктоп, меню пропадает?

Question

[Максим]

Собственно проблема в самом меню , оно превращается в прямоугольник а в десктопе при diplay:table; и т д становится в линию , но после того как оно открывается на любом устройстве то просто пропадает. Это пример пациента : https://geyanpeaple.github.io/menu/

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<header> 
 <h3> Это заголовок сайта</h3>
  <p>это слоган сайта</p>
  <p class="show">menu</p>
<menu> 
  <ul> 
    <li><a href="">Главная</a></li>
    <li><a href="">Гостевая</a></li>
    <li><a href="">Наш адресс</a></li>
    <li><a href="">О нас</a></li>
    <span>Закрыть</span>
  </ul>
</menu>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

*{
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
}
header{
  display:block;
  width:90%;
  height:200px;
  margin:5px auto;
  position:relative;
  box-shadow:0 0 1px #cc0000;
}
menu{
  display:table;
  margin:auto;
  position:absolute;
  bottom:0;
}
menu ul{
  display:table-row;
}
menu ul li{
  display:table-cell;
  text-align:center;
}
menu ul li a{
  display:table-cell;
  width:1000px;
  height:50px;
  vertical-align:middle;
  background:-webkit-linear-gradient(#cc0000,#fefefe,#cc0000);
  color:#111;
}
menu ul span{
  display:none;
}
.show{
  width:100px;
  text-align:center;
  padding:5px 0;
  background:lightblue;
  color:#fefefe;
  font-weight:800;
  cursor:pointer;
  display:none;
}
@media screen and (max-width:640px){
  html,body{
    height:100%;
  }
  header{
    position:static;
  }
  menu{
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    height:100%;
    background:#000;
    display:none;
  }
  menu ul,menu ul li{
    display:block;
  }
  menu ul li a{
    background:-webkit-linear-gradient(#999,#111);
    color:#fefefe;
  }
  menu ul span{
    display:block;
    color:#fff;
  }
  .show{
    display:block;
    position:fixed;
    right:32px;
    top:6px;
  }
}

$(document).ready(function(){
    $(".show").click(function(){
        $("menu").show();
    });
    $("menu ul span").click(function(){
        $("menu").hide();
    });
});

собственно ни чего заумного нету в нём ,
codepen

Answer 1

[Милок Мурлыка]

Всё правильно, вы же использовали функцию hide на меню (а это display: none ), вот оно и пропало
Пути решения проблемы:
1. Используйте отдельное меню для мобильной версии и скрывайте только его функцией hide
2. Измените порядок своего css кода, так что бы сначала был код для моб устройств а потом для десктопа, и добавьте к свойству display на десктопе important.
Пример:

.menu {
/* код для моб. устройств */
}

@media (min-width: 666px) {
  .menu {
    display: table !important;
    /* код для десктопа */
  }
}

3. Найдите другой способ скрыть/показать меню на моб. устройствах

Comments

[Максим]

я important делал - тогда оно просто открытое получается и не закрывается , буду другой вариант делать

[Милок Мурлыка]

Максим Жаров: Скорее всего вы не изменили порядок css кода, и это правило начало перекрывать код для мобильной версии, посмотрите например

[Милок Мурлыка]

Максим Жаров: либо что бы все не переделывать можно сделать так: https://jsfiddle.net/mmurlyka/ogkq98cf/ обратите внимание на код css с 15 по 22 строку

[Максим]

Милок Мурлыка: лан я переделаю и скину потом другую версию

[Максим]

Милок Мурлыка: https://geyanpeaple.github.io/menu/ вот так вроде всё окей