[Resolvido] como montar esse menu?

Weblur · Janeiro 21, 2010

Olá pessoal

To desenvolvendo um site q terá um menu horizontal com 12 links. Ex:

LINK 1 | LINK 2 | até | LINK 12

A forma q este menu deverá aparecer dentro da div será da seguinte maneira:

< LINK 12 | LINK 1 | LINK 2 | LINK 3 > - onde < e > serão as setas para rolagem lateral dos links. Ou seja os demais links deverão permanecer ocultos e só aparecerão qdo rolados/clicados pela seta. Como fazer a seta "rolar" este menu é fácil, mas o q não estou conseguindo fazer é deixá-los ocultos na área q eles devem ficar hidden.

Nâo estou consguindo fazer isso de jeito nenhum. Alguém poderia me ajudar, por favor??

Aprendiz CSS · Janeiro 21, 2010

Com css não dá para fazer, vai precisar de javascript para fazer isso

como prefere fazer, na raça ou com Jquery ou outros?

Evandro Oliveira · Janeiro 21, 2010

crie a seguinte estrutura:

<div>
  <span id="rola_esq"><</span>
  <div id="menu">
    <ul><li>MONTE SEU MENU</li></ul>
  </div>
  <span id="rola_dir">></span>
</div>

propriedades e explicações:

div -> largura flexível, vai herdar o 100% do elemento pai

span -> elementos inline, terão a largura de um "<" na fonte e tamanho indicados na CSS

div#menu -> largura e altura desejados por você, display inline, posicionamento relativo

ul -> posicionamento absoluto, overflow como hidden, e white-spaces como nowrap

li's -> display inline

Neste momento, o menu deverá aparecer como o estado inicial desejado, mas ainda não haverá interação.

Se tudo estiver OK, peça a um moderador para mover o tópico para a área de Javascript ;)

boa sorte

Eliseu M. · Janeiro 21, 2010

Ah... deixe sua mente trabalhar menos e usa o JQuery Carousel, por favor.

http://sorgalla.com/projects/jcarousel/

Até mais!

Evandro Oliveira · Janeiro 21, 2010

Ah... deixe sua mente trabalhar menos e usa o JQuery Carousel, por favor.

http://sorgalla.com/projects/jcarousel/

Até mais!

e lembre-se de colocar um aviso bem grande:

<noscript><p>MEU SITE NÃO FUNCIONA SEM JAVASCRIPT</p></noscript>

Henrique Barcelos · Janeiro 21, 2010

e lembre-se de colocar um aviso bem grande:
<noscript><p>MEU SITE NÃO FUNCIONA SEM Javascript</p></noscript>

Não precisa de exagero também...

Gere a lista com os menus normalmente, faça o estilo CSS específico... veja se funciona sem JS...

Depois disso, aí sim adicione o Carrousel

Evandro Oliveira · Janeiro 21, 2010

Foi o que eu escrevi no primeiro post. Disse pro autor gerar o menu em html/css e aí pedir a mudança para a sessão de JS.

Acontece que quando se começa a conhecer as facilidades do jQuery + plugins, acaba viciando e tornando o site dependente disso o que o torna até lento http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Sem contar que o carousel tem alguns efeitos até mesmo de geração dinâmica [excelente pra uso com AJAX]

Weblur · Janeiro 26, 2010

Olá meninos, tudo bem?? Em primeiríssimo lugar, obrigadíssima a todos q responderam!! Todos ajudaram!!

Desculpa pela demora em responder, é q tive q viajar e não pude me concentrar nisso.

Bem, vamos lá!!

Adorei a praticidade do Carrousel, fiquei impressionada mesmo, é exatamente o q eu quero fazer. Não conheço o JQuery, mas deve ser sensacional tb.

Bem, acho q tenho q confessar algo antes de qq coisa: fazia uns 12 anos q eu não mexia com html (acabei migrando pro flash e parei com o htm, e o css só usava o básicão mesmo. Na época q eu desenvolvia htm, as tabelas eram a grande funcionalidade.) Então to tendo um pouco de dificuldade pra compreender essa questão de hierarquia e até de nomenclatura usada. Mas tá tudo funcionando muito bem até agora!! Consegui inserir tranquilamente o cód do carroulsel, ficou perfeito!! Muito obrigada!!

No entando, tenho outra dúvida e gostaria de aproveitar o tópico para tentar solucioná-la.

Este meu site está todo setado dentro de 2 grandes divs: div_esquerda e div_direita.

Dentro delas, é q vem o conteúdo dentro das suas respectivas divs. Assim:

-DIV_DIREITA

-DIV_TÍTULO DO PRIMEIRO BOX DO CONTEÚDO

-DIV_CONTEÚDO

-DIV_TÍTULO DO SEGUNDO BOX DO CONTEÚDO

-DIV Q CONTERÁ O MENU COM OS LINKS (CARROUSEL).

-DIV Q EXIBIRA OS SUBLINKS DO MENU ACIMA.

********************

TÍTULO NOVIDADES

********************

TEXTO NOVIDADES

********************

TÍTULO LINKS

********************

LINKS (carroussel, q ao ser clicado, deverá exibir na abaixo)

********************

CONTEÚDO LINK

********************

Como falei, perdoem-me se estruturei tudo errado, mas foi a maneira q consegui fazer funcionar.

Para a exibição do conteúdo, criei 12 divs exatamente idênticas, só mudando o conteúdo de cada e habilitando a opção hiddden. Então na div q tem os links, mandei exibir e ocultas os demais conforme o clique.

A dúvida é a seguinte: apesar das divs serem idênticas, somente a primeira está na posição correta, as demais ficam abaixo dela. Quero q todas elas tenham o mesmo lugar. Deu pra entender??

Alguém pode me ajudar??

William Bruno · Janeiro 26, 2010

Não entendi muito bem..

Para a exibição do conteúdo, criei 12 divs exatamente idênticas, só mudando o conteúdo de cada e habilitando a opção hiddden.

?

você tá fazendo a navegação por javascript ?

se precisa 'retirar o elemento totalmente', use display: none

tem um link do site? vendo fica mais fácil.

Evandro Oliveira · Janeiro 26, 2010

todas as div's que alternarão a exibição receberão uma classe em comum, aqui vamos chamá-la de exib

<div id="conteudo_1" class="exib"></div>
<div id="conteudo_2" class="exib"></div>
<div id="conteudo_3" class="exib"></div>
...

e assim, definir apenas uma regra CSS para a classe exib

.exib {
  position: absolute;
  top: 30px;  /* valores fictícios */
  left: 50px; /* para ilustração */
  width: 100px;
  height: 400px;
  display: none;
}

fim

Weblur · Janeiro 26, 2010

Oi Willian

Obrigada pela resposta. Não tenho link ainda não..... mas posso publicar aqui o css e o htm.

CSS



 body{
	margin:0;
	padding:0px;
	background-color: #6a6b6e;	
	}

#flash {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2;
	visibility: visible;
	margin: 0px;
	padding: 0px;
}

#logo {
	display:block;
	position: absolute;
	width: 0;
	height: 0;
	left: 16px;
	top: 20px;
	z-index: 3;
	visibility: visible;
}

#conteudo {
	position: absolute;
	width: 72%;
	height: auto;
	visibility: visible;
		z-index: 4;
	
	
}

h1{
	font-size: 13px;
	color: #ffffff;
	line-height: 17px;
	font-style: normal;
	font-weight: normal;

}

h2{
	font-size: 13px;
	color: #ffffff;
	line-height: 17px;
	font-style: normal;
	font-weight: bold;
}


a:link{
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #8ffe01;
	text-decoration: underline;
}

a:visited{
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #8ffe01;
	text-decoration: none;
}

a:hover{
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #8ffe01;
	text-decoration: underline;
}

.links {
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #8ffe01;
	text-decoration: none;
}

	/* ---------------------ESQUERDA--------------------------------*/

.thumbs {
	background-color: #8a8d90;
	border: 1px solid #ffffff;
	width: 80px;
	float: left;
	margin-right: 12px;
	padding: 0px;
}



#esq {
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	left: 16px;
	top: 161px;
	position: absolute;
	width: 57%;
	height: auto;
	z-index: 5;
	visibility: visible;
	float:left;
	line-height: 17px;
	
}



#titulo {
	width:100%;
	font-size: 13px;
	color: #636363;
	background-color: #8ffe01;
	padding: 2px 10px 2px 10px; /*  top - right - bottom - left */
	font-style: italic;
	font-weight: bold;
	float:left;

}

#txt {
	width:100%;
	height:auto;
	padding-left:10px;
	padding-right:10px;
	padding-top:14px;
	padding-bottom: 18px;
	background-image: url(../img/bg_txt.png);
	background-repeat: repeat;
	float:left;
	margin-bottom: 20px;
	
}

#twitter {
	width:100%;
	font-size: 13px;
	color: #636363;
	background-color: #8ffe01;
	padding: 2px 10px 2px 10px;
	font-style: italic;
	font-weight: bold;
	float:left;
	
}

#twitter_corpo {
width:100%;
	padding-left:10px;
	padding-right:10px;
	padding-top:14px;
	font-size: 13px;
	color: #ffffff;
	background-image: url(../img/bg_txt.png);
	background-repeat: repeat;
	height:auto;
	padding-bottom: 10px;	
	float:left;
	margin-bottom: 40px;
}

	/* ---------------------DIREITA--------------------------------*/



#dir {
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	left: 66%;
	top: 161px;
	position: absolute;
	width: 260px;
	height: auto;
	z-index: 6;
	visibility: visible;
	float:right;
	line-height: 18px;
	
}

#agenda {
	width:100%;
	font-size: 13px;
	color: #636363;
	background-color: #8ffe01;
	padding: 2px 10px 2px 10px;
	font-style: italic;
	font-weight: bold;
	float:right;
	
	
}

#agenda_corpo {
width:100%;
	padding-left:10px;
	padding-right:10px;
	padding-top:14px;
	font-size: 12px;
	color: #ffffff;
	background-image: url(../img/bg_txt.png);
	background-repeat: repeat;
	padding-bottom: 10px;	
	float:right;
	margin-bottom: 20px;
}



#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;
	background-image: url(../img/bg_txt.png);
	background-repeat: repeat;
	float:right;
	position: relative;
	
}


#arquivos_corpoa {
	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_corpob {
	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;
	visibility: hidden;
	position: absolute;
}

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/capa.css">


<title>sem título ainda</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="thumbs.js"></script>

<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && 

((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; 

v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>

<!--[if IE]>

<script type="text/javascript">
onload = function()
{
var theframes = document.getElementsByTagName('iframe');
for(var i = 0; i < theframes.length; i++)
{
theframes[i].setAttribute("allowTransparency","true");
}
}
</script>
<![endif]-->






<!--
  jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 0,
        wrap: 'last',
		visible: 6
        
		 });
});

</script>


</head>	

<body>

<div id="logo">
<img src="img/logo.png" border="0">

</div>

<div id="conteudo">

<!---------------------ESQUERDA-------------------------------->

<div id="esq">



<!---------------------TITULO-------------------------------->
<div id="titulo">

CHAMADA</div>
  
  
  <!---------------------TXT BLOG E FOTOS-------------------------------->
  
<div id="txt">

<p><h2>loren ipsun</h2></p>

<h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 

proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>


 



</h1>

 


</div>


<!---------------------TWITTER-------------------------------->
<div id="twitter">


TWITTER </div>


<div id="twitter_corpo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 

proident, sunt in culpa qui officia deserunt mollit anim id est laborum

 </div>
</div>





<!---------------------DIREITA-------------------------------->

<div id="dir">



<!---------------------AGENDA + NOVIDADES-------------------------------->

<div id="agenda">


AGENDA</div>

<div id="agenda_corpo">

21.10 - evento x<br />


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




<!---------------------ARQUIVOS-------------------------------->


<div id="arquivos">


ARQUIVOS </div>

<div id="arquivos_links">





<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><a href="#" 

onclick="MM_showHideLayers('arquivos_corpoa','','show','arquivos_corpob','','

hide')">JAN</a></li>
    <li><a href="#" 

onclick="MM_showHideLayers('arquivos_corpoa','','hide','arquivos_corpob','','

show')">FEV</a></li>
    <li>MAR</li>
    <li>ABR</li>
    <li>MAI</li>
    <li>JUN</li>
    <li>JUL</li>
    <li>AGO</li>
    <li>SET</li>
    <li>OUT</li>
     <li>NOV</li>
      <li>DEZ</li>
  </ul>
  </div>











<div id="arquivos_corpoj">

21.01 - Lorem ipsum...<br />
18.01 - Lorem ipsum<br />
14.01 - Lorem ipsum<br />

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


<div id="arquivos_corpof">

02.02 - hfdjfgdjg...<br />
02.02 - hfdjfgdjg...<br />
21.01 - Lorem ipsum...<br />
18.01 - Lorem ipsum<br />
14.01 - Lorem ipsum<br />

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









<!---------------------fecha-------------------------------->
</div>
</div>







</body>
</html>

Weblur · Janeiro 26, 2010

Pessoal, publiquei: http://www.lucianemenezes.com.br/teste

O problema ocorre qdo clicamos em FEV.

Thiago Retondar · Janeiro 26, 2010

Isso porque a div#arquivos_corpob está com position: absolute. Troque por position: relative.

Mesmo assim você vai perceber que ela não vai ficar no local correto. Isso acontece porque está usando visibility. O que ele faz? Ele vai deixar sua div invisível pro usuário, mas ela ainda vai ocupar o espaço. Para solucionar isso, trabalhe com display ao invés do visibility.

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

Weblur · Janeiro 26, 2010

Thiago, obrigada pela resposta. Fiz a modificação para:

#arquivos_corpob {
	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;
	position: relative;
	display: none;
}

No entendo, como eu ordeno o link pra exibir o conteúdo da div q está com display none??????

Thiago Retondar · Janeiro 26, 2010

O display: none é na div#arquivos_corpoa.

Dica: use a classe .arquivos_corpo para posicionar.

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

Weblur · Janeiro 26, 2010

Sou muito burra..... ainda não deu certo.

#arquivos_corpoa { 
        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;
} 
 
#arquivos_corpob {
	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;
	
	
}

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

HTML


<div id="arquivos">


ARQUIVOS </div>

<div id="arquivos_links">





<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><a href="#" class="arquivos_corpo">JAN</a></li>
    <li><a href="#" class="arquivos_corpo">FEV</a></li>
    <li>MAR</li>
    <li>ABR</li>
    <li>MAI</li>
    <li>JUN</li>
    <li>JUL</li>
    <li>AGO</li>
    <li>SET</li>
    <li>OUT</li>
     <li>NOV</li>
      <li>DEZ</li>
  </ul>
  </div>











<div id="arquivos_corpoa" class="arquivos_corpo">

21.01 - Lorem ipsum...<br />
18.01 - Lorem ipsum<br />
14.01 - Lorem ipsum<br />

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


<div id="arquivos_corpob" class="arquivos_corpo">

02.02 - hfdjfgdjg...<br />
02.02 - hfdjfgdjg...<br />
21.01 - Lorem ipsum...<br />
18.01 - Lorem ipsum<br />
14.01 - Lorem ipsum<br />

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

Thiago Retondar · Janeiro 26, 2010

#arquivos_corpoa {  display: block; } 
 
#arquivos_corpob { display: 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;
}

Nesse CSS, o #arquivos_corpoa vai aparecer, e o #arquivos_corpob não.

O que vai fazer as divs serem alternadas entre block e none é o JavaScript. ;)

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

Weblur · Janeiro 26, 2010

E alguém pode me ajudar com isso??

Já tentei diversos js, mas está dando pau geral.....

Weblur · Janeiro 26, 2010

Obrigada, amigos!!

Com as dicas de vcs consegui fazer funcionar!!

Thiago Retondar · Janeiro 26, 2010

Que bom. ^_^

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

Arquivado

[Resolvido] como montar esse menu?

Recommended Posts

Weblur 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eliseu M. 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weblur 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weblur 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weblur 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weblur 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weblur 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weblur 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weblur 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18