Forum Pplware
Menu Active + Iframes - Versão de Impressão

+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+--- Tópico: Menu Active + Iframes (/showthread.php?tid=8984)

Menu Active + Iframes - aeduarda - 12-05-2011 15:26

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

RE: Menu Active + Iframes - Alexandre Pinheiro - 12-05-2011 16:06

Podes mostrar como tens a css, para te podermos ajudar?

RE: Menu Active + Iframes - aeduarda - 12-05-2011 16:18

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">&nbsp;&nbsp;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...?

RE: Menu Active + Iframes - aFriend - 12-05-2011 17:32

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...

RE: Menu Active + Iframes - aeduarda - 12-05-2011 17:36

Eu não consigo fazer funcionar o estado 'active'... Sad
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...

RE: Menu Active + Iframes - aFriend - 12-05-2011 17:48

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".

RE: Menu Active + Iframes - rei007 - 13-05-2011 09:58

Vê isto:

http://www.codingforums.com/archive/index.php/t-93729.html