Skip to content

Instantly share code, notes, and snippets.

@msaulohenrique

msaulohenrique/contato.html

Last active June 18, 2020 05:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msaulohenrique/bfff96fd9d78218bf091cae8cfe675ce to your computer and use it in GitHub Desktop.
Save msaulohenrique/bfff96fd9d78218bf091cae8cfe675ce to your computer and use it in GitHub Desktop.
Download ZIP
Página Dinâmica (modelo básico) - Demo: https://shmspanel.000webhostapp.com/
Raw
contato.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contato - Site</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu a").click(function( e ){ //seleciona todo conteudo do menu
e.preventDefault(); //cancela o evento, no caso, que a nova pagina carregue totalmente. o interesse aqui é só mudar o conteudo da div de content
var href = $( this ).attr('href'); //captura a url da tag a
var idPage = $( this ).attr('id'); //captura o id da tag a
var pageTitle = $( this ).attr('title') + " - Site"; //captura o title da tag a e formata para transforma no titulo de página
$("#content").html("<img src='https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif' />").load( href +" #content"); //atualizar todo o conteudo da div de id content
$('.ativo').removeClass('ativo'); //remove a class ativo do link que estava ativo
$('li a[href="'+ href +'"]').parent().addClass('ativo'); //adiciona a class ativo do link da pagina atual
document.title = pageTitle; //mudar o titulo do site
window.history.pushState(idPage, pageTitle, href); //altera a url do barra de navegação e historico de navegação
});
document.getElementById('#player').play(); //força o autoplay, pois o chrome bloqueou está função
});
</script>
<style>
#menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.ativo {background-color: red;}
</style>
</head>
<body>
<ul id="menu">
<li><a href="index.html" id="home" title="Home">Home</a></li>
<li><a href="fotos.html" id="fotos" title="Fotos">Fotos</a></li>
<li class="ativo" ><a href="contato.html" id="contato" title="Contato">Contato</a></li>
</ul><!-- /menu -->
<div id="content">
<h1>Contato!</h1>
<p>Essa eh a contato desse nome pseudo-site.</p>
</div><!-- /content -->
<audio id="player" autoplay controls>
<source src="https://servidor34-1.brlogic.com:8014/live" type="audio/mp3">
</audio>
</body>
</html>
Raw
fotos.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fotos - Site</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu a").click(function( e ){ //seleciona todo conteudo do menu
e.preventDefault(); //cancela o evento, no caso, que a nova pagina carregue totalmente. o interesse aqui é só mudar o conteudo da div de content
var href = $( this ).attr('href'); //captura a url da tag a
var idPage = $( this ).attr('id'); //captura o id da tag a
var pageTitle = $( this ).attr('title') + " - Site"; //captura o title da tag a e formata para transforma no titulo de página
$("#content").html("<img src='https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif' />").load( href +" #content"); //atualizar todo o conteudo da div de id content
$('.ativo').removeClass('ativo'); //remove a class ativo do link que estava ativo
$('li a[href="'+ href +'"]').parent().addClass('ativo'); //adiciona a class ativo do link da pagina atual
document.title = pageTitle; //mudar o titulo do site
window.history.pushState(idPage, pageTitle, href); //altera a url do barra de navegação e historico de navegação
});
document.getElementById('#player').play(); //força o autoplay, pois o chrome bloqueou está função
});
</script>
<style>
#menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.ativo {background-color: red;}
</style>
</head>
<body>
<ul id="menu">
<li><a href="index.html" id="home" title="Home">Home</a></li>
<li class="ativo"><a href="fotos.html" id="fotos" title="Fotos">Fotos</a></li>
<li><a href="contato.html" id="contato" title="Contato">Contato</a></li>
</ul><!-- /menu -->
<div id="content">
<h1>Fotos!</h1>
<p>Essa eh a fotos desse nome pseudo-site.</p>
</div><!-- /content -->
<audio id="player" autoplay controls>
<source src="https://servidor34-1.brlogic.com:8014/live" type="audio/mp3">
</audio>
</body>
</html>
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home - Site</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu a").click(function( e ){ //seleciona todo conteudo do menu
e.preventDefault(); //cancela o evento, no caso, que a nova pagina carregue totalmente. o interesse aqui é só mudar o conteudo da div de content
var href = $( this ).attr('href'); //captura a url da tag a
var idPage = $( this ).attr('id'); //captura o id da tag a
var pageTitle = $( this ).attr('title') + " - Site"; //captura o title da tag a e formata para transforma no titulo de página
$("#content").html("<img src='https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif' />").load( href +" #content"); //atualizar todo o conteudo da div de id content
$('.ativo').removeClass('ativo'); //remove a class ativo do link que estava ativo
$('li a[href="'+ href +'"]').parent().addClass('ativo'); //adiciona a class ativo do link da pagina atual
document.title = pageTitle; //mudar o titulo do site
window.history.pushState(idPage, pageTitle, href); //altera a url do barra de navegação e historico de navegação
});
document.getElementById('#player').play(); //força o autoplay, pois o chrome bloqueou está função
});
</script>
<style>
#menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.ativo {background-color: red;}
</style>
</head>
<body>
<ul id="menu">
<li class="ativo"><a href="index.html" id="home" title="Home">Home</a></li>
<li><a href="fotos.html" id="fotos" title="Fotos">Fotos</a></li>
<li><a href="contato.html" id="contato" title="Contato">Contato</a></li>
</ul><!-- /menu -->
<div id="content">
<h1>Bem Vindo!</h1>
<p>Essa eh a home desse nome pseudo-site.</p>
</div><!-- /content -->
<audio id="player" autoplay controls>
<source src="https://servidor34-1.brlogic.com:8014/live" type="audio/mp3">
</audio>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment