<html lang="en">
<head>
<meta charset="UTF-8">
+ <meta name="width" content="370">
+ <meta name="height" content="840">
<title></title>
<style>
* {
position: fixed;
top: 0px;
left: 0px;
- width: 50px;
+ width: 30px;
height: 100%;
pointer-events: none;
background-size: 60% auto;
#labels {
display: block;
- width: 300px;
+ width: 200px;
height: auto;
position: relative;
- left: 70px;
+ left: 50px;
top: 30px;
padding-bottom: 30px;
pointer-events: none;
nav {
position: absolute;
z-index: 0;
- top: 10px;
+ top: 17px;
left: 0px;
width: 100%;
}
nav a {
display: block;
- height: 95px;
- margin-bottom: 44.5px;
+ height: 63px;
+ margin-bottom: 30px;
}
nav a:hover {
<main>
<img id="labels" src="labels.svg" width="300">
<nav>
- <a href="#/page/5"></a>
- <a href="#/page/7"></a>
- <a href="#/page/8"></a>
- <a href="#/page/9"></a>
- <a href="#/page/14"></a>
- <a href="#/page/16"></a>
- <a href="#/page/18"></a>
- <a href="#/page/20"></a>
- <a href="#/page/21"></a>
+ <a href="#" data-page="5"></a>
+ <a href="#" data-page="7"></a>
+ <a href="#" data-page="8"></a>
+ <a href="#" data-page="9"></a>
+ <a href="#" data-page="14"></a>
+ <a href="#" data-page="16"></a>
+ <a href="#" data-page="18"></a>
+ <a href="#" data-page="20"></a>
+ <a href="#" data-page="21"></a>
</nav>
</main>
+<script src="../jquery.js"></script>
+<script>
+ $(function () {
+ $(document).on('click', 'a', function () {
+ parent.location.hash = "#/page/" + $(this).data('page');
+ return false;
+ });
+ });
+</script>
</body>
</html>
\ No newline at end of file