Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

João Augusto

[Resolvido] Menu com submenu na vertical

Por , em Desenvolvimento frontend

Recommended Posts

João Augusto    0

João Augusto
Postado

Fala galera beleza???

Tava precisando fazer um menu em css com os submenus tb na vertical.Ou seja quando o usuário clicar em cima do root ele iria abrir os submenus na vertical e os rotts que estiverem abaixo eles desceriam para os submenus aparecerem...

Eu não tenho a miníma idéia de como fazer isso com css,pois com o flash eu tenho alguns problemas no servidor ai o ideal seria realmente usar css...

Agradeceria imensamente se alguém puder me ajudar nisso....

vlw.......

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Dá uma olhada nas soluções deste menu:

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1369661

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Augusto    0

João Augusto
Postado
Willian,o tópico ficou mt bom mais ele não do tipo de menu que eu to querendo,o que realmente eu quero é um menu na horizontal pra ficar no canto da tela e os submenus fiquem na vertical tb.Quando os menus fossem clicados os sub apareceriam embaixo dos root.

Se você puder me ajudar nisso agradeceria imensamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Augusto    0

João Augusto
Postado

Achei um menu de exemplo,o do site do majuor. O que fica no canto esquerdo da tela....

É exatamente aquele que eu queria fazer....

será que alguém saberia me ajudar??

vlw.................

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

No canto esquerdo eu não achei nenhum. Achei aquele no lado esquerdo.

 

Se for esse, procure por menu accordion.

 

Se deseja que o menu fique fixo no canto da tela, use position: fixed, lembrando que ela não funciona no Internet Explorer 6.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Augusto    0

João Augusto
Postado

Ai consegui um script mt bom,ele funciona em todos os navegadores e faz tudo o que eu queria.Obrigado pela ajuda ela foi de grande valia pois pesquisei pelo nome do menu que você me passou e encontrei....

vlw...

Segue o script ai....

 

<!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>Accordion menu (menu sanfona)</title>
<script type="text/javascript">
var ContentHeight = 200;
var TimeToSlide = 250.0;

var openAccordion = '';

function runAccordion(index)
{
  var nID = "Accordion" + index + "Content";
  if(openAccordion == nID)
    nID = '';
   
  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
      + openAccordion + "','" + nID + "')", 33);
 
  openAccordion = nID;
}
</script>
<script language="javascript">
function animate(lastTick, timeLeft, closingId, openingId)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var opening = (openingId == '') ? null : document.getElementById(openingId);
  var closing = (closingId == '') ? null : document.getElementById(closingId);
 
  if(timeLeft <= elapsedTicks)
  {
    if(opening != null)
      opening.style.height = ContentHeight + 'px';
   
    if(closing != null)
    {
      closing.style.display = 'none';
      closing.style.height = '0px';
    }
    return;
  }
 
  timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

  if(opening != null)
  {
    if(opening.style.display != 'block')
      opening.style.display = 'block';
    opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }
 
  if(closing != null)
    closing.style.height = newClosedHeight + 'px';

  setTimeout("animate(" + curTick + "," + timeLeft + ",'"
      + closingId + "','" + openingId + "')", 33);
}
</script>
</head>
<body>
<style type="text/css">
.AccordionTitle, .AccordionContent, .AccordionContainer
{
  position:relative;
  width:200px;
}

.AccordionTitle
{
  height:20px;
  overflow:hidden;
  cursor:pointer;
  font-family:Arial;
  font-size:8pt;
  font-weight:bold;
  vertical-align:middle;
  text-align:center;
  background-repeat:repeat-x;
  display:table-cell;
  background-image:url('title_repeater.jpg');
  -moz-user-select:none;
}

.AccordionContent
{
  height:0px;
  overflow:auto;
  display:none;
}

.AccordionContainer
{
  border-top: solid 1px #C1C1C1;
  border-bottom: solid 1px #C1C1C1;
  border-left: solid 2px #C1C1C1;
  border-right: solid 2px #C1C1C1;
}
</style>
<div id="AccordionContainer" class="AccordionContainer">

  <div onclick="runAccordion(1);">
    <div class="AccordionTitle" onselectstart="return false;">
      Accordion 1
    </div>
  </div>
  <div id="Accordion1Content" class="AccordionContent">
    I Am Accordion 1.
  </div>

  <div onclick="runAccordion(2);">
    <div class="AccordionTitle" onselectstart="return false;">
      Accordion 2
    </div>
  </div>
  <div id="Accordion2Content" class="AccordionContent">
    I Am Accordion 2.
  </div>

  <div onclick="runAccordion(3);">
    <div class="AccordionTitle" onselectstart="return false;">
      Accordion 3
    </div>
  </div>
  <div id="Accordion3Content" class="AccordionContent">
    I Am Accordion 3.
  </div>

  <div onclick="runAccordion(4);">
    <div class="AccordionTitle" onselectstart="return false;">
      Accordion 4
    </div>
  </div>
  <div id="Accordion4Content" class="AccordionContent">
    I Am Accordion 4.
  </div>

  <div onclick="runAccordion(5);">
    <div class="AccordionTitle" onselectstart="return false;">
      Accordion 5
    </div>
  </div>
  <div id="Accordion5Content" class="AccordionContent">
    I Am Accordion 5.
  </div>

</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito