Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mhqmelo

[Resolvido] Menu "ativado" de outra cor.

Por , em PHP

Recommended Posts

mhqmelo    0

mhqmelo
Postado

Boa noite a todos.

 

primeiro quero deixar claro que nao eh esse assunto.

 

Eu estou usando include 'menu.php' e entao eu nao tenho acesso a tag body de todas as paginas.

 

Eu procurei muito mais muito sobre isso e achei o seguinte:

 

Eu pego a URL do site (www.site.com)

acrescendo a classe "ativado" dentro do LI se a condicao for verdadeira

 

ja tentei varias formas mais nao da certo de jeito nenhum pq todos os exemplos usam www.site.com/contatos.php e nao www.site.com/contato, ou seja eu organizo as paginas por pastas.

 

o mais perto que eu consegui foi:

 

<?php $menuativo = basename($_SERVER['SCRIPT_NAME']); ?>
Aplicando a classe: <?php if($menuativo == ‘LINK.PHP’) {echo ‘class=”ativo”‘;} ?>

 

Alguma luz?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dexter Morgan    7

Dexter Morgan
Postado

CAra 1° sua pergunta ta meio confusa, mas vamos lá pelo que entendi você quer ativar o menu de acordo com a pagina que você estiver, mas você separa as pagina por pasta certo...

 

se você usa include acho que ficaria melhor você separar os include em 3 sessõe

 

header.php

menu.php

footer.php

 

assim você poderia fazer um código +- nesse ex: veja:

 

header.php


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="http://www.site.com/css/menu.css" />

</head>

	<body>

 

o css menu é necessario pois tem que ter um class active para dar certo...

 

menu.css

 

#menu li a:hover,
#menu li a:active,
#menu li a:focus {
font-family: tahoma;
color: #111111;
}

#menu li ul a{
border: none;
margin: 0;
padding: 5px 10px;
line-height: normal;
background: none;
color: #ffffff;
}

#menu li ul a:hover,
#menu li ul a:active,
#menu li ul a:focus,
#menu ul li:hover,
#menu ul li.sfhover,
#menu ul li.havesubchildsfhover,
#menu ul li.havesubchild-activesfhover,
#menu ul ul li:hover,
#menu ul ul li.sfhover,
#menu ul ul li.havesubchildsfhover,
#menu ul ul li.havesubchild-activesfhover{
background: #999999;
font-family: tahoma;
color: #ffffff;
}

#menu ul li a.active,
#menu ul li a.active:hover,
#menu ul li a.active:active,
#menu ul li a.active:focus{
background: none !important;
font-family: tahoma;
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}

 

menu.php

 

<div id="menu">

<?php $active[$current] = "class=active"; ?>

<ul id="menu">

<li <?php echo $active[0] ?>><a href="http://www.site.com/index.php" style="outline:0;" <?php echo $active[0] ?>>Home</a></li>

<li <?php echo $active[1] ?>><a href="http://www.site.com/empresa/empresa.php" style="outline:0;" <?php echo $active[1] ?>>Empresa</a></li>

<li <?php echo $active[2] ?>><a href="http://www.site.com/contato/contato.php" style="outline:0;" <?php echo $active[2] ?>>Contato</a</li>

</ul>

</div>

 

e no corpo exe:

 

contato.php fica assim

 


<?php include "../includes/header.php"; ?>

<?php $current = 2; include("../includes/menu.php"); ?>

<?php include "../includes/footer.php"; ?>

 

acima onde esta $current = 2 é o valor do menu então na pagina empresa fica $current = 1 certo

Compartilhar este post

Link para o post
Compartilhar em outros sites

mhqmelo    0

mhqmelo
Postado

Bom dia Dexter.

 

Desculpe se a minha pergunta ficou muito confusa. Realmente o que eu quero eh so mudar a cor do link de acordo com a pagina. Nao estou conseguindo pq eu organizo minhas paginas por Pastas.

 

Eu fiz conforme você me passou mais nao deu certo.

 

<div id="menu">

<?php $active[$current] = "class=active"; ?>

<ul id="menu">

<li <?php echo $active[0] ?>><a href="http://www.site.com/index.php" style="outline:0;" <?php echo $active[0] ?>>Home</a></li>

<li <?php echo $active[1] ?>><a href="http://www.site.com/empresa/empresa.php" style="outline:0;" <?php echo $active[1] ?>>Empresa</a></li>

<li <?php echo $active[2] ?>><a href="http://www.site.com/contato/contato.php" style="outline:0;" <?php echo $active[2] ?>>Contato</a</li>

</ul>

       </div>

 

Eu queria saber so a parte de menu mesmo, por exemplo,

 

Eu tenho uma classe "link_atual", ae eu queria fazer uma condicao dentro do proprio UL para pegar a URL da pagina e verificar qual pagina esta, ae entao ativar esse link com 'echo'.

 

Esse Exemplo so funciona com as paginas assim: meusite.com/empresa.php, meusite.com/contato.php

e nao comigo por conta das pastas.

 

meusite.com/ (home)

meusite.com/empresa

meusite.com/contato

 

 

Consegui esse javascript, mais o "home" fica sempre ativado por causa da "/", ae quando eu clico no contato por exemplo, fica o home e o contato "ativado".

 

 

<script type="text/javascript">
function setActive() {
 aObj = document.getElementById('menu').getElementsByTagName('a');
 for(i=0;i<aObj.length;i++) {
   if(document.location.href.indexOf(aObj[i].href)>=0) {
     aObj[i].className='active';
   }
 }
}
</script>

 

Segue o printscreen do que eu to falando:

capturecpk.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

mhqmelo    0

mhqmelo
Postado

index.php

contact.php

portfolio.php

 

Codigo:

<?php include 'includes/header.php';?>

<?php include 'includes/footer.php';?>

 

 

Menu.css

/* Menu */
ul#menu{
margin-top:40px;
float:right;
list-style:none;
width:500px;
height:75px;
}
#menu li{
width:120px;
height:75px;
float:left;
display:inline;
text-align:center;
text-transform:uppercase;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#menu li a{
text-decoration:none;
font-weight:bold;
background: #252424;
   color:  #7f7f7f;
   display: block;
   padding: 28px 10px;
   margin: 0 5px;
}
#menu li a:hover{
background-color:#9f1818;
height:40px;
color:#fff;
font-weight:bold;
}
ul#menu li a.active{
background-color:#9f1818;
height:40px;
color:#fff;
font-weight:bold;
}

 

 

header.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://brcomputadores.com/m/tony/css/menu-style.css" type="text/css" />
<link rel="stylesheet" href="http://brcomputadores.com/m/tony/css/main-style.css" type="text/css" />
<title>Tommy Photography - Boston Massachusetts</title>
<script type="textjavascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function setActive() {
 aObj = document.getElementById('menu').getElementsByTagName('a');
 for(i=0;i<aObj.length;i++) {
   if(document.location.href.indexOf(aObj[i].href)>=0) {
     aObj[i].className='active';
   }
 }
}
</script>
</head>
<body>
<div id="main">
<div id="wrap">
	<div id="header">
	<div id="logo">
   		<a href="/m/tony/"><img src="http://brcomputadores.com/m/tony/images/logo.png" alt="" /></a>
    	</div><!-- /logo -->
   	<ul id="menu">
   		<li><a href="/m/tony/">Home</a></li>
		<li><a href="/m/tony/about">About</a></li>
   		<li><a href="/m/tony/portfolio">Portfolio</a></li>
   		<li><a href="/m/tony/contact">Contact</a></li>
   	</ul><!-- /ul -->    
</div><!-- /header -->
</div> <!-- /wrap -->
</div> <!-- /bg-wrap -->

 

por enquanto ta usando javascript, mais nao esta funcionado. Por isso eu quero fazer em php, eu acho mais facil de entender.

 

Fica mais facil você ver o link:

 

Este aqui eh o link do site

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dexter Morgan    7

Dexter Morgan
Postado

Então cara é o seguinte ... como você separa cada pagina por pasta o menu tem que levar o link completo exe:

 

estava assim : <a href="/m/tony/about">About</a>

 

o certo para ele conseguir navegar tera que ficar assim : <a href="http://www.site.com/m/tony/about">About</a>

 

beleza? ai você adapta conforme precisar ok!

 

1° a estrutura que fiz

 

a raiz ficou assim

 

index.php

 

pasta

includes/header.php

includes/menu.php

 

pasta

about/index.php

 

pasta

portfolio/index.php

 

pasta

contact/index.php

 

certo essa foi a estrutura das paginas

 

agora os codigos

 

index.php

 

<?php include 'includes/header.php';?>

<?php $current = 0; include("includes/menu.php"); ?> 

</body>

</html>

 

header.php

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://brcomputadores.com/m/tony/css/menu-style.css" type="text/css" />
<link rel="stylesheet" href="http://brcomputadores.com/m/tony/css/main-style.css" type="text/css" />
<title>Tommy Photography - Boston Massachusetts</title>
<script type="textjavascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function setActive() {
 aObj = document.getElementById('menu').getElementsByTagName('a');
 for(i=0;i<aObj.length;i++) {
   if(document.location.href.indexOf(aObj[i].href)>=0) {
     aObj[i].className='active';
   }
 }
}
</script>
</head>
<body>
<div id="main">
       <div id="wrap">
               <div id="header">
               <div id="logo">
               <a href="/m/tony/"><img src="http://brcomputadores.com/m/tony/images/logo.png" alt="" /></a>
       </div><!-- /logo -->

 

menu.php

 

<ul id="menu">

<?php $active[$current] = "class=active"; ?>

<li <?php echo $active[0] ?>><a href="http://guiamaisdaweb.com/teste/" <?php echo $active[0] ?>>Home</a></li>
<li <?php echo $active[1] ?>><a href="http://guiamaisdaweb.com/teste/about" <?php echo $active[1] ?>>About</a></li>
<li <?php echo $active[2] ?>><a href="http://guiamaisdaweb.com/teste/portfolio" <?php echo $active[2] ?>>Portfolio</a></li>
<li <?php echo $active[3] ?>><a href="http://guiamaisdaweb.com/teste/contact" <?php echo $active[3] ?>>Contact</a></li>

</ul><!-- /ul -->



       </div><!-- /header -->
       </div> <!-- /wrap -->
</div> <!-- /bg-wrap -->

 

about.php

 

<?php include '../includes/header.php';?>

<?php $current = 1; include("../includes/menu.php"); ?> 

</body>

</html>

 

portfolio.php

 

<?php include '../includes/header.php';?>

<?php $current = 2; include("../includes/menu.php"); ?> 

</body>

</html>

 

contact.php

 

<?php include '../includes/header.php';?>

<?php $current = 3; include("../includes/menu.php"); ?> 

</body>

</html>

 

Pronto qual segredo?,, preste atenção na numeração que segue nos menu

ae quando for chamar o include em cada pagina pegue o numero que esta no menu

 

exe:

 

aqui o menu ..

<li <?php echo $active[3] ?>><a href="http://guiamaisdaweb.com/teste/contact" <?php echo $active[3] ?>>Contact</a>

 

aqui a pagina

<?php $current = 3; include("../includes/menu.php"); ?>

 

Ve se da certo ai agora para o que você precisa....

 

esqueci olha essa parte pode tirar

 

<script type="text/javascript">

function setActive() {

aObj = document.getElementById('menu').getElementsByTagName('a');

for(i=0;i<aObj.length;i++) {

if(document.location.href.indexOf(aObj.href)>=0) {

aObj.className='active';

}

}

}

</script>

 

nao serve pra nada é tudo feito com PHP beleza

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dexter Morgan    7

Dexter Morgan
Postado

dentro do header.php onde eu chamo o menu.php ?

 

no header você nao chama o menu o header fica ssim

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://brcomputadores.com/m/tony/css/menu-style.css" type="text/css" />
<link rel="stylesheet" href="http://brcomputadores.com/m/tony/css/main-style.css" type="text/css" />
<title>Tommy Photography - Boston Massachusetts</title>
<script type="textjavascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div id="main">
       <div id="wrap">
               <div id="header">
               <div id="logo">
               <a href="/m/tony/"><img src="http://brcomputadores.com/m/tony/images/logo.png" alt="" /></a>
       </div><!-- /logo -->

 

se você perceber tem as divs que foram abertas do header ai no

 

as divs são fechadas veja abaixo e quando executadas na web vira apenas um código e fica perfeito..

 

menu.php

 

<ul id="menu">

<?php $active[$current] = "class=active"; ?>

<li <?php echo $active[0] ?>><a href="http://guiamaisdaweb.com/teste/" <?php echo $active[0] ?>>Home</a></li>
<li <?php echo $active[1] ?>><a href="http://guiamaisdaweb.com/teste/about" <?php echo $active[1] ?>>About</a></li>
<li <?php echo $active[2] ?>><a href="http://guiamaisdaweb.com/teste/portfolio" <?php echo $active[2] ?>>Portfolio</a></li>
<li <?php echo $active[3] ?>><a href="http://guiamaisdaweb.com/teste/contact" <?php echo $active[3] ?>>Contact</a></li>

</ul><!-- /ul -->



       </div><!-- /header -->
       </div> <!-- /wrap -->
</div> <!-- /bg-wrap -->

 

completando o menu você vai chamar nas outras paginas entedeu ... por causa

 

disso <?php $current = 2; include("../includes/menu.php"); ?>

 

se você colocar no header o menu como você defenir o numero do menu quevai ser ativado

nao tem como por isso o menu é separdo

Compartilhar este post

Link para o post
Compartilhar em outros sites

mhqmelo    0

mhqmelo
Postado

Verdade. Eu nao tinha reparado, eu fiz aqui agora e deu certinho! Ficou exatamente do jeito que eu queria.

 

Eu so achei um pouco complicado ter q tirar o menu de dentro do header e chamar ele dentro do index.php, pra mim que so estou comecando em php achei dificil!

 

Mais eu vou dar uma olhada agora umas 200 vezes pra aprender.

 

Muito OBRIGADO!! Salvou meu final de semana!!

 

Valeu mesmo Dexter,

 

Marcelo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Devanir Silva_62041    0

Devanir Silva_62041
Postado

Fala galera, beleza..

 

Seguinte.. estava lendo esse post referente a esse esquema de deixar o link ativo com outra cor...

 

É exatamente o que estou querendo fazer, porém só tem um detalhe q torna um pouco diferente do q foi apresentado aqui..

 

o site q estou fazendo só tem uma pagina (index.html) e o menu chama as "paginas" que estao dividadas na tag <SECTION>

 

Então pra chamar o conteudo q quero eu chamo o menu com o link do tipo <a class="tab_menu" href="#empresa">EMPRESA</a>.

 

então ele avança para o local desejado..

 

Nesse caso, como fazer para descobrir o link q esta ativo no momento e deixa-lo de outra cor?

 

Se puderem me ajudar ficarei grato..

 

qualquer coisa eu post o codigo para darem uma olhada.. valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito