Boa tarde!
Estou a fazer um site através do uso de iFrames (já sei que muitos não concordam com a utilização de iframes, mas por agora é o que consigo fazer... :/)
Tenho um Menu que abre as iframes, ate aí tudo óptimo.
O menu é apenas Html e CSS, nada mais.
O problema é que gostaria imenso de conseguir fazer os links activos, (a:active) mas não funciona.
Será por estar a chamar iframes?
Alguém me ajude por favor, fico muito agradecia!
cumprimentos
Podes mostrar como tens a css, para te podermos ajudar?
aqui vai a css do menu:
Código:
#menu{
width: 166px;
min-height: 522px;
background-color: #29373B;
background-repeat: repeat-y;
float: left;
height: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-size: 11px;
font-weight: 400;
}
.menu{
margin: 0;
padding: 0;
list-style: none;
margin-top: 24px;
}
.menu ul{
list-style: none;
}
.menu li{
width: 100%;
height: auto;
padding: 0;
margin: 0;
position: relative;
border-bottom-width: 1px;
border-bottom-color: #696969;
border-bottom-style: solid;
}
.menu li ul{
width: 100%;
height: auto;
padding: 0;
margin: 0;
display: none;
position: absolute;
top: 0;
border-left-width: 1px;
border-left-color: #696969;
border-left-style: solid;
border-right-width: 1px;
border-right-color: #696969;
border-right-style: solid;
}
/*nível inferior do menu com display: none*/
.menu a{
display: block;
text-decoration: none;
padding: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant: small-caps;
font-size: 11px;
font-weight: 400;
color: #E8E8E8;
margin-left: 14px;
}
.menu a:hover{
background-color: #29373B;
text-decoration: none;
color: #646361;
}
.menu li ul a{
margin-left: 5px;
}
/* hack para o IE não criar margens\*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/*End */
.menu li:hover ul, li.over ul{
display: block;
background-color: #29373B;
min-width: 210px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
left: 140px;
}
ul.menu a:active{
color: black;
}
menu.havechild > a:active{
color: black;
}
menu a:active{
color: black;
font-size: 16px;
}
----------- e agora uma parte do menu em html ----------------
Código:
<div id="menu">
<ul class="menu">
<li><a href="home_.html"> Grupo</a></li>
<ul>
<li><a href="#">Direcção</a>
<ul>
<li> <a href="#" onclick="return goToPage('Perfis/miguelalmeida_perfil.html');">Miguel Almeida</a> </li>
<li> <a href="#" onclick="return goToPage('Perfis/mjoaoneves_perfil.html');">Maria João Neves</a> </li>
<li> <a href="#" onclick="return goToPage('Perfis/mteresaferreira_perfil.html');">Maria Teresa Ferreira</a> </li>
<li> <a href="#" onclick="return goToPage('Perfis/liliabasilio_perfil.html');">Lília Basílio</a> </li>
<li> <a href="#" onclick="return goToPage('Perfis/monicacorga_perfil.html');">Mónica Corga</a> </li>
</ul></li>
</ul>
</li>
</ul>
</div>
como podem ver, já tentei várias formas de fazer a:active, e nenhuma dá... penso que seja por serem iframes não?? visto o endereço do site ser sempre o mesmo quando mudamos de página...?
Se percebi o que pretendes, só tens que fazer os "styles" para os links ficarem "activos".
Exemplo:
Código:
style="cursor: hand;"
Neste caso adicionará a mão quando se faz o "mousehover" sobre o Link. Mas podes adicionar outros styles como mudar de cor, fazer o sublinhado, etc...
Eu não consigo fazer funcionar o estado 'active'...
Queria que quando uma pessoa está numa determinada página, que no menu esse link estava diferente dos restantes... Não tenho a certeza se é por as páginas serem iframes que isso acontece, já tentei várias coisas e nunca funciona...
Exacto, percebi melhor agora. É complicado quando envolve iFrames mas não é impossível. Terá que ser com "styles" na mesma, e fazer uma jogada em que as defina "onclick", altere a sua "forma".