Jump to content
pessantiago

menu active

Recommended Posts

pessantiago

tenho um menu com sub-menus. quero que ao clicar ele mude de cor e mantenha

tenho este código já

JS

 $('a.list').click(function () {
			 $('a.list').removeClass("active");
			 $(this).addClass("active");
		 });

html

echo '<ul class="nav navbar-nav">'
. ' <li>
					 <a href="Home.php"><i class="list"></i> Home</a>
				 </li>'
. ' <li class="dropdown">
					 <a class="list dropdown-toggle fa fa-fw fa-table menu" data-toggle="dropdown" >page1<span class="caret"></span></a>
					 <ul class="dropdown-menu list">
							 <li><a href="page1.php">Consultar </a></li>
							 <li><a href="#">Editar</a></li>
							 <li><a href="#">Novo Registo</a></li>
							 </ul>
					 </li>'
			 . ' <li class="dropdown">
					 <a class="list dropdown-toggle fa fa-fw fa-table menu " data-toggle="dropdown" >page2<span class="caret"></span></a>
					 <ul class="dropdown-menu list">
							 <li><a class="list" href="page2.php">Consultar </a></li>
							 <li><a href="#">Editar</a></li>
							 <li><a href="#">Novo Registo</a></li>
					 </ul>
					 </li>
					 </ul>';

css

.active{
color: #ffffff !important;
font-weight: bold;
}

mas só me aparece a brando quando clico por cima no no page 2 se clicar no consultar desaparece.quero que ao clicar no consulta coloque a pagina corrent a branco

Edited by pessantiago

Share this post


Link to post
Share on other sites
HappyHippyHippo

estás a registar e evento somente aos elementos "a" que possuem a classe "list"

(isto se estás a chamar o javascript num momento apropriado)


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
pessantiago

sim estou. um exemplo é que dava geito ;)

esse menu é carregado automaticamente...vou ver se encontro algo como current

Edited by pessantiago

Share this post


Link to post
Share on other sites
pessantiago

a questão é que quando faço,clico no sub menu ele vai para uma nova pagina...vou tentar com o document ready em jquery pode ser que funcione que achas?

Share this post


Link to post
Share on other sites
HappyHippyHippo

o que disse era uma constatação e não uma pergunta.

era o intuito de te fazer ver que o processo de "marcar como clicado" só irá ocorrer nos elementos que referi.

a questão é que quando faço,clico no sub menu ele vai para uma nova pagina...vou tentar com o document ready em jquery pode ser que funcione que achas?

pois.

é por isso que uma solução para esse tipo de situação normalmente não é implementada por javascript, pois seria necessário preservar informação entre pedidos, algo que até recentemente era possível com cookies

Edited by HappyHippyHippo

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
pessantiago

hum pois fiz uma cena no wordpress nao nao usei sub menus...agora estou a fazer uma app web e dava-me geito....para nao estar a replicar menus.

se colocar isto em todas as paginas funciona...

se desse ir pelo current ulr e adicionava um estilo por javascript

   <ul class="nav navbar-nav">'
				    <li>
					    <a href="Home.php"><i class="list"></i> Home</a>
				    </li>
				    <li class="dropdown">
					    <a class="dropdown-toggle fa fa-fw fa-table menu" data-toggle="dropdown" >clientes<span class="caret"></span></a>
					    <ul class="dropdown-menu list">
						    <li><a href="clientes.php">Consultar </a></li>
						    <li><a id="alerta" href="#">Editar</a></li>
						    <li><a id="alerta" href="#">Novo Registo</a></li>
					    </ul>
				    </li>
				    <li class="dropdown active">
					    <a  class="active dropdown-toggle fa fa-fw fa-table menu" data-toggle="dropdown" >Pedidos<span class="caret"></span></a>
					    <ul   class="dropdown-menu ">
						    <li><a id="alerta"href="pedidos.php">Consultar </a></li>
						    <li><a  id="alerta"href="#">Editar</a></li>
						    <li><a id="alerta" href="#">Novo Registo</a></li>
					    </ul>
				    </li>
			    </ul>

Share this post


Link to post
Share on other sites
pexoia

O que tu queres exatamente ?

É tipo tu carregares por exemplo no "Registar" e essa <li> ficar de cor diferente das outras de forma a dizer que é esse separador em que estás atual ?

Eu cheguei a usar este código no meu site

   $(document).ready(function(){
    $('header nav ul li').eq(0).addClass('current');
   });

Obvio que tens de mudar o seletor para o teu xD

Cumprimentos, espero que tenha ajudado.

Share this post


Link to post
Share on other sites
pessantiago

boas , o que eu quero é ao clicar no consultar , ou registar no menu pedidos apresentar o menu principal activado.

fiz-me entender...seja qual for o menu.

Share this post


Link to post
Share on other sites
HappyHippyHippo

ninguém te vai dizer que para fazer isso terás de fazer X, e prontos, não existe outra solução. isto porque:

- apresentas um código/plataforma em HTML/javascript sem qualquer tipo de controlo em backend

- não apresentas nenhuma informação identificativa da página passível de ser usada como referência para marcação da página como visível

- demonstras uma apresentação do menu de forma estática, sem qualquer possibilidade de alteração para marcação de visivel

a única coisa que te posso dizer será :

- regista uma função a ser executada qualquer momento após a apresentação do menu no browser

- essa função irá obter o link da página através da variável "window.location.href"

- percorrer todos os links do menu e aqueles que o atributo href for igual ao fim do valor obtido anteriormente, adicionar a classe pretendida

mais do que isto é impossivel


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
pessantiago

a solução que consegui fazer foi esta

onde adicionei um "id= current" porem não é a maneira mais apropriada facil de fazer ;)

<li "id= current" class="dropdown ">

			 $(document).ready(function(){
			 $('#current').addClass('active');
				 });

sendo que tenho de fazer isto para todos...os restantes menus adicionar um nome difrente

menu estático claro que esta. a base de dados não esta preparada para isso!

O ideal era carregar os menus dinamicamente por isso é que tenho um header onde estou a definir os menus e sub-menus e só tenho de chamar o menu fazendo include do file ;) posteriormente será para ter niveis de acesso.

Edited by pessantiago

Share this post


Link to post
Share on other sites
pessantiago

uma solução sendo que em cada pagina devem de ter o javascript incluído senão não funciona

isto é apenas para a pagina do menu 1.

 $(document).ready(function(){
			    $('#menu1').addClass('active');

				 $('#menu2').removeClass('active');
			    });

Share this post


Link to post
Share on other sites
HappyHippyHippo

- regista uma função a ser executada qualquer momento após a apresentação do menu no browser

- essa função irá obter o link da página através da variável "window.location.href"

- percorrer todos os links do menu e aqueles que o atributo href for igual ao fim do valor obtido anteriormente, adicionar a classe pretendida


IRC : sim, é algo que ainda existe >> #p@p

Share this post


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
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.