Voltar para o site

Construa um menu CSS com ToolTip

Publicado em: 17/01/2006

Passe o mouse sobre o menu

Abaixo o código da folha de estilo do menu com ToolTip

ul#menutt {
    width: 160px; 
    list-style:none;
    font: bold 16px Arial, Verdana, Serif;
}
ul#menutt li{
    position:relative;
}
ul#menutt a {
    width: 160px;
    display: block;
    text-align:left;
    padding: 5px 10px;
    margin-bottom:1px;
    text-decoration: none;
    color: #000;
    background: #1cd117;
    border-left: 12px solid #05a22e;
    border-right: 3px solid #05a22e;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:125px;
}
>#pagebody>ul#menutt a {
    width:125px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menutt li { float: left; height: 1%; }
* html ul#menutt li a { height: 1%; }
/* End */
ul#menutt a:hover {
    color: #fff;
    background: #2aec09;
    border-right: 3px solid #17c71c;
    border-left: 12px solid #17c71c;
}
ul#menutt a span {
    display: none;
}
ul#menutt a:hover span {
    display: block;
    position: absolute;
    top:0;
    left: 160px;
    width: 130px;
    padding: 5px;
    margin-left:2px;
    color: #fff;
    background:#060;
    font-size: 10px;
    text-align:left;
    border:1px solid #000;
}

Abaixo o código HTML do menu com ToolTip

<ul id="menutt">
    <li>
    <a href="#">Home
    <span>
    Página de entrada no site CSS para Web Design
    um site projetado com folhas de estilo em cascata.
    </span> 
    </a>
    </li> 

    <li><a href="#">Tutorial CSS
    <span>
    Nesta seção do site você encontrará  
    uma série de tutoriais sobre as mais variadas 
    técnicas de CSS para construção de 
    páginas web.
    </span> 
    </a>
    </li>
    
    <li>
    <a href="#">PDA 320x240
    <span>
    Neste link você verá como CSS pode 
    ser utilizada para possibilitar exibir sua página 
    web de maneira legível em um dispositivo PDA.
    </span> 
    </a> 
    </li>
    
    <li>
    <a href="#">Links
    <span>
    Uma coletânea de links para sites sobre CSS.
    </span> 
    </a>
    </li> 
    
    <li>
    <a href="#">Mapa do site
    <span>
    Mapa do site - Aqui você encontra uma 
    relação completa de todas as páginas do site.
    </span> 
    </a>
    </li>

    <li>
    <a href="#">Contato
    <span>
    Entre em contato conosco! 
    Sugestões serão muito bem vindas. 
    Se você tem uma matéria sobre CSS 
    e quer colaborar, publicaremos.
    </span> 
    </a>
    </li> 
</ul>

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo