Jump to content
Fórum Script Brasil
  • 0

Question

Olá, estou fazendo um menu vertical e queria dar o efeito no HOME, deixando o hover já acionado sem precisar do mouse..

efeito parecido com esse abaixo.

Menu

segue o codigo que fiz.



<div id="menu">
<table border="0" width="100%" height="100%">

<tr>
<td><a href="#"><i>Home</a></td>
<td><a href="#"><i>Cursos</a></td>
<td><a href="#"><i>Contato</a></td></tr>
<tr>
<td><a href="#"><i>Cursos</a></td>
<td><a href="#"><i>Parceiros</a></td>
<td><a href="#"><i>Localização</a></td></tr>
<tr>
<td><a href="#"><i>A Empresa</a></td>
<td><a href="#"><i>Estágio</a></td>
<td><a href="#"><i>Fotos</a></td></tr>
</ul>

</table>
</div>

[/codebox]

CSS abaixo.

[codebox]

#menu table {
padding:2px;
margin:2px;
float: left;
width: 100%;
text-decoration: none;
font:16px;
}
#menu table a {

text-decoration: none;
padding: 2px 10px;
float:left;
font-family: Arial, Verdana, Geneva, sans-serif;
font-size: 16px;
color: #002C2D;

}


#menu table a:hover {
background-color:#002C2D;
color: #FFFFFF;
border-bottom:3px solid #6D6D6D;
}

Se alguém puder me ajudar agradeço. abç

Edited by Paulo Alberto
Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Olá Paulo Alberto. Fiz o menu e acredito ter ficado da forma que você pediu. Caso não esteja, pode avisar que conserto aqui.

dc8c40f7.png

Código Html

<div id="menu">
<ul class="menu">

  <li><a href="#" class="linkdapagina">Home</a></li>
  <li><a href="#">Sobre</a></li>
  <li><a href="#">Contato</a>
         <ul>
                  <li><a href="#">link1</a></li>
                  <li><a href="#">link2</a></li>
                  <li><a href="#">link3</a></li>
                  <li><a href="#">link4</a></li>                    

       </ul>
</li>
</ul>
</div>
Código Css
*{margin:0; padding:0;}

#menu{background:#CCC;}
.menu{list-style:none; margin:20px 0 0 350px; border:1px solid #c0c0c0; float:left; }
.menu li{position:relative; float:left; border-right:1px solid #c0c0c0; }
.menu li a{font-size:1.3em;  color:#333; text-decoration:none; padding:5px 10px; display:block;}
.menu li a:hover{background:#CCC; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }

.menu li   ul{position:absolute; top:23px; left:-20px; background-color:#fff; display:none; list-style:none; margin-top:12px;}
.menu li:hover ul, .menu li.over ul{display:block;}
.menu li ul li{border:1px solid #c0c0c0; display:block; width:110px;}
li.border0{border:0;}
.linkdapagina{background:#CCC;}

Explicação: Para fazer o "home" ficar marcado eu adicionei uma classe ao link, como você pode ver nesse trecho do código Html(<a href="#" class="linkdapagina">Home</a>) .

Se você quiser que esse efeito também fique marcado ao acessarem as outras páginas, nas próximas páginas que você fizer, basta mudar a classe do link de lugar.

Edited by Adler Liefde
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      149296
    • Total Posts
      645693
×
×
  • Create New...