Skip to content

Instantly share code, notes, and snippets.

@lealhugui
Last active September 23, 2016 18:11
Show Gist options
  • Save lealhugui/3ef81ab950057714d14a9785362b5fdb to your computer and use it in GitHub Desktop.
Save lealhugui/3ef81ab950057714d14a9785362b5fdb to your computer and use it in GitHub Desktop.
Simple side menu with transition
<!DOCTYPE html>
<html>
<head>
<title>PJAX exemple</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
function loadData(title, uri){
history.pushState(null, title, uri);
$("#pjax-container").html("<div class='text-center'><h2>"+title+"</h2></div>");
overrideA();
}
function overrideA(){
$("a").not(".exclude-pjax").off().on("click", function(e){
e.preventDefault();
loadData($(this).text(), $(this).attr("href"));
});
}
function modalToggle(content){
$("#modal-body").html(content);
$("#modal-container").toggleClass("active");
}
function myInfo(e){
e.preventDefault();
e.stopPropagation();
modalToggle("<a href='http://github.com/lealhugui' target='_blank'>http://github.com/lealhugui</a>");
}
</script>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
}
.text-center {
text-align: center;
}
#modal-container {
height: 50%;
width: 50%;
left: -100%;
top: -100%;
overflow: hidden;
border: 1px solid rgb(204, 204, 204);
position: absolute;
transition: all .4s ease 0s;
}
#modal-title-row {
width: 100%;
height: 30px;
background-color: rgb(194, 214, 214);
overflow: hidden;
}
#modal-title {
width: 80%;
height: 100%;
color: rgb(255, 255, 255);
float: left;
}
#modal-close {
width: 20%;
height: 100%;
float: left;
background-color: rgb(13, 13, 13);
}
#modal-container.active{
top: 25%;
left: 25%;
}
#menu{
text-align: center;
width: 100%;
height: 10%;
}
#pjax-container{
width: 100%;
height: 90%;
}
</style>
</head>
<body>
<div id="menu">
<div style="float:left;"><a href="#/route1"><h2>Route 1</h2></a></div>
<div style="float:left; padding-left:5px;"><a href="#/route2"><h2>Route 2</h2></a></div>
<div style="float:left; padding-left:5px;" ><a href="" onclick="myInfo(event)" class="exclude-pjax"><h2>My Info</h2></a></div>
</div>
<div id="pjax-container">
<div class='text-center'><h2>Index</h2></div>
</div>
<div id="modal-container">
<div id="modal-title-row">
<div id="modal-title">Teste de Modal</div>
<div id="modal-close"></div>
</div>
<div id="modal-body">
</div>
</div>
<script type="text/javascript">
window.onpopstate=function(event){
loadData(document.title, document.location);
};
overrideA();
$("#modal-close").off().on("click", function(e){
e.preventDefault();
modalToggle();
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment