Ukrywanie i pokazywanie mobilnej wersji menu

pytanie zadane 19 sierpnia 2018 w JavaScript przez WRX Nowicjusz (120 p.)

Witam. Ostatnio rozpocząłem pracę nad własnym projektem opartym na Bootstrapie i responsywnosci. Niestety od jakichś kilku godzin stoję w miejscu z powodu problemu, jakim jest przycisk odpowiadający na wersji mobilnej za pokazywanie i ukrywanie menu. Wszystko ładnie działało, dopóki nie rozciągnąlem okna przeglądarki z widoku mobilnego na desktopowy, w którym za nic nie moge przywrócić menu, które za sprawą przycisku w mobilnej wersji jest ukryte (pomijając oczywiście F5). Znalazłem na Internecie kilka postów na ten temat, jednak żaden nie był w stanie mi pomóc. Może macie jakieś sugestie rozwiązania tego problemu?

komentarz 19 sierpnia 2018 przez pablop76 VIP (123,640 p.)

Czy menu jest bt czy sam napisałeś? Jeżeli nie dasz kodu do wglądu to raczej nikt Ci nie pomoże. Pokaż to menu.

komentarz 19 sierpnia 2018 przez WRX Nowicjusz (120 p.)
edycja 19 sierpnia 2018 przez WRX

Tak. Robiłem je sam. Jest to div o id="menu".

<!doctype html>
<html lang="pl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <div id="page">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12 col-md-8 col-lg-7 offset-lg-4 offset-md-3 content">
            
          </div>
          <div id="options" class="col-md-2 col-lg-3">
            <div id="logo">
              <img src="https://lh3.googleusercontent.com/-Gmg2ADPAYl0/W0tLWG4RxYI/AAAAAAAAAAs/1IwXuPS4BUgtvg5nN0LS-Snlq1tsPs-_ACEwYBhgL/w140-h140-p/Unknown%2BAvatar.jpg" alt="Logo">
            </div>
            <div id="icon"><i class="fa fa-bars"></i></div>
            <div id="menu">
              <div class="option">Home</div>
              <div class="option">Team</div>
              <div class="option">Projects</div>
              <div class="option">Offers</div>
              <div class="option">Contact</div>
              <div class="option">About</div>
            </div>
            <div id="corp">&copy; 2018 By me</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="main.js"></script>
  </body>
</html>

Dodam również CSS:

#page {
    max-width: 100%;
    background: #111;
    background-size: cover;
    width: 100vw;
    height: 1500px;
}

body::-webkit-scrollbar {
    width: 0.5vw;
}

body::-webkit-scrollbar-thumb {
    background: red;
}

body::-webkit-scrollbar-track {
    background: black;
}

.content {
    height: 1500px;
    background: black;
    opacity: 0.5;
    box-shadow: 0px 0px 10px red;
}

#options {
    max-height: 100%;
    background-color: black;
    margin: 0;
    padding: 0;
    position: fixed;
    text-align: center;
    display: inline !important;
}

#logo {
    text-align: center;
    padding-top: 100px;
    margin-bottom: 50px;
}

#logo > img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    box-shadow: 0px 2px 5px red;
}

#menu {
    text-align: center;
    margin-top: 25px;
    color: white;
}

.option {
    width: 100%;
    height: 50px;
    font-size: 25px;
}

.option:hover {
    color: red;
    cursor: pointer;
}

#corp {
    width: 100%;
    height: 50px;
    text-align: center;
    color: white;
    margin-top: 100px;
}

#icon {
    display: none;
}

@media screen and (max-width: 767px) {
    #options {
        position: absolute;
        top: 0;
        left: 0;
    }

    #icon {
        display: inline;
        font-size: 40px;
        text-align: center;
        color: white;
    }

    #menu {
        display: none;
    }

    #corp {
        clear:both;
    }

    #logo {
        margin-bottom: 50px;
    }

    #icon:hover {
        cursor: pointer;
        color: red;
    }
}

I sam problem, czyli plik JS:

$(function(){
	var visibleMenu = false;

	$('#icon').click(function(){
		if(visibleMenu == true) {
			$('#menu').css('display', 'none');
			visibleMenu = false;
		} else {
			$('#menu').css('display', 'inline');
			visibleMenu = true;
		}
	});
});

1 odpowiedź

odpowiedź 19 sierpnia 2018 przez pablop76 VIP (123,640 p.)

Klikając na ikonkę menu mobilnego ustawiasz $('#menu').css('display', 'none'); Więc po zmianie rozdzielczości masz to ukryte. Chyba, że w mobilnym zostawisz otwarte. To zła logika w js.