Pobleminha com código Jquery
Pessoal to com um pobleminha com um código Jquery, declarei a função
mais não está dando certo
HTML
<!DOCTYPE html>
<html>
<head>
<title>Menus Responsivos</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu"> <i class="fa fa-bars" aria-hidden="true"></i> </label>
<nav class="menu">
<ul>
<li><a href="#">Home</i></a></li>
<li><a href="#">Produtos <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="submenu">
<li><a href="#">Hospedagem de Sites</i></a></li>
<li><a href="#">Hospedagem Wordpress</i></a></li>
<li><a href="#">Registro de Domínio</i></a></li>
<li><a href="#">Servidor Dedicado</i></a></li>
<li><a href="#">E-mail Exchange</i></a></li>
</ul>
</li>
<li><a href="#">Sobre <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="submenu">
<li><a href="#">Sobre nós</i></a></li>
<li><a href="#">Parceiros</i></a></li>
<li><a href="#">Blog</i></a></li>
</ul>
</li>
<li><a href="#">FAQS</a></li>
</ul>
</nav>
</header>
<!-- JQUERY -->
<script>
$(".submenu").click(function(){
$(this).children("ul").slideToggle();
})
</script>
</body>
</html>
O Jquery está bem no finalzinho mais não está dando certo
**CSS **/ RESET /
* {margin: 0; padding: 0; font-size: 100%; font-family: 'Open Sans', sans-serif; font-weight: normal; box-sizing: border-box; border: none;
outline: none;}
body {background-color: #fff;}
img {max-width: 100%;}
ul {list-style: none;}
a {text-decoration: none;}
/ MENU /
header {height: 50px; background-color: #CE852A;}
header label {font-size: 2.2em; color: #fff; cursor: pointer; display: none;} #btn-menu {display: none;}
.menu ul {background-color: #CE852A; display: flex;}
.menu ul ul {display: none;}
.menu li {margin-left: 50px;}
.menu a {display: block; padding: 15px 20px; color: #fff; font-size: 1.1em;}
.menu a:hover {background: rgba(0,0,0,0.3);}
.menu i {margin-left: 3px;}
.menu ul ul li {margin-left: 0px;}
.menu ul ul li a {padding: 15px 12px; font-size: 1.1em;}
.menu ul li:hover ul {display: block; position: absolute;}
@media screen and (max-width: 768px) {
header label {display: block; padding: 1px 8px;}
.menu {position: absolute; width: 100%; transform: translateX(-100%); transition: all 0.3s;}
.menu ul ul {width: 80%;}
.menu ul {display: block; background: #555;}
.menu ul li:hover ul {display: none; position: static;}
.menu i {position: absolute; right: 2%;}
.menu ul li {margin-left: 0px;}
#btn-menu:checked ~ .menu {transform: translateX(0%);}
}
Discussão (4)
Carregando comentários...