Prof. Erwin Alexander Uhlmann 1/7/2010. Agora vamos elaborar um menu de navegação em cascata.

Transcrição

1 AULA 4 Menu em cascata Agora vamos elaborar um menu de navegação em cascata Primeiro precisamos elaborar uma lista de possíveis links em html <li><a href="#">link11</a> <li><a href="#">link12</a> <li><a href="#">link21</a> <li><a href="#">link22</a> <li><a href="#">link3</a> <li><a href="#">link31</a> <li><a href="#">link32</a> <li><a href="#">link4</a> <li><a href="#">link41</a> <li><a href="#">link42</a> O resultado deverá ser este: O primeiro passo é eliminar os marcadores de texto Crie um arquivo CSS e escreva: Instituto Siegen Universidade Guarulhos 37

2 ul { Agora vamos fazer com que os subitens(li) da lista (ul) fiquem ocultos Mas se ficarem ocultos, não vai ter graça, eles devem ser acessíveis! Agora ele vai ficar se remoldando o menu em cada vez que eu passar sobre os itens? Você reparou que é o mesmo item já anteriormente criado? A posição dele foi definida como absoluta, ou seja, depende do valor inserido, como não há ainda, ele obedece ao fim do parágrafo escrito, o link pai Adicione então, o comando left: 200px;, pois iremos definir que a largura do menu será de 200 pixels, em ul, com o comando width: 200px; Agora vamos fazer o alinhamento dos subitens (li) dentro das uls Espera! Não entendi! Não era isso que foi criado? A ul li vai comandar a ul pai e suas li Já a li ul vai comandar os subitens, as listas (ul) dentro das lis Tem certeza? Vamos ver position:relative; border:#ccc 1px solid; left: 200px; top: 0; Observe que não foram criados novos seletores, apenas adicionamos propriedades aos já criados, com exceção da ul li Na ul li a posição é relativa ao site e adicionamos uma borda à ele, já na li ul, a posição é absoluta, depois do bloco ul li e um background cinza para ilustrar onde age cada seletor Mas e aquele top: 0;? Alinha o menu ao topo da ul li Instituto Siegen Universidade Guarulhos 38

3 Agora começam alguns elementos de design que ajudarão na identificação Observe os seletores: Ok, este já existia, nem vamos mais mexer nele ul li:hover{ Este é o novo, é o comportamento dentro da ul pai, no seletor li quando passar sobre, pinte de cinza, afinal a ul dentro da li é cinza, (li ul) Adicione o seletor valorado na ul e na ul li ul li a{ display:block Para exibir os links Veja agora o código completo, para os efeitos visuais body{ ul{ margin ; border: #CCC 3px solid; width: 200px; background-color:#fff; position:relative; border:#ccc 1px solid; left: 199px; top: 0; background-color: #CCC; ul li a{ text-decoration:none; border: 1px solid #CCC; border-bottom:0; Instituto Siegen Universidade Guarulhos 39

4 Remova a linha ul li:hover{ Não tem mais função, claro Cara, muito legal!!! Mas e se tiver mais um nível? <li><a href="#">link11</a> <li id="pre"><a href="#">link12</a> <ul id="sub"> <li><a href="#">link121</a> <li><a href="#">link122</a> <li><a href="#">link21</a> <li><a href="#">link22</a> Esta parte foi adicionada Veja que agora a ul tem um id e um li também Então fica fácil! Adicione estas duas linhas, pois elas agem diretamente no item identificado(id) ul#sub{ li#pre:hover ul#sub{ E se for horizontal? Instituto Siegen Universidade Guarulhos 40

5 CSS body{ ul { li{ margin ; border: #69C 3px solid; padding:3px; width: 25%; text-align:center; border-radius: 2em; box-shadow:#000 10px 10px 10px; border: #FFF 1px solid; padding: 2px; background-color #CCC; display:inline; padding: 2px; position:absolute; padding: 3px; links a:hover{ color:#69c; text-decoration:underline; HTML <li class="links"><a href="#">link11</a> <li><a href="#">link12</a> <li><a href="#">link21</a> <li><a href="#">link22</a> Instituto Siegen Universidade Guarulhos 41