Como fazer um menu suspenso?

Muitos selecionam em menus drop-down de sites diferentes. Este menu torna seu site mais funcional e mais intuitivo para o usuário da rede que o visitou. Sobre como criar um menu suspenso, nosso artigo informará.

Joomla

• Você precisa ir ao site do Painel de controle, depois no "Menu", depois nas "Extensões", depois nos "Módulos de Gerenciador";
• Agora você precisa encontrar o módulo responsável pelo Menu do Site. Também pode ser no "Gerenciador de Módulos" (um plugin que é responsável por exibir o menu neste site);
• Em seguida, você precisa clicar no módulo e executar essas configurações:
  • "Ativado" - "Sim";
  • "Mostre sempre sub-itens incorporados" - "Sim";
  • "Ativar pai" - "Sim";
  • "Abrir o menu" - "Sim";
• Salve a configuração;
• Então, você precisa ir para "Todos os menus", depois "Menu" e selecionar o menu na lista em que o item com sub-itens suspensos será criado;
• Clique no botão "Criar";
• Agora você precisa fazer itens de menu e, em seguida, sub-itens, para os quais você precisa selecionar materiais, ou seja, um modelo de categoria (por exemplo, um link externo);
• Em seguida, você precisa inserir o nome deste menu edefina as configurações, a principal delas é "Elemento principal" - um item de menu, do qual diferentes itens secundários serão excluídos, é por isso que você precisa selecionar o item do menu principal como elemento pai.
• Então você precisa especificar a categoria a que o link do seu sub-item será e salvar a configuração

Veja como fazer um menu suspenso para o Joomla. Se você quer fazer vários desses itens, então você precisa fazer as etapas acima várias vezes.

HTML e CSS

• Primeiro você precisa criar um menu e definirsua estrutura. Então você precisa organizar os elementos de forma amigável e pensar sobre os nomes corretos e compreensíveis das seções futuras. Agora continua a ser determinar os itens que serão drop-down, e os sub-pontos necessários que serão nesses pontos;
• Em seguida, você precisa desenhar a estrutura selecionada usando html-tags. Parece algo assim:
  • <ul>
    <li> <a href="#"> Sua referência # 1 </a> </ li>
  • <li> <a href="#"> Seu link # 2 </a>
    • <ul>
      <li> <a href="#"> Seu número de item 2-1 </a> </ li>
    • <li> <a href="#"> Seu número de item 2-2 </a> </ li>
    • <li> <a href="#"> Seu número de item 2-3 </a> </ li>
      </ ul> </ li>
  • <li> <a href="#"> Sua referência # 3 </a>
    • <ul>
      <li> <a href="#"> Seu Item # 3-1 </a> </ li>
    • <li> <a href="#"> Seu número de item 3-2 </a> </ li>
    • <li> <a href="#"> Seu Item # 3-3 </a> </ li>
    • <li> <a href="#"> Seu número de item 3-4 </a> </ li>
      </ ul> </ li>
  • </ ul>
• Então você precisa colocar todos os seus menus no bloco,designou e defina o identificador (). Isso permitirá que você atribua seus recursos exclusivamente a este bloco, sem tocar em outros blocos. No identificador, você deve especificar um nome cujas propriedades você descreva nos próximos passos;
• Agora você precisa criar listas, em que é a lista em si, • é cada uma sua linha, e adicione para links futuros o que será criado pelo menu suspenso, uma lista com os sub-itens apropriados;
• Em seguida, você precisa transformar os nomes desses itens em links, anexando-os e atribuindo-o ao parâmetro "href-address" da página desejada especificada pelo link. Veja como html fazer um menu suspenso;
• Agora você precisa definir as propriedades da lista desejada usando css. Para fazer isso, você precisa adicioná-los ao arquivo css da seguinte maneira:
  • #vmenu ul {padding: 0px; margem: 0px; largura: 250px; estilo de lista: nenhum;},
• onde "preenchimento" é uma indentação dentro (deve ser"0"), "margem" é um recuo de fora (deve ser "0"), "estilo de lista" é um estilo de lista (você pode definir o valor como "nenhum" para remover pontos), a largura é a largura da lista;
• Então você precisa adicionar as propriedades do elemento: #vmenu ul li {position: relative;} é o parâmetro do posicionamento necessário (a posição dos elementos é "posição"), "relativo" é o valor necessário para determinar a localização do menu suspenso em relação ao menu inicial. Este menu será vertical;
• Em seguida, você precisa especificar as propriedades da lista que está localizada no item de outra lista:
  • #vmenu li ul {posição: absoluta; exibir: nenhum; topo: 0; esquerda: 250px; },
• onde "posição: absoluto "é a colocação absoluta do submenu em relação ao menu," esquerda "e" superior "é a localização por indentação da esquerda e da parte superior," exibição: nenhum é o parâmetro de exibição (inicialmente a lista não será visível);
• Agora você precisa inserir os parâmetros para seus links:
  • #vmenu ul li a {padding: 5px; exibição: bloco; cor: # 606060; text-decoration: none; background: # d8d8d8;},
• onde "exibir:bloco »- esta é uma opção de exibição que faz um bloco,«preenchimento»elemento - presente travessão,«cor»- é a cor dos links (texto),«fundo»- a cor dos links (fundo),«text-decoration»- este pentear o seu link (neste caso sublinhado removido);
• Então você precisa definir a ação em caso de pairar o cursor:
  • #vmenu li: hover ul {display: block;},
• onde - "li" é a linha da lista, "ul" é a lista que será visível. Veja como fazer o menu suspenso css;
• Você também pode adicionar parâmetros como um parâmetro de imagem ou cores para o fundo, a fonte dos próprios links, recursos horizontais e muitas outras propriedades para a visualização do menu.

Agora você sabe como fazer um menu suspenso de várias maneiras e você pode escolher o mais adequado!