Em qual parte do curso ensina como criar menus laterais ou menus escondidos, que é utilizados em diversos sites hoje em dia.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Em qual parte do curso ensina como criar menus laterais ou menus escondidos, que é utilizados em diversos sites hoje em dia.
Oi Samuel,
Não tenho certeza se algum curso aqui da Alura ensina isso, mas é algo bem simples de fazer.
Basicamente utiliza-se a propriedade display com o valor none para deixar o menu escondido, em conjunto com a pseudo-classe :hover para quando o usuário passar o mouse em cima do menu ele ser exibido.
Seria algo assim:
<nav>
<span>Menu</span>
<ul class="menu-lateral">
<li>
<a href="pagina1.html">Página 1</a>
</li>
<li>
<a href="pagina2.html">Página 2</a>
</li>
<li>
<a href="pagina3.html">Página 3</a>
</li>
</ul>
</nav>.menu-lateral {
display: none;
}
nav:hover .menu-lateral {
display: block;
}Um exemplo bem simples para você ter uma noção de como seria.
Bons estudos!
Digo no sentido, onde tem a palavra e ao deixar em cima abre mais opção para selecionar.
Eu fiz de um modo, mas quando se coloca no maior zoom ele da uma bugada, e entre outros fatores também, nos campos ele não funciona 100%, se eu ir mandando por aqui, conseguiria ir me auxiliando?
pode mandar aqui seu código que a gente te ajuda
Esse daqui é o meu código até o momento, de uma olhada e ve no que posso melhorar ou se estou no caminho certo. E coloque no zoom maximo da página para verificar o meu erro, pois ele acaba saindo do heigth. Por favor deem um feedback para ver como eu estou indo, sejam sinceros, agradeço.
<!DOCTYPE html lang = "PT-BR">
<html>
<head>
<meta charset = "UTF-8">
<title>Login</title>
<link rel="stylesheet" href="reset.css">
<!-- <link rel="stylesheet" href="login.css"> -->
<link rel="stylesheet" href="deshboard.css">
</head>
<body>
<main>
<section>
<nav class="menu-lateral">
<img src="img/banner.png" alt="Control Service" class="banner">
<ul class="titulo-lateral">
<li>Criar ordem de serviço</li>
<li>Criar ordem de serviço</li>
<li>Criar ordem de serviço</li>
<li>Criar ordem de serviço</li>
</ul>
</nav>
</section>
</main>
</body>
</html>section{
background: url("img/fundo-rodape.jpg");
width: 200px;
height: 100%;
}
.titulo-lateral{
text-decoration: none;
color: orange;
font-size: 15px;
}
.titulo-lateral li{
padding: 20px;
}
.titulo-primeiro{
margin-bottom: 20px;
}
.nav{
color: orange;
font-size: 20px;
margin-bottom: 10px;
}
.banner{
margin: 1em;
width: 170px;
text-align: center;
}
.titulol li{
color: white;
padding-left: 20px;
}
.conteudo-lateral label{
padding: 0px;
}Não conseguir ver todos os problemas, pois não tem o código completo.
Mas acho que entendi o que você precisar fazer, que é um submenu que vai abrir mais opções quando passar o mouse em cima.
Fiz um exemplo baseado no seu código:
<nav class="menu-lateral">
<img src="img/banner.png" alt="Control Service" class="banner">
<ul class="titulo-lateral">
<li class="submenu">Criar ordem de serviço
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>Criar ordem de serviço</li>
<li>Criar ordem de serviço</li>
<li>Criar ordem de serviço</li>
</ul>
</nav>.titulo-lateral ul {
display: none;
}
.submenu:hover ul {
display: block;
}E sobre o código, no qual eu estou fazendo, qual seria o feedback dessa parte?
Só para ver se eu entendi o que você fez: Pegou a class da primeira ul e ocultou o sub-menu colocando após um hover com a seguinte class, assim ao colocar o mouse em cima da palavra criar ordem de serviço ela acaba aparecendo os restante tendo um display block para pegar todo o campo daquele conteúdo.
Display: none - faz que a escrita suma?
e como está dentro um uma ul, porque não sumiu também as outras palavras, ex: criar ordem de serviço(que seria o primeiro item)?
Deem uma olha porque ao dar zoom maximo ele acaba cortando la embaixo pelo qual o motivo, o que estou fazendo de errado?
Oi Samuel,
O seletor .titulo-lateral ul serve justamente para selecionar apenas o submenu e não o menu principal.
Quanto ao zoom, é difícil não ter problemas, pois isso depende do navegador e dificilmente vamos conseguir tratar no código todas as possibilidades de zoom mínimo e máximo.
Então quanto ao zoom nao tem problema de acabar saindo do enquadro do menu lateral?
A princípio não vejo problemas.
Quando damos um zoom muito grande é comum que os sites tenham componentes que fiquem desalinhados ou fora do componente "pai" mesmo.
Preciso de ajuda, são duas coisas:
1º - Ao deixar o mouse em cima do objeto, não quero que a cor lateral acabe subindo, tipo parece que a cor lateral ela não pega os 100%, o que pode ser isso?
2º Como está feito o menu lateral, como ponho um texto ao lado desse menu? E se perceber tem um icone que ao clicar o menu some, como faço para que o conteúdo ao lado fique se adaptando para quando some e quando aparece o menu lateral?
<!DOCTYPE html lang = "PT-BR">
<html>
<head>
<meta charset = "UTF-8">
<title>Login</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="deshboard.css">
</head>
<body>
<main>
<input type="checkbox" id="btn-lateral">
<label for="btn-lateral">
<img src="img/btn-lateral.png" alt="">
</label>
<nav class="borda-lateral">
<img src="img/banner.png" alt="Control Service" class="banner">
<nav class="menu-lateral">
<ul class="titulo-lateral">
<li class="submenu">Ordem de serviço
<ul>
<li><a>Criar ordem</a></li>
<li><a>Ver ordens</a></li>
<li><a>Orçamento</a></li>
</ul>
</li>
<li class="submenu">Prestadores
<ul>
<li><a href="agenda.html" class="identificador">Agenda(Em aberto)</a></li>
<li><a href="concluidos.html" class="identificador">Concluidos</a></li>
<li><a>outra coisa</a></li>
</ul>
</li>
<li class="submenu">Cálculo de serviço
<ul>
<li><a>Mão de obra</a></li>
<li><a>Material</a></li>
<li><a>Equipamentos</a></li>
</ul>
</li>
<li class="submenu">Indicadores
<ul>
<li><a>Gráficos</a></li>
<li><a>Relátórios</a></li>
</ul>
</li>
<li class="submenu">Cadastro
<ul>
<li><a href="inquilino.html" class="identificador">Inquilino</a></li>
<li><a>Proprietário</a></li>
<li><a>Prestador</a></li>
<li><a>Síndico</a></li>
</ul>
</li>
</ul>
</nav>
</nav>
<nav class="teste">
<h1> TESTE</h1>
</nav>
</main>
</body>
</html>input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked ~ .borda-lateral{
transform: translateX(-200px);
}
label{
position: absolute;
z-index: 1;
margin: 10px;
}
.borda-lateral{
background:orange;
height: 100%;
width: 200px;
margin: 0;
/* left: -200px; */
position: absolute;
transition: all 0.6s;
}
.banner{
width: 80%;
margin: 20% 10%;
}
.teste h1{
display: inline;
}
h1{
position: relative;
width: 940px;
margin: 0 auto;
}
.titulo-lateral{
color: black;
font-size: 100%;
display: inline;
text-transform: uppercase;
}
.submenu li a{
text-decoration: none;
color: white;
}
.menu-lateral ul li{
cursor: pointer;
padding: 15% 10%;
}
.titulo-lateral ul {
display: none;
}
.submenu:hover ul {
display: block;
transition: all;
}
.conteudo{
width: 65%;
margin: 0 auto;
}
Oi, Samuel, tudo bem?
Sobre a primeira questão, eu não compreendi bem, o que seria o objeto que passa o mouse em cima. A cor lateral é o laranja? No teste do seu código, o laranja está no menu e no branco é a cor de fundo.
A segunda questão, eu sugeriria você a dividir o tamanho do seu body, no caso o body com um width: 100vw; e o menu utilizando, por exemplo 20vw; o restante 80vw. Eu testei com uma imagem aleatória: https://imgur.com/a/s2o752G
Eu sugeriria você ver o curso de Flex caso não tenha feito ou não conheça: https://www.alura.com.br/curso-online-posicione-elementos-com-flexbox O flexbox te dá poderes de maior posicionamento e utilizar menos propriedades, o flex te ajuda e ter um código mais enxuto e eficiente no css.
Vamos la, sobre a primeira pergunta, quando deixa o mouse em cima dos ul acaba aparecendo os submenus, quando deixa em cima a ultima opção(não submenus) e o laranja acaba subindo, da uma testada nesse sentdo e verifica se para você acaba subindo também.
E sobre os vw, que seria a largura da pagina e tudo mais, não entendi como faço isso, fiz de um jeito mas que provavelmente não esteja certo, help please.
Oi, Samuel, tudo bem?
Eu testei o último item do seu menu e teve o mesmo comportamento que todos os outros, passa o mouse em cima, os submenus aparecem na cor branca.
Sobre o vw o é somente uma unidade de medida, como px, %, rem e várias outras. A vw é equivalente a uma 1% de largura da tela. Eu só utilizei a vw porque prefiro à pixels, por exemplo. Pixels eu prefiro utilizar para quando quero mexer com medidas menores, como 5px Mas você pode usar outras medidas, estão todas listadas na documentação: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units