demo.htm
<!DOCTYPE html>
<html>
<head>
<title>relative-dir.js</title>
<style>
.container {
position:relative;
}
.menu,
.content {
padding:10px;
}
.menu {
background-color:#60FF60;
width:170px;
position:absolute;
}
.content {
background-color:#6060FF;
color:#AAA;
margin-left:200px;
}
@media screen and (max-width:599px) {
.menu {
position:static;
width:auto;
}
.content {
margin-left:0;
}
}
.relative-dir {
font-weight:bold;
color:#FFF;
}
</style>
</head>
<body>
<div class="container">
<nav class="menu">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About</li>
</ul>
</nav>
<section class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse convallis felis sed lacus dictum nec feugiat justo pretium. Donec accumsan, nibh ut dictum malesuada, massa neque ornare ligula, et volutpat arcu sapien suscipit lectus. Vestibulum molestie porta ligula, vitae placerat erat elementum ut. Nam orci turpis, mattis non lobortis ut, convallis at lorem. Nulla auctor ultrices mi id dictum. Phasellus a leo vel ante semper tincidunt. In id tempus massa.</p>
<p>Vestibulum nibh enim, rutrum at aliquet id, pellentesque in diam. Ut nisl mi, ornare eu posuere nec, vestibulum id elit. Nunc sagittis est vel nunc luctus sit amet tristique nisl adipiscing. Sed ornare lorem quis mi elementum quis vestibulum velit elementum. Maecenas vitae ipsum lacus. Cras sagittis consectetur mauris nec commodo. Donec quis ligula eros, non ultrices nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Check out more on the menu <span class="relative-dir" data-breakpoint="600" data-text="above">to the left</span>.</p>
</section>
</div>
<script src="relative-dir.js" type="text/javascript"></script>
<script>
relativeDir();
</script>
</body>
</html>