3
Motivos de não estar funcionando:
seu input tem o ID "bt_menu" mas no CSS está "bt-menu";
para usar o sibling combinator ("~"), o input deve estar num nível que tenha acesso aos elementos que você queira controlar. E, no caso, ele está travado dentro da div "menuu", então o selector não funciona para nada fora dela;
...
2
Basicamente faltou esse código no seu CSS
@media screen and (max-width: 768px) {
.nav-links.nav-active li {
opacity: 1;
}
}
Repare que nele quando a .nav-links está com a classe active eu mudo a opacity para 1 e o link passa a aparecer
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
&...
respondida 29/04/20 às 19:48
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
2
Pode implementar as transições no elemento usando :active para detectar o click.
Segue um norte.
#menu:active {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay
/* ou pode por tudo em uma linha */
transition: property duration timing-function delay;
}
2
Exite uma forma, mas não é indicado pq não é semântico para se fazer um menu... mas vc pode usar a tag <details>
Lei mais aqui: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Veja o exemplo
a {display:block}
<details>
<summary>MENU</summary>
<a href="https://google.com">Google</a>
&...
respondida 6/06/20 às 15:18
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Convenci o cliente a trocar o dropdown!
1
Nesse caso não precisa. A tag de listas já tem o display: block; por padrão salvo me engano. No caso do block não é obrigatório a não ser que você queira de alguma forma um menu na vertical acho eu.
A diferença seria por li{ display: inline;}, pois você vai mudar a disposição dos itens da lista para que fique um ao lado do outro(horizontal).
Acho que é isso. ...
1
No final, consegui resolver meu problema. Vou deixar as funções que usei aqui, pro caso de algum dia ajudar alguém.
Adicionei, ao checkbox, um v-on:click que ativa uma função para verificar se checked é true:
<input type="checkbox" id="check" @click="isChecked()" />
Depois, bastou adicionar aos methods:
methods: {
...
1
Normalmente para situações assim, utilizamos de um loop, enquanto a opção for inválida o menu é exibido novamente.
Podemos optar por fazer isso com o do/while, que exibirá uma vez o menu e caso a opção seja inválida, será exibido novamente:
#include <iostream>
int main() {
int escolha;
int invalido;
do {
printf("Opções 1, 2 ou 3:\n");
...
respondida 5/06/20 às 2:26
Daniel Mendes
6.15622 medalhas de ouro88 medalhas de prata2121 medalhas de bronze
1
Cara vc está usando min-width então é dentro desse @media que vc tem que mudar a classe de display:block para display:inline-block, ai ele vai ficar em linha.
Ali vc tb tem que ajustar o top, não deve ser -30px, tem que ser 30px, para afastar 30px do top e não para ficar 30px acima do topo
Segue código da imagem acima
html{
background-color: #...
respondida 26/03/20 às 18:32
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
Para alinhamento central normalmente uso o text-align:
text-align:center;
Para mais informações de text-align:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-align
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
menu × 259css × 105
html × 84
javascript × 41
dropdown × 30
jquery × 28
android × 27
twitter-bootstrap × 17
submenu × 17
php × 16
html5 × 14
wordpress × 13
css3 × 12
nav-bar × 10
bootstrap × 9
java × 8
mobile × 8
bootstrap-3 × 8
angularjs × 7
responsivo × 6
navigation-drawer × 6
c# × 5
layout-responsivo × 5
rolamento × 5
link × 5