Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Tutorial GregoryLaborde Menu CSS e Java

    Enviado por

    labordinhogreg7606
    45 visualizações4 páginas
    neste documento voce vai conseguir de maneira rápida criar um menu drop down !

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    neste documento voce vai conseguir de maneira rápida criar um menu drop down !

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    45 visualizações4 páginas

    Tutorial GregoryLaborde Menu CSS e Java

    Enviado por

    labordinhogreg7606
    neste documento voce vai conseguir de maneira rápida criar um menu drop down !

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 4

    INSTITUDO FEDERAL CAMPUS BELO JARDIM 

    CRIANDO MENU COM CSS E JAVA 

    Trabalho apresentado a disciplina de programação II ao professor Fabio Denilson,
    Aluno: Gregory Augusto de Lima Laborde
    Neste tutorial vamos ver como e simples criar um menu suspenso com Java e CSS. Estão prontos? 
    Vamos lá !

    <html>
    <head>
    <title>
    Tutorial por Gregory
    </title>
     <link rel="STYLESHEET" type="TEXT/CSS" href="arquivo.css" >
    <!­­Chama o código java script, para o efeito do menu­­>
    <script type="text/javascript" src="codigo.js">
    </script>  
    </head>   
    <!­­ O menu é criado com base em listas não ordenadas, sem marcação­­> 
    <ul> 
        <li><a href="#">Home</a></li> 

        <li><a href="#">Sobre</a> 
    <!­­Uma lista dentro de uma lista(submenus de sobre)­­>      
          <ul> 
            <li><a href="#">Hist&oacute;ria</a></li> 
            <li><a href="#">Tema</a></li> 
            <li><a href="#">Trabalhos</a></li> 
          </ul> 
        </li> 
        <li><a href="#">Servi&ccedil;os</a> 
    <!­­Uma lista dentro de uma lista(submenus de serviços)­­>
          <ul> 
            <li><a href="#">Web Design</a></li> 
            <li><a href="#">Internet Marketing</a></li> 
            <li><a href="#">Hospedagem</a></li> 
            <li><a href="#">Domain Names</a></li> 
            <li><a href="#">Broadband</a></li> 
          </ul> 
        </li>
    Aqui está a demosntração do meunu suspenso 

    código CSS 

    ul {
    margin: 0;
    padding: 0;
    list­style: none;
    width: 150px;
    }

    ul li {
    position: relative;
    }

    li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    }

    ul li a {
    display: block;
    text­decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border­bottom: 0;
    }

    ul {
    margin: 0;
    padding: 0;
    list­style: none;
    width: 150px;
    border­bottom: 1px solid #ccc;
    }

    li:hover ul { display: block; }

    Código Java

    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace
    (" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;

    Você também pode gostar