Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia,
Estava tentando adaptar um código que encontrei na internet, porém não estou conseguindo fazer.
Gostaria de redimensionar a "seta" que aparece logo quando se "clica" nos sub-menus queria deixar do tamanho que está o menu porém não estou conseguindo fazer. Alguém poderia me dar uma ajuda?
Código HTML:
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>Cabeçalho</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Principal</span></a></li>
<li class='active has-sub'><a href='#'><span>Produtos</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Produto 1</span></a>
<ul>
<li><a href='#'><span>Sub Produto</span></a></li>
<li class='last'><a href='#'><span>Sub Produto</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Produto 2</span></a>
<ul>
<li><a href='#'><span>Sub Produto</span></a></li>
<li class='last'><a href='#'><span>Sub Produto</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Sobre</span></a></li>
<li class='last'><a href='#'><span>Contato</span></a></li>
</ul>
</div>
</body>
<html>Javascript:
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
});
} )( jQuery );CSS:
@import url([http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300](http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300));
#cssmenu {
position: relative;
margin: 0;
font-family: 'Roboto Condensed';
line-height: 1;
width: 200px;
}
.align-right {
float: right;
} margin: 0;
padding: 0;
list-style: none;
display: block;
} position: relative;
margin: 0;
padding: 0;
} text-decoration: none;
cursor: pointer;
} color: #dddddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: #222222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
} border-top-left-radius: 3px;
border-top-right-radius: 3px;
} border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000000;
} background: #151515;
color: #ffffff;
} content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
} content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -2px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
} content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #dddddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
} border-top-color: #ffffff;
} opacity: 1;
bottom: -13px;
} opacity: 1;
bottom: -12px;
} display: none;
} border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
} background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #dddddd;
color: #777777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
} padding-top: 18px;
} border: 0;
} background: #e4e4e4;
color: #666666;
} border-top: 13px solid #dddddd;
} border-top: 13px solid #e4e4e4;
} padding-left: 30px;
} top: 18.5px;
border-width: 6px;
border-top-color: #777777;
} border-top-color: #666666;
}Carregando comentários...