Banner propaganda da DevMedia - Cursos de desenvolvimento web

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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo