2

Tenho uma listagem de menu e gostaria de saber a forma mais correta de declarar no HTML+CSS.

O HTML está assim:

<ul class="menu">
    <li>Home</li>
    <li>Empresa</li>
    <li>Produtos</li>
    <li>Blog</li>
    <li class="logo"></li>
    <li>Onde Comprar</li>
    <li>Assistência</li>
    <li>Contato</li>
</ul>

Quanto ao CSS, eu gostaria de alguma dica. Claro, eu poderia colocar uma classe em cada li e deixar do jeito que eu quiser, mas não sei se seria o ideal, gostaria de economizar código.

O CSS está assim:

ul.menu li{
    font-family: "nexa_boldregular";
    font-size: 12pt;
    text-transform: uppercase;
    color: #1d1d1b;
    display: inline;
    margin-right: 35px;
}

Por exemplo, se eu quiser estilizar alguma li em especifico, teria que atribuir uma classe à ela, certo? Como fiz na logo. O ideal no CSS, seria como?

.logo, li.logo, ul.menu>li.logo?

5
  • Não existe certo ou errado, vai depender do seu estilo de trabalhar ou se vai ter mais algum elemento com a classe .logo tem especificar que se refere ao elemento dentro do .menu e usar algo como: .menu .logo Commented 25/08/2014 às 12:01
  • Mas, existe uma forma mais estruturada. Para economizar trabalho. Commented 25/08/2014 às 12:06
  • Neste caso eu sugiro retirar as tags html do seletor, use só quando necessário... veja esse jsfiddle Commented 25/08/2014 às 12:09
  • 1
    Editei o jsfiddle e agora mostra como selecionar apenas o elemento desejado, em situações que usa as mesmas classes, veja... Commented 25/08/2014 às 12:21
  • 1
    Valeu @Jader, ajudou muito! Commented 25/08/2014 às 14:37

1 Resposta 1

3

Felipe,

Toda a vez que você trata apenas um elemento, você pode utilizar o ID. Sendo um grupo ao qual será atribuido um elemento em comum, ai você usa Classe

Existe a TAG nav a qual utilizo para geralmente estruturar da seguinte forma:

<nav>
  <ul
    <li></li>
  </ul>
</nav>

Consecutivamente no CSS, me refiro assim:

nav ul {
}

nav ul li{
}

Ou seja, se você não possuí uma classe, você vai destrinchando os elementos e desenvolvendo a arvore. Se você declarar um estilo para para nav ul, ele vai procurar uma TAG ul dentro do nav, idem ao nav ul li que poderia ser declarado como nav li por exemplo.

Sobre o .logo, você pode declarar a mesma singularmente porém em linhas sequencias do seu código, para organização, deixar o conteúdo relativo ao menu, totalmente agrupado. Ou seja, criar "setorizações".

2
  • Obrigado. Só uma dúvida, supondo que eu tenha mais de uma listagem de menus no site. Eu teria que criar uma classe nove para diferenciá-las, o ideal seria eu criar, assim por exemplo: nav ul.menu1 e nav ul.menu2, correto? Commented 25/08/2014 às 12:04
  • Seguindo a sua estrutura, o correto seria você identificar a área a qual seu menu pertence. Por exemplo, um deles poderia ser menuLateral enquanto outro seria menuSuperior. Ou por exemplo, se caso um menu é principal e relativo a navegação, você poderia ter uma declaração nav ul e nav li, enquanto outro, menuSecundario ul e menuSecundario li Commented 25/08/2014 às 12:07

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 .