Created
November 23, 2015 21:55
-
-
Save hinaloe/8b52bb14ea4cccaf4e77 to your computer and use it in GitHub Desktop.
ましにした
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| diff --git a/css/style.css b/css/style.css | |
| index 608be80..1e285d3 100644 | |
| --- a/css/style.css | |
| +++ b/css/style.css | |
| @@ -48,6 +48,8 @@ h1 { | |
| background-color: white; | |
| margin: 0px; | |
| overflow:hidden; | |
| + padding-left 5px; | |
| + padding-right: 5px; | |
| } | |
| .top { | |
| margin: 0px; | |
| diff --git a/index.html b/index.html | |
| index a86bff9..9dfea52 100644 | |
| --- a/index.html | |
| +++ b/index.html | |
| @@ -9,41 +9,6 @@ | |
| <link href="css/animate.min.css" rel="stylesheet"> | |
| <link href="css/style.css" rel="stylesheet"> | |
| -<script type="text/javascript"> | |
| -window.onload = function(){ | |
| - change('about'); | |
| - select = 'about'; | |
| -} | |
| -function change(name){ | |
| - document.getElementById('about').style.display = 'none'; | |
| - document.getElementById('menu').style.display = 'none'; | |
| - document.getElementById('access').style.display = 'none'; | |
| - document.getElementById('contact').style.display = 'none'; | |
| - document.getElementById('gallery').style.display = 'none'; | |
| - document.getElementById('night').style.display = 'none'; | |
| - | |
| - document.getElementById(name).style.display = 'block'; | |
| - menuSelect(name); | |
| -} | |
| -function menuSelect(name){ | |
| - document.getElementById('about_off').style.display = 'block'; | |
| - document.getElementById('menu_off').style.display = 'block'; | |
| - document.getElementById('access_off').style.display = 'block'; | |
| - document.getElementById('contact_off').style.display = 'block'; | |
| - document.getElementById('gallery_off').style.display = 'block'; | |
| - document.getElementById('night_off').style.display = 'block'; | |
| - | |
| - document.getElementById('about_on').style.display = 'none'; | |
| - document.getElementById('menu_on').style.display = 'none'; | |
| - document.getElementById('access_on').style.display = 'none'; | |
| - document.getElementById('contact_on').style.display = 'none'; | |
| - document.getElementById('gallery_on').style.display = 'none'; | |
| - document.getElementById('night_on').style.display = 'none'; | |
| - | |
| - document.getElementById(name + '_on').style.display = 'block'; | |
| - document.getElementById(name + '_off').style.display = 'none'; | |
| -} | |
| -</script> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| @@ -56,24 +21,18 @@ function menuSelect(name){ | |
| <div class="box_wrapper"> | |
| <div class="col-xs-12 col-sm-3"> | |
| <div class="box2"> | |
| - <a onclick="change('about'); return false;" id="about_off"><h2 class="menu">About</h2></a> | |
| - <a onclick="change('about'); return false;" id="about_on"><h2 class="menu active">About</h2></a> | |
| - <a onclick="change('menu'); return false;" id="menu_off"><h2 class="menu">Menu</h2></a> | |
| - <a onclick="change('menu'); return false;" id="menu_on"><h2 class="menu active">Menu</h2></a> | |
| - <a onclick="change('access'); return false;" id="access_off"><h2 class="menu">Access</h2></a> | |
| - <a onclick="change('access'); return false;" id="access_on"><h2 class="menu active">Access</h2></a> | |
| - <a onclick="change('contact'); return false;" id="contact_off"><h2 class="menu">Contact</h2></a> | |
| - <a onclick="change('contact'); return false;" id="contact_on"><h2 class="menu active">Contact</h2></a> | |
| - <a onclick="change('gallery'); return false;" id="gallery_off"><h2 class="menu">Gallery</h2></a> | |
| - <a onclick="change('gallery'); return false;" id="gallery_on"><h2 class="menu active">Gallery</h2></a> | |
| - <a onclick="change('night'); return false;" id="night_off"><h2 class="menu">???</h2></a> | |
| - <a onclick="change('night'); return false;" id="night_on"><h2 class="menu active">???</h2></a> | |
| + <a href="#about"><h2 class="menu active">About</h2></a> | |
| + <a href="#menu"><h2 class="menu">Menu</h2></a> | |
| + <a href="#access"><h2 class="menu">Access</h2></a> | |
| + <a href="#contact"><h2 class="menu">Contact</h2></a> | |
| + <a href="#gallery"><h2 class="menu">Gallery</h2></a> | |
| + <a href="#menu"><h2 class="menu">???</h2></a> | |
| </div> | |
| </div> | |
| <div class="col-xs-12 col-sm-9"> | |
| <div class="box3"> | |
| - <div id="about"> | |
| + <div id="about" class="show"> | |
| <h3 class="animated fadeIn">About</h3> | |
| <figure style="position:relative;"> | |
| <img class="animated fadeInRight img-responsive pull-right" src="http://fleurdulap.in/img/syaro.png" alt="当店自慢のメイドさん"> | |
| @@ -87,7 +46,7 @@ function menuSelect(name){ | |
| </div> | |
| </div> | |
| - <div id="menu"> | |
| + <div id="menu" class="hide"> | |
| <h3 class="animated fadeIn">Menu</h3> | |
| <div class="animated fadeIn"> | |
| <div class="col-xs2 col-sm-4"> | |
| @@ -190,7 +149,7 @@ function menuSelect(name){ | |
| </div> | |
| </div> | |
| - <div id="access"> | |
| + <div id="access" class="hide"> | |
| <h3 class="animated fadeIn">Access</h3> | |
| <div class="animated fadeIn"> | |
| <p class="content"><a href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%82%AF%E3%82%BF%E3%83%BC%E3%82%A4%E3%82%A8%E3%83%AD%E3%83%BC#/media/File:923_shinkansen_T5_20080728.jpg" target="_blank">幸せの</a> <a href="https://ja.wikipedia.org/wiki/JR%E6%9D%B1%E6%97%A5%E6%9C%ACE231%E7%B3%BB%E9%9B%BB%E8%BB%8A#/media/File:JREast-E231-Mitsu11.jpg" target="_blank">黄色い</a> <a href="https://ja.wikipedia.org/wiki/%E5%9B%BD%E9%89%84115%E7%B3%BB%E9%9B%BB%E8%BB%8A#/media/File:Tc115-2620_yellow.JPG" target="_blank">電車</a>の駅から徒歩5分。</p> | |
| @@ -201,7 +160,7 @@ function menuSelect(name){ | |
| </div> | |
| </div> | |
| - <div id="contact"> | |
| + <div id="contact" class="hide"> | |
| <h3 class="animated fadeIn">Contact</h3> | |
| <div class="animated fadeIn"> | |
| <h5 class="content">連絡先</h5> | |
| @@ -216,7 +175,7 @@ function menuSelect(name){ | |
| </div> | |
| </div> | |
| - <div id="gallery"> | |
| + <div id="gallery" class="hide"> | |
| <h3 class="animated fadeIn">Gallery</h3> | |
| <div class="animated fadeIn"> | |
| <p class="content">描いてくれる方募集</p> | |
| @@ -224,7 +183,7 @@ function menuSelect(name){ | |
| </div> | |
| </div> | |
| - <div id="night"> | |
| + <div id="night" class="hide"> | |
| <h3 class="animated fadeIn">???</h3> | |
| <div class="animated fadeIn"> | |
| <h4 class="content">深夜の営業について</h4> | |
| @@ -253,6 +212,32 @@ function menuSelect(name){ | |
| <p>このサイトはパロディです、公式とはなんの関係もありません。また、当店はいかがわしいお店ではございません</p> | |
| </div> | |
| </footer> | |
| +<script> | |
| ++function(){ | |
| + var load = function() { | |
| + var clickHandler = function (e) { | |
| + e.preventDefault(); | |
| + var selector = e.currentTarget.href; | |
| + selector = selector && selector.replace(/.*#(?=[^\s]*$)/, ''); | |
| + // reset menu | |
| + document.getElementsByClassName("active")[0].className="menu"; | |
| + e.currentTarget.childNodes[0].classList.add("active"); | |
| + | |
| + // | |
| + document.getElementsByClassName("show")[0].className="hide"; | |
| + document.getElementById(selector).className="show"; | |
| + } | |
| + | |
| + var menu = document.querySelectorAll(".box2 a"); | |
| + for(var i=0; i<menu.length;i++) { | |
| + menu[i].addEventListener("click",clickHandler,false); | |
| + } | |
| + | |
| + } | |
| + | |
| + document.addEventListener("DOMContentLoaded", load, false); | |
| +}(); | |
| +</script> | |
| <!--FBのアレ--> | |
| <div id="fb-root"></div> | |
| <script>(function(d, s, id) { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment