New navbar

mobile still wip
This commit is contained in:
Markus Wang Halvorsen 2017-11-13 23:13:24 +01:00
parent 2ee9a98277
commit 1ea96f5c0d
3 changed files with 122 additions and 26 deletions

View File

@ -1,19 +1,21 @@
<?php <?php
function navbar($depth, $active = NULL) { function navbar($depth, $active = NULL) {
$result = "<ul>\n"; $result = '<img class="logo" src="' . rtrim(str_repeat('../', $depth)) . "/css/logo-disk-white.png\"/>\n";
$result .= "\t\t<ul>\n";
$menuItems = [ $menuItems = [
'hjem' => '', 'Hjem' => '',
'kalender' => 'kalender', 'Kalender' => 'kalender',
'aktiviteter' => 'aktiviteter', 'Aktiviteter' => 'aktiviteter',
'prosjekter' => 'prosjekt', 'Prosjekter' => 'prosjekt',
'kontakt' => 'kontakt', 'Kontakt' => 'kontakt',
'wiki' => 'pvv' 'Wiki' => 'pvv'
]; ];
foreach($menuItems as $caption => $link) { foreach($menuItems as $caption => $link) {
$result .= "\t\t\t<a href=\"" . rtrim(str_repeat('../', $depth) . $link, '/') . "/\"" . ($active === $link ? ' class="active"' : '') . ">" $result .= "\t\t\t<a href=\"" . rtrim(str_repeat('../', $depth) . $link, '/') . "/\"" . ($active === $link ? ' class="active"' : '') . ">"
. "<li>" . $caption . "</li></a>\n" . "<li>" . $caption . "</li></a>\n"
; ;
} }
$result .= "\t\t\t" . '<a href="javascript:void(0);" style="font-size:15px;" id="navopen" onclick="navbar()">&#9776;</a>' . "\n";
return $result . "\t\t</ul>\n"; return $result . "\t\t</ul>\n";
} }
@ -25,9 +27,9 @@ function loginBar($sp = 'default-sp') {
$attr = $as->getAttributes(); $attr = $as->getAttributes();
if($attr) { if($attr) {
$uname = $attr['uid'][0]; $uname = $attr['uid'][0];
$result .= "\t\t<p class=\"login\">logget inn som: " . htmlspecialchars($uname) . "</p>\n"; $result .= "\t\t<p class=\"login\">Logget inn som: " . htmlspecialchars($uname) . "</p>\n";
} else { } else {
$result .= "\t\t<a class=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">logg inn</a>\n"; $result .= "\t\t<a class=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">Logg inn</a>\n";
} }
return $result; return $result;

View File

@ -15,8 +15,6 @@ nav {
height: 50px; height: 50px;
background-color: #002244; background-color: #002244;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 5px #000;
} }
nav * { nav * {
@ -37,33 +35,37 @@ nav h2 {
color: #002244; color: #002244;
} }
nav img{ nav .logo{
width: 50px; position: fixed;
height: 50px; top: 6px;
left: 6px;
width: 38px;
height: 38px;
} }
nav ul { nav ul {
display: table;
table-layout: fixed;
position: fixed; position: fixed;
top: 0; top: 0;
left: 15vw; left: 50px;
right: 15vw; width: 100vw;
width: 70vw; height: 45px;
height: 50px;
list-style: none; list-style: none;
} }
nav li {
height: 45px;
line-height: 55px;
}
nav a { nav a {
display: table-cell; display: inline-block;
height: 100%; height: 100%;
margin: 0; margin: 0 .7em;
text-decoration: none; text-decoration: none;
font-size: 1.2em; font-size: 1.2em;
text-align: center; text-align: center;
line-height: 48px;
border-bottom: 2px solid rgba(255, 255, 255, 0); border-bottom: 2px solid rgba(255, 255, 255, 0);
@ -86,8 +88,12 @@ nav .login {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
height: 48px; height: 45px;
padding: 0 1em; line-height: 55px;
}
#navopen {
display: none;
} }
main { main {
@ -117,3 +123,80 @@ main h2 {
transition: background-color .2s ease; transition: background-color .2s ease;
} }
@media(max-width: 800px){
nav .logo {
visibility: hidden;
}
nav .login {
display: none;
}
nav ul {
left: 0px;
height: 50px;
}
nav a {
display: none;
border-bottom: none;
text-align: left;
margin: 0;
}
nav a:hover {
border-bottom: none;
}
nav a.active {
display: block;
height: 50px;
line-height: 50px;
padding: 0 .5em;
border-bottom: none;
}
#navopen {
display: block;
position: fixed;
top: 0;
right: 0;
line-height: 50px;
text-align: center;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
background-color: #002244;
}
.opennav a {
display: block;
text-align: left;
margin: 0;
padding: 0 .5em;
}
.opennav a:hover {
background-color: #00407F;
}
.opennav a:hover li {
background-color: #00407F;
}
.opennav a.active:hover {
background-color: #002244;
}
.opennav a.active:hover li {
background-color: #002244;
}
.opennav .login {
position: relative;
display: block;
border-top: 1px solid gray;
}
}

View File

@ -25,10 +25,21 @@ $agenda = new \pvv\side\Agenda([
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/splash.css"> <link rel="stylesheet" href="css/splash.css">
<link rel="stylesheet" href="css/landing.css"> <link rel="stylesheet" href="css/landing.css">
<script>
function navbar() {
var x = document.getElementById("navbar");
if (x.className === "opennav") {
x.className = "";
} else {
x.className = "opennav";
}
}
</script>
</head> </head>
<body> <body>
<nav> <nav id="navbar" class="">
<?php echo navbar(0, ''); ?> <?php echo navbar(0, ''); ?>
<?php echo loginbar(); ?> <?php echo loginbar(); ?>
</nav> </nav>