New navbar
mobile still wip
This commit is contained in:
parent
2ee9a98277
commit
1ea96f5c0d
@ -1,19 +1,21 @@
|
||||
<?php
|
||||
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 = [
|
||||
'hjem' => '',
|
||||
'kalender' => 'kalender',
|
||||
'aktiviteter' => 'aktiviteter',
|
||||
'prosjekter' => 'prosjekt',
|
||||
'kontakt' => 'kontakt',
|
||||
'wiki' => 'pvv'
|
||||
'Hjem' => '',
|
||||
'Kalender' => 'kalender',
|
||||
'Aktiviteter' => 'aktiviteter',
|
||||
'Prosjekter' => 'prosjekt',
|
||||
'Kontakt' => 'kontakt',
|
||||
'Wiki' => 'pvv'
|
||||
];
|
||||
foreach($menuItems as $caption => $link) {
|
||||
$result .= "\t\t\t<a href=\"" . rtrim(str_repeat('../', $depth) . $link, '/') . "/\"" . ($active === $link ? ' class="active"' : '') . ">"
|
||||
. "<li>" . $caption . "</li></a>\n"
|
||||
;
|
||||
}
|
||||
$result .= "\t\t\t" . '<a href="javascript:void(0);" style="font-size:15px;" id="navopen" onclick="navbar()">☰</a>' . "\n";
|
||||
return $result . "\t\t</ul>\n";
|
||||
}
|
||||
|
||||
@ -25,9 +27,9 @@ function loginBar($sp = 'default-sp') {
|
||||
$attr = $as->getAttributes();
|
||||
if($attr) {
|
||||
$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 {
|
||||
$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;
|
||||
|
||||
@ -15,8 +15,6 @@ nav {
|
||||
height: 50px;
|
||||
background-color: #002244;
|
||||
overflow: hidden;
|
||||
|
||||
box-shadow: 0 0 5px #000;
|
||||
}
|
||||
|
||||
nav * {
|
||||
@ -37,33 +35,37 @@ nav h2 {
|
||||
color: #002244;
|
||||
}
|
||||
|
||||
nav img{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
nav .logo{
|
||||
position: fixed;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 15vw;
|
||||
right: 15vw;
|
||||
width: 70vw;
|
||||
height: 50px;
|
||||
left: 50px;
|
||||
width: 100vw;
|
||||
height: 45px;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav li {
|
||||
height: 45px;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: table-cell;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
margin: 0 .7em;
|
||||
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0);
|
||||
|
||||
@ -86,8 +88,12 @@ nav .login {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
padding: 0 1em;
|
||||
height: 45px;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
#navopen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -116,4 +122,81 @@ main h2 {
|
||||
background-color: #00407F;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -25,10 +25,21 @@ $agenda = new \pvv\side\Agenda([
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/splash.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>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<nav id="navbar" class="">
|
||||
<?php echo navbar(0, ''); ?>
|
||||
<?php echo loginbar(); ?>
|
||||
</nav>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user