Ir para conteúdo

POWERED BY:

Arquivado

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

Weblur

[Resolvido] como montar esse menu?

Por , em Desenvolvimento frontend

Recommended Posts

Evandro Oliveira    331

Evandro Oliveira
Postado

agora siga a minha primeira postagem neste tópico e coloque em letras garrafais <noscript>Meu site não funciona sem javascript!</noscript>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Evandro,

 

é por isso que certas vezes eu sou bem contra a alguns plugins do jQuery. Se ainda fizesse o site funcionar sem JavaScript desabilitado era outra história... Mas as vezes mal sabe o que está fazendo. =/

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Weblur    0

Weblur
Postado

Evandro, obrigada pela dica!! Vou fazer isso.

 

Fiz testes de navegabilidade no IE 8 FF, Chrome e Safari. Todos funcionando perfeitamente, inclusive no Iphone.

Existe alguma maneira de testar o site no IE6 e 7 tb??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Eu fiz exatamente o contrário, usava VM, passei pra IETester

 

Não vamos nem levar em conta o consumo de memória entre um e outro que é um abuso. Vamos olhar apenas pelo lado prático:

Com o IETester você testa IE6 e IE7 simultaneamente, enquanto com a VM é necessário Iniciar um sistema com IE6 testar, testar e testar até ficar legal. Depois inicia o Sistema com IE7 e testa, testa, testa até ficar legal. Aí você inicia novamente com IE6 e descobre bugs e fica essa alternância de inicialização de sistemas =\ contraprodutivo. Foi comprovado, o resultado final é idêntico!

 

[off topic] Acabei de aprender a mesclar o Aptana no ZendStudio! Ficou filé

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

E tu nunca teve problema com o IEtester? Tive uns problemas com ele. Nele apresentava uma coisa e no Internet Explorer, com a versão respectiva, outra coisa. :blink:

 

Estranho...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Weblur    0

Weblur
Postado

Achei ótimo o programa, rodou perfeito o site.

Pena q no IE5 e 6 ele não "leu" a transparência dos pngs.

 

Sobre programação, no 5 deu um aviso de erro de script, e pergunta se quero rodar o script.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Weblur    0

Weblur
Postado

Pessoal, a leiga volta a pedir ajuda pros mestres!!

 

Vou colocar aqui o cód do htm e do css, e tb o endereço para vcs verem no ar.

http://www.lucianemenezes.com.br/test/

 

Conforme eu havia falado acima, tava resolvido esse menu, tudo tava funcionando perfeito. Selecionava o mês e clicava, aí era exibido o conteúdo de cada.

 

Só q agora a coisa complicou e surgiu a necessidade de dividí-lo em 3 anos (menus), com sublinks dentro de cada.

 

Então ficaria assim:

 

MAR | FEV | JAN | 2009 | 2008.

 

Ao clicar em 2009, esse menu é ocultado e então devem aparecer os meses de 2009, e ao clicar em cada mês, é exibido o conteúdo. 2008 deverá ser assim tb.

 

Então o q fiz foi criar 3 carrousel. Acontece q ao clicar no 2009 e 2008, o comportamento ficou estrando, além deles não substituirem o de 2010 (q aparece de cara)

 

 

HTML


<!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" xml:lang="en-us">
<link rel="stylesheet" type="text/css" href="css/folhas.css">
<head>



<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>

<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>

<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />

<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />





<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 0,
        arquivos_links: 'last',
		visible: 4
        
		 });
	jQuery('#segundocarousel').jcarousel({
       auto: 0,
        arquivos_links: 'last',
		visible: 4
    });
	
	jQuery('#terceirocarousel').jcarousel({
       auto: 0,
        arquivos_links: 'last',
		visible: 4
    });
});

</script>

<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('arquivos_corpojan','arquivos_corpofev','arquivos_corpomar','arquivos_links2','arquivos_links3');

function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>



</head>
<body>


<!---------------------TITULO-------------------------------->


<div id="arquivos">


TÍTULO </div>


<!---------------------LINKS MENU 1-------------------------------->


<div id="arquivos_links" style="display:block">

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><a href="javascript:switchid('arquivos_corpomar');">MAR</a></li>
  <li><a href="javascript:switchid('arquivos_corpofev');">FEV</a></li>
 
  
   <li><a href="javascript:switchid('arquivos_links2');">2009</a></li>
   
    <li><a href="javascript:switchid('arquivos_links3');">2008</a></li>
    
     <li><a href="javascript:switchid('arquivos_corpojan');">C</a></li>
   
  <li><a href="javascript:switchid('arquivos_corpofev');">D</a></li>
  </ul>
  
</div>


<!---------------------LINKS 2009-------------------------------->

<div id="arquivos_links2" style="display:none">

<ul id="segundocarousel" class="jcarousel-skin-tango">
    <li><a href="javascript:switchid('arquivos_corpomar');">E</a></li>
  <li><a href="javascript:switchid('arquivos_corpofev');">F</a></li>
  <li><a href="javascript:switchid('arquivos_corpojan');">G</a></li>
  
   <li><a href="javascript:switchid('');">2010</a></li>
   
  <li><a href="javascript:switchid('arquivos_corpofev');">I</a></li>
  <li><a href="javascript:switchid('arquivos_corpojan');">J</a></li>
  </ul>
  

  </div>
  
  
  <!---------------------LINKS 2008-------------------------------->
  
  
<div id="arquivos_links3" style="display:none">
  
  
  
  <ul id="terceirocarousel" class="jcarousel-skin-tango">
    <li><a href="javascript:switchid('arquivos_corpomar');">L</a></li>
  <li><a href="javascript:switchid('arquivos_corpofev');">M</a></li>
  <li><a href="javascript:switchid('arquivos_corpojan');">N</a></li>
  
   <li><a href="javascript:switchid('');">2010</a></li>
   
  <li><a href="javascript:switchid('arquivos_corpofev');">O</a></li>
  <li><a href="javascript:switchid('arquivos_corpojan');">P</a></li>
  </ul>
  

  </div>
  
  
  
  
  
  
  
  <!---------------------CONTEUDO DOS LINKS DO 2010-------------------------------->
  
  
  
  <div id="arquivos_corpomar" class="arquivos_corpo" style="display:block;">

03/03 - loren ipsun...<br />
04/03 - loren 

<br />
<br />
 </div>


<div id="arquivos_corpofev" class="arquivos_corpo" style="display:none;">

15/02 - loren <br />



<br />
<br />
 </div>



<div id="arquivos_corpojan" class="arquivos_corpo" style="display:none;">

20/01 - bla bla bla bla <br />
21/01 - bla bla bla bla <br />
22/01 - bla bla bla bla <br />
23/01 - bla bla bla bla <br />


<br />			
<br />
 </div>






  
</body>
</html>

 

CSS


 body{
	margin:0;
	background-color: #CCCC66;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	}



 
#arquivos { 
        width:100%; 
        position: relative; 
        font-size: 13px; 
        color: #636363; 
        background-color: #8ffe01; 
        padding: 2px 10px 2px 10px; 
        font-style: italic; 
        font-weight: bold; 
        float:right; 
         
} 
 
#arquivos_links { 
        width:100%; 
        padding-left:10px; 
        padding-right:10px; 
        padding-top:14px; 
        font-size: 12px; 
        color: #ffffff; 
        float:right; 
        position: relative; 
         
} 

#arquivos_links2 { 
        width:100%; 
        padding-left:10px; 
        padding-right:10px; 
        padding-top:14px; 
        font-size: 12px; 
        color: #ffffff; 
       float:right; 
        position: relative; 
         
} 

#arquivos_links3 { 
        width:100%; 
        padding-left:10px; 
        padding-right:10px; 
        padding-top:14px; 
        font-size: 12px; 
        color: #ffffff; 
       float:right; 
        position: relative; 
         
} 
 


#arquivos_links a:link{
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;         
	
} 


#arquivos_links a:hover{ 
 	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
    color: #ffffff;
	text-decoration: underline;
         
} 

#arquivos_links a:visited{
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
}

#arquivos_links a:active{
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
}

.arquivos_corpo { 
        width:100%; 
        padding-left:10px; 
        padding-right:10px; 
        font-size: 12px; 
        color: #ffffff; 
        background-image: url(../img/bg_txt.png); 
        background-repeat: repeat; 
        float:right; 
        position: relative; 
}


#arquivos_corpojan {  
        width:100%;  
        padding-left:10px;  
        padding-right:10px;  
        font-size: 12px;  
        color: #ffffff;  
        background-image: url(../img/bg_txt.png);  
        background-repeat: repeat;  
        float:right;  
        display: none; 
		line-height: 19px;
}  
  
#arquivos_corpofev { 
        width:100%; 
        padding-left:10px; 
        padding-right:10px; 
        font-size: 12px; 
        color: #ffffff; 
        background-image: url(../img/bg_txt.png); 
        background-repeat: repeat; 
        height:auto; 
        float:right; 
        margin-bottom: 20px; 
		line-height: 19px;
         
         
} 
 
#arquivos_corpomar { 
        width:100%; 
        padding-left:10px; 
        padding-right:10px; 
        font-size: 12px; 
        color: #ffffff; 
        background-image: url(../img/bg_txt.png); 
        background-repeat: repeat; 
        height:auto; 
        float:right; 
        margin-bottom: 20px; 
		line-height: 19px;
         
         
}

Me ajude, por favor, com mais essa?????

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Oi, Luciane.

 

Eu posso ser um pouquinho chato, mas reprovei as sugestões do carousel desde que foram postadas. Não que eu seja contra a praticidade de pacotes e ferramentas prontas, desde que você siga dois princípios:

 

1 - saiba o que está fazendo

2 - não se limite a essas ferramentas

 

 

O meu medo inicial era o que aconteceu antes de você voltar aqui: A dependência de Javascript/jQuery. O item 2 se aplica nesse ponto.

O item um chegou agora. Surgiu a necessidade de uma adaptação e acaba que quem não olha o código com muuuuuuita atenção e cuidado fica sem nem noção de por onde começar.

 

Vamos lá, do começo, ver se eu entendi o propósito da ferramenta.

O menu lista os meses, e a cada clique de mês, é exibido um DIV com os eventos/postagens correspondentes, ok?

 

algumas funções ali são desnecessárias e você tem scripts até pra IE 4

 

então vamos caprichar nisso aí

 

estruture o menu da seguinte maneira:

 

<ul id="menu_2010">
  <li><a href="#">jan</a></li>
  <li><a href="#">fev</a></li>
  <li><a href="#">mar</a></li>
...
  <li><a href="#">2009</a></li>
  <li><a href="#">2008</a></li>
</ul>

<ul id="menu_2009">
  <li><a href="#">jan</a></li>
  <li><a href="#">fev</a></li>
  <li><a href="#">mar</a></li>
</ul>

<ul id="menu_2008">
  <li><a href="#">jan</a></li>
  <li><a href="#">fev</a></li>
  <li><a href="#">mar</a></li>
</ul>

 

deixe os 3 montadinhos para funcionamento correto com o carousel, um acima do outro mesmo, os 3 visíveis, só pra testar a interação se estão com o efeito desejado.

Se estiver tudo ok, envolva os 3 em uma div chamada menus

 

<div id="menus">
  <ul id="menu_2010">...</ul>
  <ul id="menu_2009">...</ul>
  <ul id="menu_2008">...</ul>
</div>

no css vem a brincadeira:

#menus { position: relative }
#menus ul { position: absolute; top: 0; left: 0 }

se testar neste ponto, verá que os menus estão sobrepostos. basta esconder os menus indesejados:

#menu_2009, #menu_2008 { display: none; }

 

parte visual OK? vou tomar a liberdade de fazer mais algumas modificações na estrutura.

 

Para fins de aproveitamento, as <DIV> dos meses serão nomeadas no seguinte padrão: [ano]_[mês]

isso quer dizer que a div de janeiro de 2009 se chamará 

<div id="2009_jan"></div>
e assim por diante.

 

todas essas <div>'s serão colocadas dentro de uma outra <div> que chamaremos de meses

<div id="meses">
  <div id="2008_jan"></div>
  <div id="2008_fev"></div>
  <div id="2008_mar"></div>
...
  <div id="2009_jan"></div>
  <div id="2009_fev"></div>
...
  <div id="2010_jan"></div>
  <div id="2010_fev"></div>
  <div id="2010_mar"></div>
</div>

vamos dar fim nesse bloco inteiro aqui:

 

<script language="Javascript">
//here you place the ids of every element you want.
var ids=new Array('arquivos_corpojan','arquivos_corpofev','arquivos_corpomar','arquivos_links2','arquivos_links3');

function switchid(id){  
        hideallids();
        showdiv(id);
}

function hideallids(){
        //loop through the array and hide each element by id
        for (var i=0;i<ids.length;i++){
                hidediv(ids[i]);
        }                 
}

function hidediv(id) {
        //safe function to hide an element with a specified id
        if (document.getElementById) { // DOM3 = IE5, NS6
                document.getElementById(id).style.display = 'none';
        }
        else {
                if (document.layers) { // Netscape 4
                        document.id.display = 'none';
                }
                else { // IE 4
                        document.all.id.style.display = 'none';
                }
        }
}

function showdiv(id) {
        //safe function to show an element with a specified id
                  
        if (document.getElementById) { // DOM3 = IE5, NS6
                document.getElementById(id).style.display = 'block';
        }
        else {
                if (document.layers) { // Netscape 4
                        document.id.display = 'block';
                }
                else { // IE 4
                        document.all.id.style.display = 'block';
                }
        }
}
</script>

 

 

e fazer algo decente:

function trocaDiv(alvo) {
    meses = document.getElementById('meses').getElementsByTagName('div');
    for(i = 0; i < meses.length; i++) meses.item(i).style.display = 'none';
    document.getElementById(alvo).style.display = 'block';
}

TUUUUDO aquilo lá tá pronto aqui nessas 5 linhas.

agora em cada uma das opções de link dos meses você vai fazer uma pequena troca no href

vai apontar para a nova função que criamos, e para o mês correspondente

 

<ul id="menu_2010">
    <li><a href="javascript:trocaDiv('2010_jan')">Jan</a></li>
Acho que deu pra entender né?

 

agora para os menus, seguiremos a mesma linha dos meses

function trocaMenu(menu) {
    menus = document.getElementById('menus').getElementsByTagName('ul');
    for(i = 0; i < menus.length; i++) menus.item(i).style.display = 'none';
    document.getElementById(menu).style.display = 'block';
}

e dentro dos links para os menus de 2008 e 2009 basta colocar:

<li><a href="javascript:trocaMenu('menu_2008')">2008</a></li>

espero que eu não tenha cometido nenhuma falha ou esquecido algum ponto e funcione corretamente.

Boa sorte

Compartilhar este post

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

Informação importante

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

  Aceito