-2

Estou tentando fazer quase igual ao que foi descrito nesta outra pergunta: Setinha em menu com apenas CSS.

Mas com uma pequena diferença: quando clicar no botão que fique marcado como selecionado. Que mostre que ela está naquela tal pagina, mas junto com a seta em destaque.


E como ta agora, e eu quero que fique nessa outra imagem, que a seta fica no meio, e eu não como fazer isso.

Código

nav a{ 
    text-decoration: none; 
    padding: 8px 8px 8px 8px; 
    color: #ffffff; 
    position: relative;
} 

nav a:hover:before{ 
    width: 0; 
    height: 0; 
    border: 10px solid transparent; 
    border-top-color: #888888; 
    content: ""; 
    bottom: -20px; 
    position: absolute; 
}
4
  • Você fez o MENU, agora só falta mostrar a seta quando estiver na página daquele Link no MENU ? Commented 26/01/2016 às 19:26
  • isso, mas não consigo
    – Thayna
    Commented 26/01/2016 às 19:28
  • queria fazer com que a seta ficasse em destaque quando estivesse em uma pagina
    – Thayna
    Commented 26/01/2016 às 19:30
  • Qual é o código da setinha ? Coloca ele aí. Commented 27/01/2016 às 12:20

1 Resposta 1

1

Primeiro, você tem que ter um CSS desse:

.dropdown.current {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid red;
    bottom: -10px;
    left: 20%;
}

Depois em cada linha do LINK você coloca na tag do class="dropdown" um if para verificar se está nessa página, se sim você aplica a class='current'.

Está usando alguma linguagem server-side, tipo PHP, ou só HTML, CSS e JS ?

O if pode ser feito em um código JS ou PHP.


Nesse seu CSS abaixo coloque as propriedades:

left: 0; 
right: 0;
margin: auto;

Assim:

nav a:hover:before{ 
    width: 0; 
    height: 0; 
    border: 10px solid transparent; 
    border-top-color: #888888; 
    content: ""; 
    bottom: -20px; 
    position: absolute; 
    left: 0; 
    right: 0;
    margin: auto;
}
13
  • 1
    obrigada pela ajuda
    – Thayna
    Commented 26/01/2016 às 19:41
  • 1
    vc tem um que seja do jeito que eu quero?
    – Thayna
    Commented 26/01/2016 às 20:53
  • 1
    Já consegui arrumar, obrigada pela ajuda.
    – Thayna
    Commented 27/01/2016 às 0:38
  • 1
    Só mais uma pergunta como faço pra centralizar essa SETA em um retângulo ou quadrado?
    – Thayna
    Commented 27/01/2016 às 0:39
  • 2
    Agora foi, muito obrigado
    – Thayna
    Commented 27/01/2016 às 12:30

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 .