[RESOLVIDO] Menu horizontal

[joaorosa]

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

[marinheiro]

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

[joaorosa]

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

[mAd]

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.

[marinheiro]

vai a http://www.cssplay.co.uk/menus/index.html e tens lá variadissimos modelos de menus, todos eles feitos em css 🙂

[Ridelight]

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();
}

[marinheiro]

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

[joaorosa]

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

[Ridelight]

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.

[joaorosa]

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

cps