2419
Grupo técnico sobre CSS. ⚠️ ATENÇÃO: - Para evitar advertências não esqueça de ler as regras com o comando /rules. - Para reportar alguma mensagem utilize o comando /report.
https://desenvolvimentoparaweb.com/css/tier-list-css-novas-features-css-2024/
Читать полностью…
Se o retorno desses dados estiver minimante decente, vai vir um array (sections) de arrays (itens).
Dá para fazer muita coisa com isso. Muita coisa. Organizar/manipular do jeito que você quiser, seja para usar 1 coluna, 2, Flexbox, columns etc.
Pois é, deve dar sim, manipulando strings etc.
Mas, mesmo que não dê, foi só um exemplo de que é possível sem grid. Tem outras maneiras de se chegar ao mesmo resultado.
agora que vi que voce dividiu em duas colunas, mas do backend não da pra manipular, vai vir assim:
Читать полностью…
isso aqui? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid
Читать полностью…
Mas é requisito que seja feito com Grid, mesmo?
Se fizer com Flexbox (ou mesmo columns) talvez chegue nesse mesmo resultado que você tá querendo de maneira mais simples.
acho que não vai dar pra separar porque o conteudo vem dinamico do cms
Читать полностью…
mas a dúvida é exatamente essa, da pra fazer só com css?
Читать полностью…
<div class="mega-menu show" id="products-menu">
<div class="sub-categoria-menu">
<h4>Nobreaks</h4>
<a href="#">Linha Double Way</a>
<a href="#">Linha Compacta</a>
<a href="#">Nobreaks com Grau de Proteção Especial</a>
<a href="#">Safeserver Power (SPW)</a>
<a href="#">Volt</a>
</div>
<div class="sub-categoria-menu">
<h4>Baterias</h4>
<a href="#">Baterias de Lítio</a>
<a href="#">Baterias VRLA - AGM</a>
<a href="#">Baterias Alcalinas</a>
</div>
<div class="sub-categoria-menu">
<h4>Soluções</h4>
<a href="#">Rack DWTT-A5 Modular Plugin</a>
<a href="#">Rack TI & Energia</a>
<a href="#">Grau de Proteção Especial</a>
</div>
<div class="sub-categoria-menu">
<h4>Acessórios</h4>
<a href="#">MSB Slim IoT</a>
<a href="#">Gestão de Baterias Engetron Para Nobreaks/Ups</a>
<a href="#">WBRC IoT Engetron</a>
</div>
<div class="area-botoes menu-buttons">
<a href="#" class="button">Catálogo de produtos</a>
<a href="#" class="button">Licitações</a>
</div>
</div>
<!doctype html>Читать полностью…
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mega Menu</title>
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
body {
align-items: center;
display: flex;
justify-content: center;
min-height: 100vh;
}
.mega-menu {
background-color: white;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 800px;
}
.menu-container {
display: flex;
justify-content: space-between;
}
.menu-section {
flex: 1;
padding: 0 16px;
}
.menu-header {
color: #222;
font-size: 16px;
font-weight: bold;
margin-bottom: 16px;
}
.menu-list {
list-style-type: none;
margin-bottom: 16px;
}
.menu-item {
padding: 8px 0;
}
.menu-link {
color: #555;
font-size: 16px;
text-decoration: none;
}
.menu-link:hover {
color: #000;
}
</style>
</head>
<body>
<div class="mega-menu">
<div class="menu-container">
<div class="menu-section">
<p class="menu-header">Nobreaks</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Linha Double Way</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Linha Compacta</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link"
>Nobreaks com Grau de Proteção Especial</a
>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Safeserver Power (SPW)</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Volt</a>
</li>
</ul>
<p class="menu-header">Soluções</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Rack DWTT-A5 Modular Plugin</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Rack TI & Energia</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Grau de Proteção Especial</a>
</li>
</ul>
</div>
<div class="menu-section">
<p class="menu-header">Baterias</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">Baterias de Lítio</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Baterias VRLA - AGM</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Baterias Alcalinas</a>
</li>
</ul>
<p class="menu-header">Acessórios</p>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">MSB Slim IoT</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">WBRC IoT Engetron</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
se vc reparar o grid deixa tudo com mesma altura, aí nao sei se existe alguma propriedade pra lidar com esse caso especifico
Читать полностью…
mas usei um margin top negativo no container dos acessorios
Читать полностью…
Acho que entendi. Talvez dê usando grid-auto-flow com algum valor dense.
Mas acho que grid não vai resolver teu caso, talvez usando alguma mágica
Читать полностью…