Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) problemas com menu sanfona


vini_loock

Pergunta

oi sara que alguém pode me ajudar com um menu sanfona? acho que é esse o nome.

o problema é que quando eu to visualizando o site, o menu fica todo aberto(os sub menus já estão ativados), e eu queria que quando a pessoa entrasse no site, o menu não esteja aberto. eu só quero que esteja aparecendo os menus principais.

pra quem quiser dar uma olhada vou postar o código porque não to conseguindo colocar fotos.

esse é o arquivo javascript chamdo"menu.js"

 var persistmenu = "sim";
var persisttype = "site";

if(document.getElementById) {
document.write('<style type="text/css">\\n')
document.write('.submenu{display: none;}\\n')
document.write('</style>\ ')
}

function abrir_menu(obj) {
if(document.getElementById) {
var el = document.getElementById(obj);

var ar = document.getElementById("menu").getElementsByTagName
"span");
if(el.style.display != "block") {
for(var i=0; i<ar.length; i++) {
if(ar[ i ].className=="submenu") {
ar[ i ].style.display = "none";
}
}
el.style.display = "block";
}
else {
el.style.display = "none";
}
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if(document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if(offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if(end == -1) end = document.cookie.length;
returnvalue = unescape(document.cookie.substring
(offset, ))
}
}
return returnvalue;
}

function onloadfunction() {
if(persistmenu=="sim") {
var cookiename = (persisttype=="site")? "abrir_menu" : window.location.pathname
var cookievalue = get_cookie(cookiename)

if(cookievalue!="") {
document.getElementById(cookievalue).style.display="block"
}
}
}

function savemenustate() {
var inc=1, blockid=""
while(document.getElementById("submenu"+inc)) {

if(document.getElementById("submenu"+inc).style.display=="block") {
blockid="submenu"+inc
break
}
inc++
}
var cookiename = (persisttype=="site")? "abrir_menu" : window.location.pathname
var cookievalue = (persisttype=="site")? blockid+";path=/" : blockid
document.cookie = cookiename+"="+cookievalue
}

if(window.addEventListener) {
window.addEventListener("load", onloadfunction, false)
}
else if(window.attachEvent) {
window.attachEvent("onload", onloadfunction)
}
else if(document.getElementById) {
window.onload = onloadfunction
}

if(persistmenu=="sim" && document.getElementById) {
window.onunload = savemenustate
}
[/codebox]

esse é o arquivo html chamado"menu.html"

[codebox]<!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="pt" lang="pt">
<head>
<title>Menu Sanfona</title>
<script type="text/javascript" src="menu.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")
&&(parseInt(appVersion)
==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)

location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1

left:
342px; top: 34px;">
<div id="menu">
<!--_________________________começo menu1_______________________________-->
<div onclick="abrir_menu('submenu1')"><img src="../menu.png" width="150"
height="30" /></div>
<span id="submenu1" class="submenu"> <img src="../sub-menu.png" width="150"

height="30" /><br />
<img src="../sub-menu.png" width="150" height="30" /> <br />
</span>
<!--____________________________fim menu1________________________________-->

<!--..........................começo menu2................................-->
<div onclick="abrir_menu('submenu2')"><img src="../menu.png" width="150"
height="30" /></div>
<span id="submenu2" class="submenu"> <img src="../sub-menu.png" width="150"
height="30" /><br />
<img src="../sub-menu.png" width="150" height="30" /> <br />
</span>
<!--...........................fim menu2..................................-->

<!--_________________________começo menu3________________________________-->

<div onclick="abrir_menu('submenu3')"><img src="../menu.png" width="150"
height="30" /><br>
<span id="submenu3" class="submenu"> <img src="../sub-menu.png" width="150"
height="30" /><br />
<img src="../sub-menu.png" width="150" height="30" /> </span>
<!--________________________fim menu3___________________________________-->

<!--......................começo menu4..................................-->

</div>
<div onclick="abrir_menu('submenu4')"><img src="../menu.png" width="150"
height="30" /></div>
<span id="submenu4" class="submenu"> <img src="../sub-menu.png" width="150"
height="30" /><br />
<img src="../sub-menu.png" width="150" height="30"/></span>
<!--.......................fim menu4......................................-->
</div>


</body>
</html>

por favor me ajudem!

(o código pode estar meio confuso porque eu tive que quebrar algumas linhas)

Editado por vini_loock
Link para o comentário
Compartilhar em outros sites

18 respostass a esta questão

Posts Recomendados

  • 0

cara não sei como vpcê acha tanto tutorial.

eu fico o dia todo procurando e não acho quase nada.

vlw

nossa muito bom a video aula, mas não consegui fazer funcionar!^.^

eu pensava que jquery era um bixo de 7 cabeças por isso nunca tentei aprender ainda, mas por quele tuto acho que deve ser mas facil que javascript.

se puder me ajudar com o erro do menu com jquery.

o problema é que depois que eu faço o código jquery.js não aparece os itens da lista na visualização.

você sabe porque?

vlw

a se vocÊ for me ajudar, me fala mais uma coisa. porque ele fez aquele arquivo "jquery-1.3.2.min.js"?

Alquem conhece conhece qualquer curso de web design ou qualquer coisa do tipo em Curitiba ou algum lugar perto?

porque eu to loko pra fazer mas não acho nenhum.

vlw

Editado por vini_loock
Link para o comentário
Compartilhar em outros sites

  • 0

Opa vini_loock.

Então cara, jquery é um framework javascript. Quero dizer, ele apenas facilitou o uso do javascript para nós. Um framework consiste apenas em uma biblioteca, isso explica a criação do arquivo jquery-1.3.2.min.js

Para utilizar jquery, linque o arquivo do jquery, e linque seu arquivo onde vai colocar os scripts. Assim:

<html>

<head>

<title>Teste de menu sanfona</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="seu_arquivo.js"></script>

</head>

<body>

conteudo do site...

</body>

</html>

Então cara, no arquivo jquery-1.3.2.min.js, é o jquery! hehe... ou seja, é a biblioteca de código, que consiste em apenas capsular funções.

No seu_arquivo.js, é justamente o arquivo que você vai colocar seu script em jquery.

Bem, não entendi muito o que deu errado no seu script, mais o menu é bem simples de se fazer. Vamos lá:

1ª- Crie uma lista não ordenada, e após, listas ordenadas para os menus principais. Assim:

<ul>

<li><a href="javascript.void(0)">Home</a></li>

<li><a href="javascript.void(0)">Quem Somos</a></li>

<li><a href="javascript.void(0)">Contato</a></li>

Isso seriam os menus principais. Para fazer os submenus, deverá colocar outra lista não ordenada, com suas respectivas listas ordenadas dentro de cada li. Assim:

<ul>

<li><a href="javascript.void(0)">Home</a>

<ul>

<li>Sub-item de home 1</li>

<li>Sub-item de home 2</li>

<li>Sub-item de home 3</li>

</ul>

</li>

<li><a href="javascript.void(0)">Quem Somos</a></li>

<li><a href="javascript.void(0)">Contato</a></li>

</ul>

Repita isso no QuemSomos e no Contato.

O seu arquivo onde colcoará o script em jquery, tente fazer pelo tutorial, se não conseguir, fale que lhe ensino a fazer por aqui.

hm.. curso de webdesign. Cara, pelo menos aqui em jampa, os bons, são caros, e ensina o que você pode aprender só.

Aconselho você entender o HTML, não ir fazendo por aqui e por ali, saber para que serve e como ele funciona, após isso, aprenda da mesma maneira o CSS, também sabendo para que serve e como funciona. Com isso você já poderá fazer sites. Depois disso, aprenda javascript, pois é uma ótima linguagem para começar a aprender lógica de programação. Você começa a saber utilizar variavéis, funções, blocos condicionais, arrays e entre outros, coisas que praticamente a maioria das linguagens utiliza. Você só saberá aprender a sintaxe depois para iniciar o basico de outra linguagem.

Caso deseja ainda fazer um curso, eu não conheco em Curitiba, mas tem online (pago ou gratuito), bem, gratuito tem os da CriarWeb, e pago, lhe aconselho o do iPed e outro muito bom também é o do Bruno Avila (esse é mais salgado).

Vixi! Esse post já tá meio grande... hehe

Vlw

Matheus Matos

Editado por Matheus Matos
Link para o comentário
Compartilhar em outros sites

  • 0

Eu q passei esse tutorial pra élee LALALALALA 8-)

podia falaar Matheeus :$ ?

KKKKKKKKKKKKKK, brincadeira :D

================================================================================

Só um detalhe peqno Matheus, você utilizou:

<li><a href="javascript.void(0)">Home</a></li>

Mas poderia ser simplismente:

<li><a href="#">Home</a></li>

Que funcionará do mesmo jeito :D

Editado por Anderson Ferreira
Link para o comentário
Compartilhar em outros sites

  • 0

Opa... não achava que tinha até direitos autorais para recomendação de vídeo-aula... grande Anderson, sempre com idéias revolucionárias com imaginação fértil para coisas diferentes... seu nanpista! hehe

É vini_loock, como o Anderson falou aí, você poderia ter utilizado um # ao invés de javascript.void(0). Mas, no fim, tanto faz, eu prefiro o javascript.void(0) pois o # é uma âncora para o inicio da página, causando as vezes, um chato 'levantamento' ao inicio da página.. ;)

e pro cara não me matar aí.. a vídeo-aula foi ele que me passou, e quando você for passar para alguém, não precisa dizer que foi eu não hein... CreativeCommos, direitos liberados.. kkkkkkk

Vlw

Matheus Matos

Link para o comentário
Compartilhar em outros sites

  • 0

KKKKKKKKKKKKKK .. nuum tenho direito sobre a víde-aula xD

Faleei só pra zuuar o matheeus mesmo :D

O direitoo é da Video Aula Brasil (ou MXMasteer) ^^

------------------------------------------------------------------------------------------------------------------------------------------------------

Então Matheus, não sabia sobre essa do JS. Gostei, porque realmente ficava subindo pra o inicio da pág com o #

Abraços,

Anderson Ferreira

Link para o comentário
Compartilhar em outros sites

  • 0
bom então vou seguir seus conselhos, achei umas apostilas de css e html.

vou dar uma estudada.

acho que vocês do forum vão se livrar de mim por um bom tempo

KKKKKKK .. q ísso caraa, dependendo de mim, você pode tiraar até 100 dúvidas por dia :D (garanto q 90% delas eu num vou saber responder, mas pra isso existe o Matheus KKKKKK)

Link para o comentário
Compartilhar em outros sites

  • 0

kkk...

que isso vini_loock.. o fórum é para se tirar dúvidas mesmo... ;)

Como o Anderson diz, pode postar 100 ou quantas dúvidas quiser por dia!

Agora responder... dependendo da dúvida.. mas tem o Jonathan também.. ele foda...

cada um passando a bola pro outro.. kkkk :P

Vlw

Matheus Matos

Link para o comentário
Compartilhar em outros sites

  • 0

Cara .. é super simples, te garanto :D

Mas pra criar um, lhe aconselho saber pelo menos HTML

--------------------------------------------------------

Ainda voou fazer um tutorial aq pro fórum, e posto aq :D (se eu não fizer em 1 semana, favor me lembrar poor mensagem pessoal)

FLOW ;D

Link para o comentário
Compartilhar em outros sites

  • 0

nossa desculpem...

nem vi que tinha escrevido "lide".

eu tinha que fazer uma apresentação de slides, nada de web(era no powerpoint mesmo^^).

como não tinha nenhum tema. fiz sobre a primeira coisa que eu vi na internet quando eu abri..."twiter".

mas de qualquer forma obrigado.

ah o curso é de windows. ganhei uma bolsa pra fazer curso de web design, mas primeiro tem que fazer o windows. mas qualquer coisa que eu aprender la ta bom é quase de graça mesmoXD.

até.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...