• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

joaorosa

[RESOLVIDO] Menu horizontal

10 mensagens neste tópico

boas...

eu gostaria de saber se é possível fazer um drop down menu horizontal, em vez de ser vertical como já vi em alguns tutoriais!!

cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pelo que estou a perceber da tua pergunta, quererias um menu em que os botões dos submenus aparececem entre os botões dos menus, correcto?

ser possivel, é, só que terias de ter muito cuidado com a largura que o menu iria ter, porque poderia alterar a largura da página...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pa eu vi um menu com submenu que era feito através de <ul> e <li>, e o menu era lateral...

o que eu pretendo é que o submenu apareça para baixo, tipo tabela, entendes? por exemplo como aparece o menu do site http://www.ua.pt  !

obg, cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Podes, em ASP.net até podes utilizar aqueles menus que já vem c\o compilador e depois fazes um CSS, para melhorar o design e na propriedade do menu Orientation metes se queres vertical ou horizontal.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Aquele menu que lá está feito é com javascript.

Podes  ver aqui um bocado de menu igual aquele, se quiseres faço um mais completo, pois este aqui só tem os 2 primeiros niveis.

http://www.ridelight.net/menu.html

var temp, temp2, cookieArray, cookieArray2, cookieCount;

function initiate(){

  cookieCount=0;

  if(document.cookie){

    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();

    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }
  }

  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

  temp=document.getElementById("containerul");

  for(var o=0;o<temp.getElementsByTagName("li").length;o++){

    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

      temp2				= document.createElement("span");
      temp2.className			= "symbols";
      temp2.style.backgroundImage	= (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(arrow_gray_u.png)":"url(arrow_gray_d.png)"):"url(arrow_gray_d.png)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }

      cookieCount++;

    }
    else{

      temp2	= document.createElement("span");
      temp2.className			= "symbols";
      temp2.style.backgroundImage	= "url(blank.gif)";
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

    }
  }
}


function showhide(el){

  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(arrow_gray_u.png)":"url(arrow_gray_d.png)";

}



function writeCookie(){		// Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

  cookieArray=new Array()

  for(var q=0;q<temp.getElementsByTagName("li").length;q++){

    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

      }
    }

  }

  document.cookie="state="+cookieArray.join(",")+";";//expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

suponho que a intenção de este tópico estar na secção de css seja por o joaorosa querer o menu só em css... se for esse o caso, no link que coloquei anteriormentetem vários exemplos em que basta ver o código fonte para perceber a coisa...

http://www.cssplay.co.uk/menus/final_drop2.html

http://www.cssplay.co.uk/menus/final_drop3.html

http://www.cssplay.co.uk/menus/final_drop5.html

http://www.cssplay.co.uk/menus/padding.html

http://www.cssplay.co.uk/menus/drop_examples.html

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

boas...

o menu pode ser em javascript ou em css, desde que funcione!

e já agora muito obrigado pelas respostas, se surgir alguma dúvida volto a "chatear"

cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Em javascript como ali coloquei em cima é simples até, embora não esteja bem explicado acho que percebes, se quiseres mais detalhadamente eu explico e anexo o source tambem se pretenderes.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

se quiseres ter esse trabalho de explicar melhor, porque também estou a iniciar-me ao javascript...

cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora