Projects/nettsiden
8
2
Fork 1
Code Issues 15 Pull Requests 1 Activity

New navbar

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

115
www/css/style.css
View File

@@ -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;
}
}

13
www/index.php
View File

@@ -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>