Exercício 2 de CSS - Menu

 

  1. Construir apenas a barra azulada.

 

<style type="text/css">

 

      #barraDeMenus {

            position:absolute;

            top:0 px;

            left:0 px;

            width:100%;

            height:22 px;

            background:aqua;

      }

</style>

 

<body>

<div id="barraDeMenus"></div>

</body>

 

  1. Criar os menus ADES, BDD1, e ESOF com hyperlinks.

 

.menu {

      position:absolute;

      top:0 px;

}

 

<div id="menu1" class="menu" style="left:0 px;">

      <a href="#">ADES</a>

</div>

 

<div id="menu2" class="menu" style="left:100 px;">

      <a href="#">BDD1</a>

</div>

 

<div id="menu3" class="menu" style="left:200 px;">

      <a href="#">ESOF</a>

</div>

 

 

  1. Alterar a cor de fundo dos hyperlinks para amarelo quando o cursor se encontra por cima.

 

.menu a:hover {

      width:100 px;

      background-color:yellow;

}

 

  1. Criar os itens de menu 5 px à direita de cada menu, 22 px abaixo do topo, e com a largura de 95 px.

 

.itensDeMenu {

      position:absolute;

      top:22 px;

      width:95 px;

      background:lightgrey;

}

 

<div id="itensDeMenu1" class="itensDeMenu" style="left:5 px;">

      HTML<br>

      DHTML<br>

      CGI<br>

      XML<br>

      ASP<br>

</div>

 

<div id="itensDeMenu2" class="itensDeMenu" style="left:105 px;">

      SQL<br>

      MS Access<br>

      SQL Server<br>

      Oracle<br>

</div>

 

<div id="itensDeMenu3" class="itensDeMenu" style="left:205 px;">

      UML<br>

      Analise<br>

</div>

 

  1. Mostrar apenas os itens de menu do menu que tem o cursor em cima.

 

<script language="javascript">

      var subMenus = new Array("itensDeMenu1",

"itensDeMenu2",  "itensDeMenu3");

function mostra(i) {

  document.getElementById(subMenus[i]).style.display="block";

for (j=0; j<subMenus.length; j++)

  if (j!=i)

     document.getElementById(subMenus[j]).style.display="none";

}

</script>

 

<a href="#" onMouseOver="mostra(0)">ADES</a>

<a href="#" onMouseOver="mostra(1)">BDD1</a>

<a href="#" onMouseOver="mostra(2)">ESOF</a>

 

 

  1. Esconder os itens de menu quando o cursor não se encontra por cima de nenhum menu (hyperlink)

 

function esconde() {

  for (j=0; j<subMenus.length; j++)

    document.getElementById(subMenus[j]).style.display="none";

}

 

  <a href="#" onMouseOver="mostra(0)" onMouseOut="esconde()">ADES</a>

  <a href="#" onMouseOver="mostra(1)" onMouseOut="esconde()">BDD1</a>

  <a href="#" onMouseOver="mostra(2)" onMouseOut="esconde()">ESOF</a>

 

Problema: Não permite aceder aos Itens de Menu, pois quando o cursor sai fora do menu, os itens de menu desaparecem.

 

  1. Esconder os itens de menu quando a página carrega.

     

<script language="javascript">

      esconde()

</script>

</body>

 

Ou:

 

<body onLoad="esconde()">

 

 

  1. Em alternativa o menu poderia ser construído com uma tabela com 2 linhas, uma para os Menus e outra para os Itens de Menu.

 

      th, td {

            width:100 px;

      }

 

 

<body onLoad="esconde()">

<table>

      <tr id="barraDeMenus">

            <th id="menu1" class="menu">

            <a href="#" onMouseOver="mostra(0)">ADES</a>

            </th>

            <th id="menu2" class="menu">

            <a href="#" onMouseOver="mostra(1)">BDD1</a>

            </th>

            <th id="menu3" class="menu">

            <a href="#" onMouseOver="mostra(2)">ESOF</a>

            </th>

      </tr>

      <tr>

            <td> <div id="itensDeMenu1" class="itensDeMenu">

                  HTML<br>

                  DHTML<br>

                  CGI<br>

                  XML<br>

                  ASP<br>

            </div> </td>

            <td> <div id="itensDeMenu2" class="itensDeMenu">

                  SQL<br>

                  MS Access<br>

                  SQL Server<br>

                  Oracle<br>

            </div> </td>

            <td> <div id="itensDeMenu3" class="itensDeMenu">

                  UML<br>

                  Analise<br>

            </div> </td>

 

      </tr>

</table>

</body

 

 

Os submenus têm que pertencer a um div.

Se pertencessem directamente ao td, ao fazer  style.display =“none” de 2 elementos td, estes elementos não eram mostrados, ficando apenas um elemento td na 2.ª linha, o qual era sempre mostrado na 1.ª célula (a da esquerda).

Pertencendo a um div dentro de um td, quando se faz style.display=none” do elememto div, ficamos com um td vazio, mas que ocupa o espaço de uma célula.

 

 

 

Notas:

Pseudo classes âncora

 

Um link pode ser mostrado de modos diferentes quando está (as cores indicadas servem apenas para exemplo):

 

Não visitado:                           a:link { color: #FF0000 }

Visitado:                                  a:visited { color: #00FF00 }

Cursor sobre o link:                 a:hover { color: #FF00FF }

Activo:                                    a:active { color: #0000FF }

 

 

Atributo onMouseOver

Atributo onMouseOut

 

document.getElementById(  “).style.display = “block” | “none”.