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, amigos.
Estou com um probleminha, e gostaria de pedir a ajuda de vocês. Entrei um site que dá exemplos de menus dropdown responsivos, porém, mesmo com os códigos liberados pra gente poder usar, não estou conseguindo fazer funcionar o javascript. Consegui fazer o link para o arquivo css sem problemas, mas quando faço o link para o arquivo javascript, não funciona. Será que tenho que colocar algum nome específico no arquivo?
Vou disponibilizar o link da página que tem o código original. Lá tem os 3 arquivos: HTML, CSS e JS:
https://www.smartmenus.org/about/themes/#demos-gallery
Se alguém puder me dar essa força, agradeço muito.
Forte abraço a todos.
Marco Carvalho
Boa tarde, Jorge.
Muito obrigado pela atenção.
Só uma pergunta: nesse caso então, só com os 3 códigos disponibilizados (html, css e js) eu não vou conseguir fazer ele funcionar de forma alguma? É isso?
Obrigado!
>
5 minutos atrás, Maccarv disse:
Boa tarde, Jorge.
Muito obrigado pela atenção.
Só uma pergunta: nesse caso então, só com os 3 códigos disponibilizados (html, css e js) eu não vou conseguir fazer ele funcionar de forma alguma? É isso?
Obrigado!
Acesse e veja o código em ação:
https://jsfiddle.net/vadikom/oxe40pat/?utm_source=website&utm_medium=embed&utm_campaign=oxe40pat
Se tiver algum problema, informe!
Sim. Mas pra funcionar, não é só eu criar os 3 arquivos (html, css e js), com seus respectivos códigos, e fazer o link no html para o css (esse funcionou) e para js (esse que não funcionou)?
Ou precisa de algo mais para funcionar?
Desde já, te agradeço novamente pela atenção e lhe peço desculpas pelo incômodo e falta de conhecimento.
>
1 minuto atrás, Maccarv disse:
Sim. Mas pra funcionar, não é só eu criar os 3 arquivos (html, css e js), com seus respectivos códigos, e fazer o link no html para o css (esse funcionou) e para js (esse que não funcionou)?
Ou precisa de algo mais para funcionar?
Desde já, te agradeço novamente pela atenção e lhe peço desculpas pelo incômodo e falta de conhecimento.
Verifique se no arquivo que você está criando, você está colocando o script do jquery no documento html. Se possível, acesse a página que está testando, abra o prompt de comando e veja se há algum erro.
Eu coloquei isso aqui no cabeçalho:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/comportamento.js"></script>
</head>
<body>
<nav class="main-nav" role="navigation"> ........>
1 minuto atrás, Maccarv disse:
Eu coloquei isso aqui no cabeçalho:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/comportamento.js"></script>
</head>
<body>
<nav class="main-nav" role="navigation"> ........
Adicione o link a seguir antes do fechamento da tag body :
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>Eu criei um arquivo html (header.html), um arquivo css (estilo.css) e um arquivo javascript (comportamento.js). E no header.html, fiz o que postei pra você.
Jorge, fiz o que você me indicou, mas não deu certo ainda.
Se não se incomodar, vou colocar o código inteiro.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/comportamento.js"></script>
</head>
<body>
<nav class="main-nav" role="navigation">
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<h2 class="nav-brand"><a href="#">Marco Carvalho</a></h2>
<!-- Sample menu definition -->
<ul id="main-menu" class="sm sm-blue">
<li><a href="http://www.smartmenus.org/">Home</a></li>
<li><a href="http://www.smartmenus.org/about/">About</a>
<ul>
<li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
<li><a href="http://www.smartmenus.org/about/themes/">Demos + themes</a></li>
<li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
<ul>
<li><a href="http://vadikom.com/about/">About Vadikom</a></li>
<li><a href="http://vadikom.com/projects/">Projects</a></li>
<li><a href="http://vadikom.com/services/">Services</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/download/">Download</a></li>
<li><a href="http://www.smartmenus.org/support/">Support</a>
<ul>
<li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
<li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
<li><a href="#">Sub test</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="disabled">Disabled menu item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="current">A 'current' class item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">subMenusMinWidth</a></li>
<li><a href="#">10em</a></li>
<li><a href="#">forced.</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/contact/">Contact</a></li>
</ul>
</nav>
<div class="demo-text">
<p>Demonstrates a complete navbar including a mobile view menu toggle button (<a href="http://www.smartmenus.org/docs/#menu-toggle-button">related docs</a>).</p>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</body>
</html>>
1 minuto atrás, Maccarv disse:
Jorge, fiz o que você me indicou, mas não deu certo ainda.
Se não se incomodar, vou colocar o código inteiro.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/comportamento.js"></script>
</head>
<body>
<nav class="main-nav" role="navigation">
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<h2 class="nav-brand"><a href="#">Marco Carvalho</a></h2>
<!-- Sample menu definition -->
<ul id="main-menu" class="sm sm-blue">
<li><a href="http://www.smartmenus.org/">Home</a></li>
<li><a href="http://www.smartmenus.org/about/">About</a>
<ul>
<li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
<li><a href="http://www.smartmenus.org/about/themes/">Demos + themes</a></li>
<li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
<ul>
<li><a href="http://vadikom.com/about/">About Vadikom</a></li>
<li><a href="http://vadikom.com/projects/">Projects</a></li>
<li><a href="http://vadikom.com/services/">Services</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/download/">Download</a></li>
<li><a href="http://www.smartmenus.org/support/">Support</a>
<ul>
<li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
<li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
<li><a href="#">Sub test</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="disabled">Disabled menu item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="current">A 'current' class item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">subMenusMinWidth</a></li>
<li><a href="#">10em</a></li>
<li><a href="#">forced.</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/contact/">Contact</a></li>
</ul>
</nav>
<div class="demo-text">
<p>Demonstrates a complete navbar including a mobile view menu toggle button (<a href="http://www.smartmenus.org/docs/#menu-toggle-button">related docs</a>).</p>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</body>
</html>
E os arquivos CSS e JS que está usando? Cole o código que você está usando (CSS/JS/HTML) no site [https://jsfiddle.net/](https://jsfiddle.net/) , clique em salvar e me passe o link.Salvei e criou esse link:
@Maccarv repare que a requisição está sendo bloqueada por não conter SSL.
Clique em 'Edit in JSFiddle' e veja o menu funcionando normalmente.