Permalink
Browse files

🍣 .activeが自動で適用されるようロジックを追加

  • Loading branch information...
1 parent 645e429 commit 9ae6c641dd2de1b263941dad8321dda8dc5979c6 @tumbling-dice committed Sep 10, 2016
Showing with 93 additions and 4 deletions.
  1. +35 −0 public/about.html
  2. +23 −4 public/components/global-nav.tag
  3. +35 −0 public/contact.html
View
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>riot test - about</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="./stylesheets/bootstrap.min.css">
+ <link rel="stylesheet" href="./stylesheets/navbar-fixed-top.css">
+ </head>
+
+ <body>
+ <global-nav></global-nav>
+
+ <div class="container">
+ <jumbotron>
+ <h1>About</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </jumbotron>
+ </div>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <script type="text/javascript" src="./javascripts/bootstrap.min.js"></script>
+ <script type="text/javascript" src="./javascripts/riot+compiler.min.js"></script>
+ <script type="riot/tag" src="./components/jumbotron.tag"></script>
+ <script type="riot/tag" src="./components/global-nav.tag"></script>
+ <script>
+ riot.mount('*');
+ </script>
+ </body>
+
+</html>
@@ -15,16 +15,35 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a class="navbar-brand" href="#">Project name</a>
+ <a class="navbar-brand" href="index.html">Project name</a>
</div>
</nav-header>
<navbar>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#about">About</a></li>
- <li><a href="#contact">Contact</a></li>
+ <li each="{ nav in navs }" class="{ active: isActive(nav.link) }">
+ <a href="{ nav.link }">{ nav.title }</a>
+ </li>
</ul>
</div>
+
+ <script>
+ this.navs = [
+ {
+ link: "index.html",
+ title: "Home"
+ }, {
+ link: "about.html",
+ title: "About"
+ }, {
+ link: "contact.html",
+ title: "Contact"
+ }
+ ];
+
+ this.isActive = function (path) {
+ return path == location.pathname.replace(/^\//, "");
+ }
+ </script>
</navbar>
View
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>riot test - contact</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="./stylesheets/bootstrap.min.css">
+ <link rel="stylesheet" href="./stylesheets/navbar-fixed-top.css">
+ </head>
+
+ <body>
+ <global-nav></global-nav>
+
+ <div class="container">
+ <jumbotron>
+ <h1>Contact</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </jumbotron>
+ </div>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+ <script type="text/javascript" src="./javascripts/bootstrap.min.js"></script>
+ <script type="text/javascript" src="./javascripts/riot+compiler.min.js"></script>
+ <script type="riot/tag" src="./components/jumbotron.tag"></script>
+ <script type="riot/tag" src="./components/global-nav.tag"></script>
+ <script>
+ riot.mount('*');
+ </script>
+ </body>
+
+</html>

0 comments on commit 9ae6c64

Please sign in to comment.