2

Pessoal não manjo munto de css e gostaria de saber como criar um menu que pode ter ate 5 opções, so que quando eu quiser ter apenas 4 opções ou 3 a largura do menu continue a mesma porem as div com as opções se ajustam ao tamanho do menu, irei deixar um exemplo abaixo

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui o primeiro menu(primeira imagem) tem cinco opções e tamanho 100% da tela do usuário, eu gostaria que quando necessário uma ou 2 das opções sumisse e o menu continuasse 100% da tela e que as opções ficassem maiores para cobrir todo o espaço que ficou vazio como ficou no segundo menu (segunda imagem), Desculpem se ficou meio complicado de entender...

<!DOCTYPE html>
<html lang="pt-br">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>menu acesso rapido</title>
	<style>
		.grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 90px;
			background-color: #005aa5;
			border-radius: 4px;
			color: #FFF;
			text-align: center;
		}
		.__row-menu{
			height: 80px;
			width: 2px;
		}
	</style>
</head>

<body>
	<div class="grid-container">
		<div class="__col-menu">
			<label>$
				<p>Transferencia</p>
			</label>
		</div>

		<div class="__col-menu">
			<label>$
				<p>Pagamento</p>
			</label>
		</div>

		<div class="__col-menu">
			<label>$
				<p>Consultas</p>
			</label>
		</div>

		<div class="__col-menu">
			<label>$
				<p>Gerenciamento</p>
			</label>
		</div>
		<div class="__col-menu">
			<label>$
				<p>Teste</p>
			</label>
		</div>
	</div>
</body>

</html>

1
  • Ficou bem claro amigo, mas edite a sua pergunta e inclua o que vc tem de código, só assim da para gente saber qual eh a melhor opção pro seu caso, já que isso pode ser feito de varias formas... Inclua seu CSS e HTML na pergunta, mesmo que ele não esteja funcionando como esperado
    – hugocsl
    Commented 23/01/2019 às 9:06

2 Respostas 2

3

Como vc está usando Grid Layout minha sugestão é que use uma função de repeat (auto-fit, minmax) no grid-template-columns e não valores fixos de 1fr como vc usou

inserir a descrição da imagem aqui

Aqui vc pode ler mais sobre o Grid Flexível: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

Mas basicamente a regra repeat(auto-fit, minmax(100px, 1fr)) diz que o grid de colunas vai se repetir repeat "infinitamente" (para mais ou menos itens, pois vc pode querer incluir algum item e não vai ter problema), diz que o item vai ajustar a largura automaticamente ao container auto-fit e diz que minmax cada item vai ter no mínimo 100px de largura, e no máximo 1fr, assim garantimos que todos terão a mesma largura, e que quando for menor que 100px o item "cai" para linha de baixo, mas logicamente vc pode tratar isso fazendo os @media que precisar...

Segue o código referente a imagem acima:

.grid-container {
  display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 90px;
  background-color: #005aa5;
  border-radius: 4px;
  color: #FFF;
  text-align: center;
}
.__row-menu{
  height: 80px;
  width: 2px;
}
<div class="grid-container">
  <div class="__col-menu">
    <label>$
      <p>Transferencia</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Pagamento</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Consultas</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Gerenciamento</p>
    </label>
  </div>
  <div class="__col-menu">
    <label>$
      <p>Teste</p>
    </label>
  </div>
</div>

2
  • opa amigo, tenho uma duvida, gostei do que você fez ali com o repeat, gostaria sabe se tem como colocar esse padrão <code>grid-template-columns: 1fr 2px 1fr 2px 1fr 2px 1fr;</code> utilizando o repeat, vai ser sempre 1fr e dps uma mini coluna entre a atual e a proxima coluna da grid, tem como fazer isso com repeat? Commented 24/01/2019 às 20:50
  • @Marcosnikito cara eu entendi o que vc quer, seria tipo um "separador" entre um item e outro ne? Olha acredito que usar o grid não eh a melhor solução pra isso, no seu caso o ideal seria um pseudo elemento no item, ou mesmo um border-right ... Se vc ficar na duvida, eh só abrir outra pergunta com o código do menu que eu te ajudo a fazer. Mas se for abrir outra pergunta lembre-se de marcar alguma resposta aqui como aceita clicando nesse ícone ✔ abaixo das setinhas da pergunta que vc escolher, só pode marcar uma como aceita infelizmente... Abrindo a pergunta nova me fala que te ajudo lá. Abs
    – hugocsl
    Commented 24/01/2019 às 22:18
3

Eu não utilizaria grid para esta solução, pois o grid foi criado pensando em... bom, grid. O que você precisa não é criar um grid, mas sim apenas alinhar os elementos da forma desejada. Para isso eu prefiro utilizar o flex, precisando apenas definir display: flex no elemento do menu e flex-grow: 1 nos itens do menu.

.grid-container {
  display: flex;
  background-color: #005aa5;
  border-radius: 4px;
  color: #FFF;
  text-align: center;
}
.__col-menu {
  height: 80px;
  width: 2px;
  flex-grow: 1;
  cursor: pointer;
}
.__col-menu:hover {
  font-weight: 800;
}
<div class="grid-container">
  <div class="__col-menu">
    <label>$
      <p>Transferencia</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Pagamento</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Consultas</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Gerenciamento</p>
    </label>
  </div>
  <div class="__col-menu">
    <label>$
      <p>Teste</p>
    </label>
  </div>
</div>

<hr>

<div class="grid-container">
  <div class="__col-menu">
    <label>$
      <p>Transferencia</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Pagamento</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Consultas</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Gerenciamento</p>
    </label>
  </div>
</div>

<hr>

<div class="grid-container">
  <div class="__col-menu">
    <label>$
      <p>Transferencia</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Pagamento</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Consultas</p>
    </label>
  </div>
</div>

<hr>

<div class="grid-container">
  <div class="__col-menu">
    <label>$
      <p>Transferencia</p>
    </label>
  </div>

  <div class="__col-menu">
    <label>$
      <p>Pagamento</p>
    </label>
  </div>
</div>

<hr>

<div class="grid-container">
  <div class="__col-menu">
    <label>$
      <p>Transferencia</p>
    </label>
  </div>
</div>

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 .