+Navigations Bar

4 years ago · a6688b60c1
parent a66862bec3
commit a6688b60c1
2 changed files with 38 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -7,6 +7,12 @@
    <script src="code.js"></script>
 </head>
 <body>
+<ul>
+    <li><a class="active" href="#index">Play</a></li>
+    <li><a href="#HighScore">HighScore</a></li>
+    <li style="float:right"><a href="#Nickname">Nickname</a></li>
+</ul>
+
    <table id="gameTable" class="game">
        <tr id="row0" class="game rows">
            <td id="field0" class="game fields"></td>
--- a/style.css
+++ b/style.css
@ -0,0 +1,32 @@
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+li {
+    float: left;
+    border-right:1px solid #bbb;
+}
+
+li:last-child {
+    border-right: none;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+li a:hover:not(.active) {
+    background-color: #111;
+}
+
+.active {
+    background-color: #4CAF50;
+}