Publicado em 21 de jan.

[Resolvido] como montar esse menu?

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

Discussão (33)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Aprendiz CSS· 21 de jan.

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· 21 de jan.

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.· 21 de jan.

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

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

Até mais!

Evandro Oliveira· 21 de jan.

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

Henrique Barcelos· 21 de jan.

>
e lembre-se de colocar um aviso bem grande:

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· 21 de jan.

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· 26 de jan.

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· 26 de jan.

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· 26 de jan.

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· 26 de jan.

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">](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]-->

<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,
 wrap: 'last',
 visible: 6

 });
});

</script>

</head>

<body>

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

</div>

<div id="conteudo">

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

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

<div id="agenda">

AGENDA</div>

<div id="agenda_corpo">

21.10 - evento x<br />

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

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

</div>
</div>

</body>
</html>

Weblur· 26 de jan.

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

O problema ocorre qdo clicamos em FEV.

Thiago Retondar· 26 de jan.

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· 26 de jan.

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· 26 de jan.

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· 26 de jan.

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· 26 de jan.

#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· 26 de jan.

E alguém pode me ajudar com isso??

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

Weblur· 26 de jan.

Obrigada, amigos!!

Com as dicas de vcs consegui fazer funcionar!!

Thiago Retondar· 26 de jan.

Que bom. ^_^

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

Evandro Oliveira· 27 de jan.

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

Thiago Retondar· 27 de jan.

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

Weblur· 27 de jan.

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

Evandro Oliveira· 27 de jan.

http://www.my-debugbar.com/wiki/IETester/HomePage

Thiago Retondar· 27 de jan.

Esse IETester é legalzinho, já usei, mas, se você tem a possibilidade, usa Virtual Machine.

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

Evandro Oliveira· 27 de jan.

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é