responsive nav

This commit is contained in:
Ricsi
2016-11-25 22:04:57 +01:00
parent 9532183921
commit 8dbb3fb944
2 changed files with 32 additions and 20 deletions

View File

@@ -2,25 +2,20 @@
<head> <head>
<style> <style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0px;
}
a:link { a:link {
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
nav {
width: 100%;
background-color: #000;
padding: 10px 0px;
}
nav a {
color: #fff;
margin: 10px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
td.create { td.create {
padding: 15px 0px; padding: 15px 0px;
} }
@@ -56,6 +51,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/_css/form.css">
<link rel="stylesheet" type="text/css" href="/_css/nav.css">
<title>Badminton Coach v 0.1</title> <title>Badminton Coach v 0.1</title>
<?php <?php
require('common.php'); require('common.php');

View File

@@ -1,7 +1,21 @@
<table> <ul class="topnav" id="myTopnav">
<tr> <li class="icon">
<td><a href="/admin/members">Tagok</a></td> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">Menü ☰</a>
<td><a href="/admin/trainings">Edzések</a></td> </li>
<td><a href="/admin/presence">Jelenlét</a></td> <li><a href="/admin/members">Tagok</a></li>
</tr> <li><a href="/admin/trainings">Edzések</a></li>
</table> <li><a href="/admin/presence">Jelenlét</a></li>
</ul>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>