Como criar menus CSS suspensos?
CSS (Cascading Style Sheets) é um nome usado para descrever a formatação de um documento HTML (Hyper Text Markup Language) ou XML (Extensible Markup Language). Pode ser usado para qualquer tipo de documento XML, mas geralmente é usado com páginas da Web escritas em HTML. CSS pode ser usado para criar menus suspensos em páginas da web. Os menus suspensos CSS têm um único item de texto exibido até que o visitante use o mouse para passar o mouse sobre o menu, momento em que a lista inteira de itens é exibida. O menu é criado usando a identificação CSS e as tags de classe.
Os menus suspensos CSS começam com o seletor de ID. Esse seletor se parece com #. É seguido pelo nome do ID. Você pode nomear o ID como qualquer coisa, mas deve ser descritivo para que outras pessoas possam ler seu código. Por exemplo, um menu suspenso pode usar o código # drop1.
Crie a classe para o primeiro item no menu CSS suspenso usando o seletor de classe, que se parece com um ponto. A classe fará parte do elemento da lista HTML. O elemento da lista é designado pelos caracteres "li". Crie a classe de nível superior digitando "li.top". A descrição da classe está contida entre duas chaves.
O exemplo a seguir mostra o código CSS inteiro para o primeiro item da lista:
# drop1 li.top {família de fontes: Verdana, Genebra, san-serif;
tamanho da fonte: 100%;
cor: # FF00FF;}
Em seguida, crie uma classe para os itens que serão ocultados abaixo do primeiro item no menu CSS. A classe descreverá a lista não ordenada HTML, que é designada com os caracteres "ul". A descrição terá a mesma aparência do item de menu de nível superior, com a adição das palavras "display: none # 59" no início da descrição. Isso indica que os itens da lista não ordenada ficarão ocultos até o ponteiro do mouse passar sobre o menu CSS suspenso.
A seguir, é apresentado um exemplo desta parte do código CSS:
# drop1 ul.link {
display: nenhum # 59
família de fontes: Verdana, Genebra, san-serif;
tamanho da fonte: 100%;
cor: # FF00FF;}
Você deseja que o menu CSS suspenso apareça no restante do documento HMTL. Caso contrário, quando o visitante passar o mouse sobre o menu, ele empurrará o restante do documento para baixo na página para liberar espaço para a lista. Definir o elemento de posição como absoluto fará isso.
O código para definir a posição é:
# drop1 {position: absolute;}
Isso é tudo o que é necessário para a parte CSS do menu suspenso. O restante do menu CSS suspenso é criado no documento HTML usando os elementos "div", "id", "class", "li" e "ul". A tag "div" separa a parte do menu do documento. Digite <div id = "drop1"> para criar a parte do menu suspenso. Em seguida, inicie a lista não ordenada usando o elemento "ul" em HTML.
Adicione a classe superior ao primeiro item da lista e a classe de link para o restante dos itens. O código HTML deve ser semelhante a:
<div id = "drop1">
<li class = "top"> Item principal </li>
<li class = "link"> <a href="#"> Item </a> </li>
<li class = "link"> <a href="#"> Item </a> </li>
<li class = "link"> <a href="#"> Item </a> </li>
</ul> </div>
Quando você abre o documento em um navegador da Web, o menu CSS suspenso aparece como um único item na página. Quando você move o mouse sobre o item superior, o restante do menu é exibido. O restante do texto da página não será movido, mas uma parte será ocultada pelo menu.