16 replies to this topic

[CaptainZap]

Gostaria de saber como faço para que ao clicar em algum item do menu, aparecer o submenu (se houver) do item clicado. PS.:Aparecer o submenu embaixo aonde indica a seta maior.



Código:

<div class="cleared reset-box"></div>
    <dl id="global-navigation">
    <dd id="ativo"><a href="#">In&iacute;cio</a></dd>
    <dd id="nav-live-travel-news"><a href="#">Multas</a></dd>
    <dd id="nav-getting-around"><a href="#">Projetos</a></dd>
    <dd id="nav-tickets"><a href="#">Tr&acirc;sito</a></dd>
    <dd id="nav-tickets"><a href="#">Transporte</a></dd>
    <dd id="nav-pub-tec"><a href="#">Publica&ccedil;&otilde;es T&eacute;cnicas</a></dd>
    <dd id="nav-tickets"><a href="#">Parceiros</a></dd>
</dl></ul>

Edição feita por: CaptainZap, 07/05/2012, 14:50.

[Allex Severino]

Para fazer com click você precisará usar jquery, especificamente a função .click. Se ao desenvolver aparecer dúvidas, poste o código completo do menu e o seu javascript.

[CaptainZap]

Para fazer com click você precisará usar jquery, especificamente a função .click. Se ao desenvolver aparecer dúvidas, poste o código completo do menu e o seu javascript.

amigo, realmente vim aqui por entendo muito pouco sobre javascript, jquery, etc..
Sei que tenho que já ter pronto o submenu que irá descer no caso de clicar em cima; porém só sei exatamente isso.

[Allex Severino]

Então poste o menu para ver em que podemos ajudar.

[CaptainZap]

Então poste o menu para ver em que podemos ajudar.

amigo o html é esse:

<dl id="menu-principal">
    <dd id="inicio"><a href="#">In&iacute;cio</a></dd>
    <dd id="menu-multas"><a href="#">Multas</a>
    		<dl class="submenu">
            	<dt><a href="#">Submenu1</a></li>
          		<dt><a href="#">Submenu2</a></li>
            	<dt><a href="#">Submenu3</a></li>
            	<dt><a href="#">Submenu4</a></li>
    	</dl>
    </dd>
    <dd id="projetos"><a href="#">Projetos</a></dd>
    <dd id="transito"><a href="#">Tr&acirc;sito</a></dd>
    <dd id="transp"><a href="#">Transporte</a></dd>
    <dd id="pubtec"><a href="#">Publica&ccedil;&otilde;es T&eacute;cnicas</a></dd>
    <dd id="parceiros"><a href="#">Parceiros</a></dd>
</dl>

tb precisa do css? obg.

Edição feita por: CaptainZap, 15/05/2012, 13:30.

[Allex Severino]

Onde for para ter o sub-menu adicione uma class submenu e itens_submenu onde for o submenu. Feito isso passe para o js.

<script type="text/javascript">
$(".submenu").click(function(){
$(".itens_submenu").show('slow');
});
</script>

Vamos ir aos poucos para ir entendendo o processo.

[CaptainZap]

Amigo to conseguindo fazer algo mais ou menos como eu quero.
Só que estou com alguns problemas..

1.O site já abre com o submenu aberto.


2.Com o mouse em cima do menu multas, onde há submenus realmente.
[img]http://www.uploadeimagem.net/upload/f6d2ada6.png[img]

3.Com o mouse em cima de um submenu linkável.
[img]http://www.uploadeimagem.net/upload/e4b51197.png[img]


Aí vão os codigos:
HTML

<dl id="menu-principal">
    <dd id="inicio"><a href="#">In&iacute;cio</a></dd>
    <dd id="menu-multas"><a href="#">Multas</a>
    		<dl class="submenu">
            	<dt><a href="#">Submenu1</a></dt>
          		<dt><a href="#">Submenu2</a></dt>
            	<dt><a href="#">Submenu3</a></dt>
            	<dt><a href="#">Submenu4</a></dt>
    	</dl>
    </dd>
    <dd id="projetos"><a href="#">Projetos</a></dd>
    <dd id="transito"><a href="#">Tr&acirc;sito</a></dd>
    <dd id="transp"><a href="#">Transporte</a></dd>
    <dd id="pubtec"><a href="#">Publica&ccedil;&otilde;es T&eacute;cnicas</a></dd>
    <dd id="parceiros"><a href="#">Parceiros</a></dd>
</dl>

SCRIPT:

$(function(){
   $("#menu-principal a").mouseover(function(){
      var menu = $(this).parent().children('.submenu');
      var submenu =  $(this).parent().parent();
      
      if(menu.length > 0 && menu.is(':hidden')){
         $("#menu-principal a").removeClass('ativo');
         $(this).addClass('ativo');
         $('.submenu').slideUp();
         menu.slideDown();
      }
      if(!submenu.hasClass('submenu') && menu.length == 0){
         $("#menu-principal a").removeClass('ativo');
         $(this).addClass('ativo');

         $('.submenu').slideUp();
      }
      
   });
});

CSS:

/* MENU E SUBMENU */
#menu-principal {
    background: url("images/global-nav-bg.gif") repeat-x 150px 0;
	height:55px;
    margin-left:0px;
	margin-right:0;
	margin-top:0;
	padding-left:150px;	
}
#menu-principal dd {
    background: url("images/global-nav-bg.gif") repeat-x;
    background-position: 106px 0;
    line-height: 1.2em;
    float:left;
	margin:0;
}
/*Right-most nav items background image */
#menu-principal dd#nav-home{
    width: 107px;
	
}

#menu-principal dd#incio{
	width: 107px;
	background: url("images/global-nav-selected-3.gif") repeat-x 106px 0;
}
dd#menu-multas {
	text-decoration:underline;
	line-height: 1.2em;
	float:left;
	margin:0;
	display:inline;
	margin-bottom: 19px;
}
dd#menu-multas a
{
	background:none;
	text-decoration:none;
}
dd#menu-multas a:hover
{
   text-decoration:underline;
   background: url("images/global-nav-bg-dark.gif");
   background-position: 106px 0;
   line-height: 1.2em;
   float:left;
   margin-bottom:10px;
   max-height:100%;
   position:static;
   }
	
dl#menu-principal dt{
	background:none;
   text-align:justify;
   width:107px;
   color: #000;
   height: 3px;
   padding: 20px 0px;
   margin-bottom: 19px;
   font-family:Verdana, Geneva, sans-serif;
   text-decoration:none;
}
dl#menu-principal dt a:hover,
dl#menu-principal dt a.submenu
{
   background:none;
   text-align:justify;
   width:107px;
   color: #000;
   display:block;
   width: 20px;
   height: 0px;
   padding: 20px 12px;
   margin-bottom: 19px;
   font-family:Verdana, Geneva, sans-serif;
   text-decoration:underline;	
}
dl.menu-multas dt a:hover
{
   background:none;
   text-align:justify;
   width:107px;
   color: #000;
   display:block;
   width: 20px;
   height: 0px;
   padding: 20px 12px;
   margin-bottom: 19px;
   font-family:Verdana, Geneva, sans-serif;
   text-decoration:underline;
}
dd#ativo a:hover{
	width:107px;
	background: url(images/global-nav-selected-3.gif) repeat-x 106px 0;
	color: #000;
    text-align: center;
    display:block;
    width: 2px;
    height: 30px;
    padding: 14px 12px;
    margin-bottom: 19px;
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:underline;
	
}

/* Basic global nav link style */ 
#menu-principal a{
    color: #000;
    text-align: center;
    display:block;
    width: 82px;
    height: 30px;
    padding: 14px 12px;
    margin-bottom: 19px;
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:none;
}
#menu-principal a:hover{
	text-decoration:underline;
	background-image:url("images/global-nav-bg-dark.gif");
    background-position: 106px 0;
    line-height: 1.2em;
    float:left;
	margin:0;
}
/* Adjust single-line global nav items to centre them vertically */
#nav-home a,
#transito a,
{
    padding-top: 15px;
    height: 20px;
}  

#pubtec a{
	padding-top:8px;
	height: 20px;
}
/* Selected global nav item styles */
.home #nav-home     { background: #2F93D2 url("images/global-nav-selected-3.gif") no-repeat; }
.home #nav-home a   { font-weight: bold; color: #FFF }
/* All but the home page link need tweaking */
/* The selected link is one pixel wider */
/* The link to the left is one pixel narrower to compensate */
/* This is to allow the selected link to have both a left and right border */
.live-travel-news #menu-principal dd#menu-multas,
.getting-around #menu-principal dd#projetos,
.tickets #menu-principal dd#transito,
.road-users #menu-principal dd#nav-road-users,
.corporate #menu-principal dd#nav-corporate,
.business-and-partners #menu-principal dd#nav-business-and-partners{
    background: #2F93D2 url("images/global-nav-selected-4.gif") no-repeat;
}

.live-travel-news dt#menu-multas{
	background:none;
	width: 100%;
	height:20px;
}

.live-travel-news dt#menu-multas a,
{
	background:none;
	width: 100%;
	height:20px;
}

.live-travel-news #menu-principal dd#nav-home a,
.getting-around #menu-principal dd#menu-multas a,
.tickets #menu-principal dd#projetos a,
.road-users #menu-principal dd#transito a,
.corporate #menu-principal dd#nav-road-users a
.business-and-partners #menu-principal dd#nav-corporate a{
    width: 81px;
	height:20px;
}

Bom há muita coisa de errado:
1.A página logo quando iniciada já aparece com submenu aberto sem o mouse estar em cima do menu Multas;
2.O submenu está de forma vertical e não horizontal. Ex.: (submenu1 | submenu2 | submenu3 | etc);

sou mt noob mesmo ):

Amigo to conseguindo fazer algo mais ou menos como eu quero.
Só que estou com alguns problemas..

1.O site já abre com o submenu aberto.
[img]http://i.imgur.com/GQvts.png[/img]

2.Com o mouse em cima do menu multas, onde há submenus realmente.
[img]http://www.uploadeimagem.net/upload/f6d2ada6.png[img]

3.Com o mouse em cima de um submenu linkável.
[img]http://www.uploadeimagem.net/upload/e4b51197.png[img]


Aí vão os codigos:
HTML

<dl id="menu-principal">
    <dd id="inicio"><a href="#">In&iacute;cio</a></dd>
    <dd id="menu-multas"><a href="#">Multas</a>
    		<dl class="submenu">
            	<dt><a href="#">Submenu1</a></dt>
          		<dt><a href="#">Submenu2</a></dt>
            	<dt><a href="#">Submenu3</a></dt>
            	<dt><a href="#">Submenu4</a></dt>
    	</dl>
    </dd>
    <dd id="projetos"><a href="#">Projetos</a></dd>
    <dd id="transito"><a href="#">Tr&acirc;sito</a></dd>
    <dd id="transp"><a href="#">Transporte</a></dd>
    <dd id="pubtec"><a href="#">Publica&ccedil;&otilde;es T&eacute;cnicas</a></dd>
    <dd id="parceiros"><a href="#">Parceiros</a></dd>
</dl>

SCRIPT:

$(function(){
   $("#menu-principal a").mouseover(function(){
      var menu = $(this).parent().children('.submenu');
      var submenu =  $(this).parent().parent();
      
      if(menu.length > 0 && menu.is(':hidden')){
         $("#menu-principal a").removeClass('ativo');
         $(this).addClass('ativo');
         $('.submenu').slideUp();
         menu.slideDown();
      }
      if(!submenu.hasClass('submenu') && menu.length == 0){
         $("#menu-principal a").removeClass('ativo');
         $(this).addClass('ativo');

         $('.submenu').slideUp();
      }
      
   });
});

CSS:

/* MENU E SUBMENU */
#menu-principal {
    background: url("images/global-nav-bg.gif") repeat-x 150px 0;
	height:55px;
    margin-left:0px;
	margin-right:0;
	margin-top:0;
	padding-left:150px;	
}
#menu-principal dd {
    background: url("images/global-nav-bg.gif") repeat-x;
    background-position: 106px 0;
    line-height: 1.2em;
    float:left;
	margin:0;
}
/*Right-most nav items background image */
#menu-principal dd#nav-home{
    width: 107px;
	
}

#menu-principal dd#incio{
	width: 107px;
	background: url("images/global-nav-selected-3.gif") repeat-x 106px 0;
}
dd#menu-multas {
	text-decoration:underline;
	line-height: 1.2em;
	float:left;
	margin:0;
	display:inline;
	margin-bottom: 19px;
}
dd#menu-multas a
{
	background:none;
	text-decoration:none;
}
dd#menu-multas a:hover
{
   text-decoration:underline;
   background: url("images/global-nav-bg-dark.gif");
   background-position: 106px 0;
   line-height: 1.2em;
   float:left;
   margin-bottom:10px;
   max-height:100%;
   position:static;
   }
	
dl#menu-principal dt{
	background:none;
   text-align:justify;
   width:107px;
   color: #000;
   height: 3px;
   padding: 20px 0px;
   margin-bottom: 19px;
   font-family:Verdana, Geneva, sans-serif;
   text-decoration:none;
}
dl#menu-principal dt a:hover,
dl#menu-principal dt a.submenu
{
   background:none;
   text-align:justify;
   width:107px;
   color: #000;
   display:block;
   width: 20px;
   height: 0px;
   padding: 20px 12px;
   margin-bottom: 19px;
   font-family:Verdana, Geneva, sans-serif;
   text-decoration:underline;	
}
dl.menu-multas dt a:hover
{
   background:none;
   text-align:justify;
   width:107px;
   color: #000;
   display:block;
   width: 20px;
   height: 0px;
   padding: 20px 12px;
   margin-bottom: 19px;
   font-family:Verdana, Geneva, sans-serif;
   text-decoration:underline;
}
dd#ativo a:hover{
	width:107px;
	background: url(images/global-nav-selected-3.gif) repeat-x 106px 0;
	color: #000;
    text-align: center;
    display:block;
    width: 2px;
    height: 30px;
    padding: 14px 12px;
    margin-bottom: 19px;
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:underline;
	
}

/* Basic global nav link style */ 
#menu-principal a{
    color: #000;
    text-align: center;
    display:block;
    width: 82px;
    height: 30px;
    padding: 14px 12px;
    margin-bottom: 19px;
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:none;
}
#menu-principal a:hover{
	text-decoration:underline;
	background-image:url("images/global-nav-bg-dark.gif");
    background-position: 106px 0;
    line-height: 1.2em;
    float:left;
	margin:0;
}
/* Adjust single-line global nav items to centre them vertically */
#nav-home a,
#transito a,
{
    padding-top: 15px;
    height: 20px;
}  

#pubtec a{
	padding-top:8px;
	height: 20px;
}
/* Selected global nav item styles */
.home #nav-home     { background: #2F93D2 url("images/global-nav-selected-3.gif") no-repeat; }
.home #nav-home a   { font-weight: bold; color: #FFF }
/* All but the home page link need tweaking */
/* The selected link is one pixel wider */
/* The link to the left is one pixel narrower to compensate */
/* This is to allow the selected link to have both a left and right border */
.live-travel-news #menu-principal dd#menu-multas,
.getting-around #menu-principal dd#projetos,
.tickets #menu-principal dd#transito,
.road-users #menu-principal dd#nav-road-users,
.corporate #menu-principal dd#nav-corporate,
.business-and-partners #menu-principal dd#nav-business-and-partners{
    background: #2F93D2 url("images/global-nav-selected-4.gif") no-repeat;
}

.live-travel-news dt#menu-multas{
	background:none;
	width: 100%;
	height:20px;
}

.live-travel-news dt#menu-multas a,
{
	background:none;
	width: 100%;
	height:20px;
}

.live-travel-news #menu-principal dd#nav-home a,
.getting-around #menu-principal dd#menu-multas a,
.tickets #menu-principal dd#projetos a,
.road-users #menu-principal dd#transito a,
.corporate #menu-principal dd#nav-road-users a
.business-and-partners #menu-principal dd#nav-corporate a{
    width: 81px;
	height:20px;
}

Bom há muita coisa de errado:
1.A página logo quando iniciada já aparece com submenu aberto sem o mouse estar em cima do menu Multas;
2.O submenu está de forma vertical e não horizontal. Ex.: (submenu1 | submenu2 | submenu3 | etc);

Ah, e desiste do .click e to usando o mouseover mesmo ;s
sou mt noob mesmo ):

assim? nao ta dando certo nao, ja tirei o outro script e nao vai tb D:

<script type="text/javascript">
$(".submenu1").click(function(){
$(".itens_submenu").show('slow');
});
</script>
    <dl id="menu-principal">
    <dd id="inicio"><a href="#">In&iacute;cio</a></dd>
    <dd class="submenu1"><a href="#">Multas</a>
    		<dl class="submenu">
            	<dt class="itens_submenu"><a href="#">Submenu1</a></dt>
          		<dt class="itens_submenu"><a href="#">Submenu2</a></dt>
            	<dt class="itens_submenu"><a href="#">Submenu3</a></dt>
            	<dt class="itens_submenu"><a href="#">Submenu4</a></dt>
    	</dl>
    </dd>

Edição feita por: CaptainZap, 15/05/2012, 15:49.

[Allex Severino]

Para já iniciar o submenu fechado insira isso no css:

.submenu { display:none; }

[CaptainZap]

Para já iniciar o submenu fechado insira isso no css:

.submenu { display:none; }

Sim!Feito.

[Allex Severino]

Agora ficou ok o menu?

[CaptainZap]

Agora ficou ok o menu?

Falta a parte do submenu ficar na horizontal e nao na vertical ;/
pedir ajuda no outro fórum agora né? ahhahaha D=

Edição feita por: CaptainZap, 15/05/2012, 16:37.

[Allex Severino]

Tente assim:

.submenu dt { float: left; }

[CaptainZap]

Tente assim:

.submenu dt { float: left; }

QUASE LÁ AMIGO! só que agora dá uma olhada como ficou..esta deslocando o menu

Edição feita por: CaptainZap, 15/05/2012, 16:46.

[Allex Severino]

O código não está preparado para isso. Estou fazendo umas observações aqui.

[CaptainZap]

O código não está preparado para isso. Estou fazendo umas observações aqui.

Po amigo, valeu mesmo, você nao sabe o quanto está me ajudando!