Jquery Dropdown - Trigger from Image

tugatech.com.pt - by DJPRMF

by bizamajig

HTML

<!--Isto deve ser colocado na head, alterando os links para os do seu site-->
<!--Deve incluir o Jquery antes de tudo. Neste caso utilizei a opção "extensions" do jsfiddle para o incluir-->
<link type="text/css" rel="stylesheet" href="http://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.css">
<script type="text/javascript" src="http://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.js"></script>
<!--Isto deve ser colocado na head, alterando os links para os do seu site-->
 
<!--Aqui fica todo o conteudo que irá aparecer na dropdown-->
<div id="dropdown-1" class="dropdown dropdown-tip">
    <div class="dropdown-panel">
<!--Coloquei como exemplo um pequeno formulário-->
<form>
Utilizador: <input type="text" name="firstname">
<br>
Password: <input type="text" name="lastname">
</form>
</div>
</div>

<!--Agora vamos iniciar o dropdown. Utilizei o exemplo de uma imagem, mas pode alterar para qualquer outro item-->
    
  <a href="#" data-dropdown="#dropdown-1">
      <img src="http://icons.iconarchive.com/icons/raindropmemory/laboratory/128/Computer-icon.png" />
        </a>

    <!--COMPLETE - SYSTEM OUT :) -->