BootStrap - Menu Hamburger
O menu hamburger é exibido quando as opções do menu não cabem na largura da tela
Sendo assim os itens do menu são removidos e em lugar deles é exibido um ícone ou
botão com aparência de um 'hamburger'.
Quando clicamos no 'hamburger' é aberta uma janela na lateral esquerda da tela com,
exatamente, as mesmas opções do menu original.
Tudo isso é feito automaticamente pelo bootstrap e seus scripts e css.
Redimensione a janela do browser para verificar como funciona.
Código da página
<!DOCTYPE html>
<html>
<head>
<!--Informando ao browser que esta página deve ser otimizada para dispositivos móveis-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Importando a Fonte de ícones do Google - icone menu sanduiche esta aqui-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Importando materialize.css - este framework faz tudo que precisamos-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body id="home" class="scrollspy">
<!-- importante : O hamburguer menu só aparece se a tela for pequena-->
<div class="navbar">
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<a href="" class="brand-logo">Ideapedia</a>
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#home" class="">Home</a>
</li>
<li>
<a href="#search" class="">Pesquisar</a>
</li>
<li>
<a href="#popular" class="">Quem Somos</a>
</li>
<li>
<a href="#galeria" class="">Fotos</a>
</li>
<li>
<a href="#contato" class="">Contato</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--Meu de navegação na lateral esquerda da tela-->
<ul class="sidenav" id="mobile-nav">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#search">Pesquisar</a>
</li>
<li>
<a href="#popular">Quem somos</a>
</li>
<li>
<a href="#galeria">Fotos</a>
</li>
<li>
<a href="#contato">Contato</a>
</li>
</ul>
<!--JavaScript at end of body for optimized loading-->
<!-- script type="text/javascript" src="js/materialize.min.js"></script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
//menu lateral esquerdo
const sideNav = document.querySelector(".sidenav");
M.Sidenav.init(sideNav,{});
</script>
</body>
</html>