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í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âsito</a></dd>
<dd id="transp"><a href="#">Transporte</a></dd>
<dd id="pubtec"><a href="#">Publicações Té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í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âsito</a></dd>
<dd id="transp"><a href="#">Transporte</a></dd>
<dd id="pubtec"><a href="#">Publicações Té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í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.