2

Eu to aprendendo grid e layout responsivo e não sei a melhor maneira que eu conseguiria criar um "hamburger menu" com ele.

Até agora eu consegui fazer meu wrapper de conteúdo se mover pra esquerda e deixar um espaço pro menu, mas não sei como colocar o menu no espaço que sobrou ta aqui o link do exercicio:

https://jsfiddle.net/5kq8pas0/

Conseguem ajudar?

4
  • 2
    Aqui no pt.stackoverflow.com vc pode comentar em português...
    – hugocsl
    Commented 4/01/2018 às 17:07
  • 2
    Bem-vindo ao StackOverflow em português. Tal como o nome sugere, o idioma oficial usado aqui é o português. Assim sendo, você poderia por favor traduzir sua pergunta? Caso prefira, você também pode fazer essa mesma pergunta no site em inglês do StackOverflow. Commented 4/01/2018 às 17:07
  • 1
    Ô, fi, traduz a pergunta aí, mano. Tu tá no site português do Stackoverflow. Commented 4/01/2018 às 17:08
  • Editado senhores Commented 4/01/2018 às 17:18

1 Resposta 1

1

Você pode posicionar o menu adicionando um position: relative; e top: 70px dentro do @media screen na ul do menu (o valor 70px você pode ajustar até que o menu fique no local desejado à partir do topo):

.multi-header ul{
   display: none;
   position: relative;
   top: 70px;
}

E também dentro do @media screen, adicionar o estilo abaixo para converter as <li> para block, de modo que uma fique abaixo da outra no menu:

.multi-header li{
    display: block;
}

Veja funcionando (desativei o display: none do menu para visualização):

$(document).ready(function() {
    function toggleSidebar() {
        console.log("ayy");
       $(".button").toggleClass("active");
       $(".wrapper").toggleClass("move-to-left");
    //   $("main").toggleClass("move-to-left");
    //   $(".sidebar-item").toggleClass("active");
       $(".multi-header ul").toggleClass("menuativo menunaoativo");
    }
    
    $(".button").on("click tap", function() {
       toggleSidebar();
    });
    
    // $(document).keyup(function(e) {
    //   if (e.keyCode === 27) {
    //     toggleSidebar();
    //   }
    // });
});
html, body{
	margin:0px;
	padding: 0px;
	color:#8f8f8f;
	font-family: 'Open Sans', sans-serif;
}

nav{
	padding: 20px;
}

.wrapper{
	display:grid;
	grid-template-columns:1fr;
    grid-auto-rows: minmax(100px,auto);
    -webkit-transition: transform .7s ease-in-out;
    -moz-transition: transform .7s ease-in-out;
    -ms-transition: transform .7s ease-in-out;
    -o-transition: transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
}

h1{
	color:#4c2779;
	font-size: 1.5em;
}

/* MENU */
.multi-logo{
    height: 60px;
    width: 150px;
    padding-left: 20px;
}

.multi-header{
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.multi-header ul{
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
}

.multi-header li{
    display: inline-block;
    padding: 0px 20px;
}


.multi-header li a{
    text-decoration: none;
    font-size: 20px;
    color: #3d3d3d;
    position: relative;
    cursor: pointer;
}

/* MENU ANIMATION */
.multi-header li a:hover{
    color: #4B2779;
    /* opacity: 0.5; */
}

.multi-header li a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #4B2779;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }

.multi-header li a:hover:before{
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

     .menuativo{
         display: block;
     }

     .menunaoativo{
         display: none !important;
     }

/* MENU ANIMATION */
/* MENU */

/* MEDIA QUERIES */

@media screen and (min-width: 768px){
   .multi-header ul{
      display: block !important;
   }
}

@media screen and (max-width: 767px), screen and (max-width: 767px) and (orientation: landscape), screen and (max-width: 767px) and (orientation: portrait){

.multi-header li{
    display: block;
}


    .multi-header nav{
        height: 30px;
    }

    .multi-header ul{
       position: relative;
       top: 70px;
     }
     
    .multi-menu-mobile{
        display: block;
    }

    .bar {
        -webkit-transition: all .7s ease;
        -moz-transition: all .7s ease;
        -ms-transition: all .7s ease;
        -o-transition: all .7s ease;
        transition: all .7s ease;
      }
    
      .bar {
        display: block;
        height: 5px;
        width: 50px;
        background-color: #4B2779;
        margin: 10px auto;
      }

      .button {
          float: right;
          cursor: pointer;
      }


      .button.active .top {
    
        -webkit-transform: translateY(15px) rotateZ(45deg);
        -moz-transform: translateY(15px) rotateZ(45deg);
        -ms-transform: translateY(15px) rotateZ(45deg);
        -o-transform: translateY(15px) rotateZ(45deg);
        transform: translateY(15px) rotateZ(45deg);
      }
      
      .button.active .bottom {
        -webkit-transform: translateY(-15px) rotateZ(-45deg);
        -moz-transform: translateY(-15px) rotateZ(-45deg);
        -ms-transform: translateY(-15px) rotateZ(-45deg);
        -o-transform: translateY(-15px) rotateZ(-45deg);
        transform: translateY(-15px) rotateZ(-45deg);
      }
      
      .button.active .middle {
        width: 0;
      }


      .move-to-left {
        -webkit-transform: translateX(-250px);
        -moz-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -o-transform: translateX(-250px);
        transform: translateX(-250px);
      }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="multi-header">
				<img src="https://thumb1.shutterstock.com/display_pic_with_logo/173777662/620757677/stock-vector-slide-penguin-logo-template-620757677.jpg" class="multi-logo">
				<nav>
					<div class="button" id="btn">
						<div class="bar top"></div>
						<div class="bar middle"></div>
						<div class="bar bottom"></div>
					</div>
					<ul class="menunaoativo">
						<li><a>Home</a></li>
						<li><a>Solutions</a></li>
						<li><a>Cases</a></li>
						<li><a>Contact</a></li>
					</ul>
				</nav>
			</header>
	<div class="wrapper">
		

		<section>
			<a name="slideShow"></a>

			<h1>Banner</h1>
		</section>
		
		<section>
			<a name="sec1"></a>

			<h1>Section 1</h1>
		</section>

		<section>
			<a name="sec2"></a>

			<h1>Section 2</h1>
		</section>
		
		<section>
			<a name="sec3"></a>
			<h1>Section 3</h1>
		</section>

		<footer>
			<h1>Footer</h1>''
		</footer>

	</div>

4
  • 1
    Hmm entendi, eu tava pensando que teria que usar o z-index do grid e fazer ele aparecer com ele Commented 4/01/2018 às 18:16
  • mas dai eu preciso de uma classe com display: none pra fazer o toggleClass se eu quiser sumir e aparecer com ele? Commented 4/01/2018 às 18:24
  • @ViniciusSouza Criei duas class no CSS: .menuativo e .menunaoativo e coloquei .menunaoativo na ul... e adicionei no jQuery $(".multi-header ul").toggleClass("menuativo menunaoativo");
    – Sam
    Commented 4/01/2018 às 18:38
  • @ViniciusSouza Adicionei tb outro @media screen and (min-width: 768px){ para que o menu apareça quando o hamburguer sumir.
    – Sam
    Commented 4/01/2018 às 18:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .