From 98c07cb17039dbfa19986625337c172b020f464b Mon Sep 17 00:00:00 2001 From: Guuq <50501321+Guuq@users.noreply.github.com> Date: Thu, 28 Nov 2019 17:40:44 +0100 Subject: [PATCH] Improved navbar --- css.css | 3 +- index.html | 5 +-- resources/css/navbar.css | 46 +++++++++++++++---------- resources/js/insertNavbar.js | 67 +++++++++++++++++++----------------- resources/js/navbar.json.js | 13 +++---- 5 files changed, 69 insertions(+), 65 deletions(-) diff --git a/css.css b/css.css index 747a49f..9dd30ee 100644 --- a/css.css +++ b/css.css @@ -76,12 +76,13 @@ footer { background-color: black; width: 100%; position: relative; - display: flex!important; + float: left; font-family: 'Open Sans', sans-serif; } footer div { margin: 5rem 0 3rem 8rem; display: inline-block; + vertical-align: top; } footer h4 { color: gray; diff --git a/index.html b/index.html index 1db0f94..dba45b4 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,3 @@ -<<<<<<< HEAD @@ -113,6 +112,7 @@
  • W3schools
  • Stack overflow
  • Cloudflare
    • +
  • Github
    • @@ -141,6 +141,3 @@ -======= -Home

    uren

    :minuten

    :seconden


    datum


    Peer Droog

    "Een goede en overzichtelijk website met een handige klok, wel mist er de mogelijkheid om je eigen plaatjes toe te voegen aan de shortcuts."

    User

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a risus eu ex sagittis interdum ac ac odio. Proin eleifend turpis a aliquam.

    ->>>>>>> f3747cf0f10d544e2a27606d8adddc3b21a8992a diff --git a/resources/css/navbar.css b/resources/css/navbar.css index eca2933..53f8144 100644 --- a/resources/css/navbar.css +++ b/resources/css/navbar.css @@ -3,46 +3,54 @@ top: 0px; height: 55px; width: 100%; - background-color: #101012; + background-color: #212126; z-index: 3; } -.navigation button { - padding: .5rem; - height: 100%; - transition: color .5s; - border: 0; - background-color: transparent; - color: white; - display: inline; +.navigation .fas { + margin-left: .5rem; + transition: .5s transform; } -.navigation button:focus { - outline: 0; +.navigation a { + white-space: nowrap; + cursor: pointer; + transition: all 0.2s ease-in-out; } .navbarList { list-style: none; margin: 0; padding: 0; + padding-top: 14px; + height: 100%; } .navList { float: left; + margin-left: 25px; } -.navigation i { - margin: 10px 15px 10px 10px; +.navImg { + height: 2rem; + width: 2rem; + margin-top: -4px; } .dropdownList { - background-color: #101012; - margin: 0; - padding: 0; + background-color: #303037; + border-radius: 4px; + margin-top: 5px; + border: #1d1d1d 1px solid; + font-family: 'Open Sans'; + padding: 10px 20px 10px 20px; list-style: none; } -.dropdownButton { +.dropdownLi { + padding: 5px 2px 2px 2px; +} +.dropdownLink { width: 100%; } .navList:hover .dropdownList { display: block!important; } -.navigation button:hover { - color: gray!important; +.navList:hover .fas { + transform: rotate(-180deg); } .lowerIndex { z-index: -1!important; diff --git a/resources/js/insertNavbar.js b/resources/js/insertNavbar.js index efb3685..b5f63f8 100644 --- a/resources/js/insertNavbar.js +++ b/resources/js/insertNavbar.js @@ -4,16 +4,17 @@ var g = document.querySelector.bind(document); // Insert nav tag var navigation = c("nav") -navigation.className = "navigation" + navigation.className = "navigation" var navbarList = c("ul") -navbarList.className = "navbarList" -navigation.appendChild(navbarList) -document.body.appendChild(navigation) + navbarList.className = "navbarList" + navigation.appendChild(navbarList) + document.body.appendChild(navigation) -// Opacity -var opacity = c("div") -opacity.className = "opacityMenu lowerIndex menu" -document.body.appendChild(opacity) + +// // Opacity +// var opacity = c("div") +// opacity.className = "opacityMenu lowerIndex menu" +// document.body.appendChild(opacity) // Hamburger Menu var hamburger = c("i") @@ -49,43 +50,45 @@ function searchEnter(key) { // Create Navbar Navbar.forEach(i=>{ var navList = c("li") - navList.className = "navList" - var navButton = c("button"); - navButton.className = "navbarbutton" - navButton.innerHTML = "" + i.name + navList.className = "navList" + var navLink = c("a"); + navList.appendChild(navLink); if (i.link) { - var navLink = c("a"); navLink.href = i.link - navLink.appendChild(navButton); - navButton = navLink + } + if (i.name) { + navLink.innerHTML = i.name } if (i.desc) { - navButton.title = i.desc + navLink.title = i.desc + } + if (i.icon) { + var navImg = c("img") + navImg.src = i.icon + navImg.className = "navImg" + navImg.alt = "img" + navLink.appendChild(navImg) } - navList.appendChild(navButton) var dropdownList = c("ul") dropdownList.className = "dropdownList" dropdownList.style = "display: none;" if (typeof i.dropdown == "object") { i.dropdown.forEach(d=>{ - var dropdownListItem = c("li"); - // Dropdown button - var dropdownButton = c("button"); - dropdownButton.innerHTML = "" + d.name - dropdownButton.className = "dropdownButton" - if (d.desc) { - dropdownButton.title = d.desc - } if (d.link) { - var link = c("a"); - link.href = d.link - link.appendChild(dropdownButton); - dropdownButton = link + var dropdownListItem = c("li"); + dropdownListItem.className = "dropdownLi" + var dropdownLink = c("a"); + dropdownLink.href = d.link + dropdownLink.innerHTML = d.name + if (d.desc) { + dropdownLink.title = d.desc + } + dropdownListItem.appendChild(dropdownLink); + dropdownList.appendChild(dropdownListItem); } - dropdownListItem.appendChild(dropdownButton); - dropdownList.appendChild(dropdownListItem); + navList.appendChild(dropdownList) }) + navLink.innerHTML = navLink.innerHTML + "" } - navList.appendChild(dropdownList) navbarList.appendChild(navList); }) diff --git a/resources/js/navbar.json.js b/resources/js/navbar.json.js index e34673d..9092de4 100644 --- a/resources/js/navbar.json.js +++ b/resources/js/navbar.json.js @@ -1,30 +1,25 @@ Navbar = [ { - name: "Home", + icon: "/resources/img/favicon.ico", desc: "Ga naar de homepagina", - link: "/", - icon: "fas fa-home" + link: "/" }, { name: "Playground", desc: "Test je html live!", - link: "/playground", - icon: "fas fa-code" + link: "/playground" }, { name: "Contact", desc: "Neem contact met mij op", - link: "/contact", - icon: "fas fa-phone" + link: "/contact" }, { name: "Games", desc: "Hier kan je spelletjes spelen", - icon: "fas fa-gamepad", dropdown: [ { name: "Vuurjongen en Watermeisje 4", - icon: "fas fa-fire", link: "/vuurjongen-en-watermeisje-4" } ]