Separadores para navegação

107

Preciso adicionar separadores entre os elementos de navegação. Os separadores são imagens.

Separadores entre elementos.

Minha estrutura HTML é como: ol > li > a > img.

Aqui chego a duas soluções possíveis:

  1. Para adicionar mais litags para separação (boo!),
  2. Incluir separador na imagem de cada elemento (é melhor, mas possibilita que o usuário clique em, por exemplo, "Home", mas vá para "Serviços", pois estão um atrás do outro e o usuário pode clicar acidentalmente no separador que pertence a "Serviços");

O que fazer?

daGrevis
fonte
96
1 para representação artística.
James P.

Respostas:

64

Basta usar a imagem separadora como imagem de fundo no li.

Para que apareça apenas entre os itens da lista, posicione a imagem à esquerda do li, mas não no primeiro.

Por exemplo:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Este CSS adiciona a imagem a cada item da lista que segue outro item da lista - em outras palavras, todos eles, exceto o primeiro.

NB. Esteja ciente de que o seletor adjacente (li + li) não funciona no IE6, então você terá que apenas adicionar a imagem de fundo ao li convencional (com uma folha de estilo condicional) e talvez aplicar uma margem negativa a uma das bordas.

ajcw
fonte
2
O uso do :beforepseudo seletor evita que ele apareça após o último elemento.
jrue
3
Boa solução -funciona como um encanto -E6 suporte? Quem se importa! :) Se todos nós pararmos de oferecer suporte a navegadores legados, talvez forçemos as pessoas a parar de usá-los.
Jordan
Funciona como um chram com um border-leftpara desenhar uma linha vertical entre os itens.
Richard-Degenne
132

Se não houver uma necessidade urgente de usar imagens para os separadores, você pode fazer isso com CSS puro.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Isso coloca uma barra entre cada item da lista, assim como a imagem na pergunta original descrita. Mas como estamos usando os seletores adjacentes , ele não coloca a barra antes do primeiro elemento. E como estamos usando o :beforepseudo seletor, ele não coloca um no final.

Jrue
fonte
Uau! Isso é exatamente o que eu precisava para o meu menu de rodapé. Claro, com algum CSS adicional.
Vladimir
Tecnicamente, você ainda pode usar uma imagem, mas codificar em base64 e armazenar a imagem embutida. css-tricks.com/data-uris
commadelimited
@jrue het também é possível mudar verticalmente o posicionamento dos separadores? Não está respondendo a um preenchimento / margem superior.
Floris
3

Você pode adicionar um lielemento onde deseja adicionar divisor

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

Em CSS, você pode adicionar o seguinte código.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Isso aumentará sua velocidade de execução, pois não carregará nenhuma imagem. apenas teste .. :)

Rajiv Pingale
fonte
você pode explicar como? Mas sempre há outra maneira ... CSS3: Podemos adicionar get Nth Element e adicionar Divider a ele.
Rajiv Pingale
1
Droga, alguma confusão em que me meti. Passei 30 minutos vasculhando documentos padrões, panfletos RWD e até mesmo experimentei leitores de tela diferentes para provar meu ponto. No entanto, pelo menos os leitores de tela são inteligentes o suficiente para NÃO LER EM ALTO marcadores vazios (nem enumerar opções ausentes ao usar @ ol @ em vez de @ ul @). Portanto, posso apenas apontar que o uso de @ li @ aqui está na mesma categoria que usar uma tabela para obter o layout de coluna.
Volker Stolz
3

A outra solução está OK, mas não há necessidade de adicionar o separador no último se usar : depois ou no início se estiver usando : antes .

TÃO:

caso: depois

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

case: antes

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}
T04435
fonte
3

Para obter o separador centralizado verticalmente em relação ao texto do menu,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }
user7149870
fonte
2

Adicione o separador ao lifundo e certifique-se de que o link não expanda para cobrir o separador, o que significa que o separador não será clicável.

Soufiane Hassou
fonte
2

Para aqueles que usam Sass , escrevi um mixin para este propósito:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Exemplo:

@include addSeparator('li', '|', 1em);

O que lhe dará isso:

li+li:before {
  content: "|";
  padding: 0 1em;
}
d4nyll
fonte
Isso não está mostrando o '|' por algum motivo? Alguma razão para não?
James111
Não se preocupe, descobri como fazer isso. Eu também tive que adicionar um: after ao último filho para fazer o conteúdo da criança que não precisa de um separador = content: ""
James111
2

Eu acredito que a melhor solução para isso, é o que eu uso, e essa é uma borda css natural:

border-right:1px solid;

Pode ser necessário cuidar do preenchimento como:

padding-left: 5px;
padding-right: 5px;

Finalmente, se você não quiser que o último li tenha essa borda separada, dê a seu último filho "nenhum" em "borda direita" assim:

li:last-child{
  border-right:none;
}

Boa sorte :)

Avi
fonte
1

Coloque-o como plano de fundo no elemento da lista:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

A seguir, recomendo uma marcação diferente para acessibilidade:
vez de incorporar as imagens embutidas, coloque o texto como texto, coloque uma extensão em cada uma, aplique a imagem como plano de fundo no e, em seguida, oculte o texto com display: none - this oferece muito mais flexibilidade de estilo e permite que você use tiling com uma imagem bg de 1px de largura, economiza largura de banda e você pode incorporá-lo em um sprite CSS, o que economiza chamadas HTTP:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

ATUALIZAÇÃO OK, vejo que outros obtiveram respostas semelhantes antes de mim - e observo que John também inclui um meio para evitar que o separador apareça antes do primeiro elemento, usando o seletor li + li - o que significa qualquer li vindo após o outro li.

Fausto
fonte
Sim - acabei de pesquisar e você está certo. Minha resposta foi editada e estou dando +1 à sua desde que você liderou.
Faust,
Obrigado. 1 para o preenchimento que esqueci de adicionar.
ajcw de