Em qual parte do curso ensina como criar menus laterais ou menus escondidos, que é utilizados em diversos sites hoje em dia.
Em qual parte do curso ensina como criar menus laterais ou menus escondidos, que é utilizados em diversos sites hoje em dia.
hoje, com a Alura e o Google Gemini
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