Difference between revisions of "Template:Groningen/Navbar"

 
(40 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{Groningen}}
 
{{Groningen}}
 
<html lang="en">
 
<html lang="en">
−
    <head>
 
−
        <!-- Required meta tags -->
 
−
        <meta charset="utf-8">
 
−
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
  
−
        <script src="https://2021.igem.org/Template:Groningen/FontAwesome?action=raw&ctype=text/javascript" crossorigin="anonymous"></script>
+
<head>
 +
    <!-- Required meta tags -->
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
−
        <!---- Wiki Reset-(Adapted from Team-Wageningen 2019)---->
+
    <script src="https://2021.igem.org/Template:Groningen/FontAwesome?action=raw&ctype=text/javascript"
−
        <script>
+
        crossorigin="anonymous"></script>
−
            !function() {
+
−
                document.getElementById("HQ_page").removeAttribute("id");
+
−
                document.getElementById("globalWrapper").removeAttribute("id");
+
−
                document.getElementById("content").removeAttribute("id");
+
−
                document.getElementById("bodyContent").removeAttribute("id");
+
−
                document.getElementById("mw-content-text").removeAttribute("id");
+
−
                document.getElementsByClassName("mw-body")[0].removeAttribute("class");
+
−
                document.getElementsByClassName("mw-content-ltr")[0].className = "my-content";
+
−
            }()
+
−
        </script>
+
  
−
<style>
+
    <!---- Wiki Reset-(Adapted from Team-Wageningen 2019)---->
−
/*Nav bar styles*/
+
    <script>
 +
        !function () {
 +
            document.getElementById("HQ_page").removeAttribute("id");
 +
            document.getElementById("globalWrapper").removeAttribute("id");
 +
            document.getElementById("content").removeAttribute("id");
 +
            document.getElementById("bodyContent").removeAttribute("id");
 +
            document.getElementById("mw-content-text").removeAttribute("id");
 +
            document.getElementsByClassName("mw-body")[0].removeAttribute("class");
 +
            document.getElementsByClassName("mw-content-ltr")[0].className = "my-content";
 +
        }()
 +
    </script>
  
−
* {
+
    <style>
−
    box-sizing: border-box;
+
        div.my-content>p:first-of-type {
−
    padding: 0;
+
            display: none;
−
    margin: 0;
+
        }
−
}
+
  
−
body {
+
        div.my-content header:nth-of-type(1) {
−
    background: #ffffff;
+
            margin-top: 85px;
−
    font-family: Montserrat;
+
        }
−
    margin: 0;
+
−
    padding: 0;
+
−
}
+
  
−
content {
+
        /*Nav bar styles*/
−
    width: 100%;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
}
+
  
−
div.navigation {
+
        * {
−
    margin: 0 auto;
+
            box-sizing: border-box;
−
    color: black;
+
            padding: 0;
−
    text-decoration: none;
+
            margin: 0;
−
    width: 100%;
+
        }
−
}
+
  
−
div.navigation a {
+
        body {
−
    color: black;
+
            background: #ffffff;
−
    text-decoration: none;
+
            font-family: Montserrat;
−
}
+
            margin: 0;
 +
            padding: 0;
 +
        }
  
−
.dropdwn {
+
        content {
−
    display: block;
+
            width: 100%;
−
    width: 190px;
+
            margin: 0;
−
    padding: 0 60px 0 60px;
+
            padding: 0;
−
    color: #000000;
+
        }
−
    text-decoration: none;
+
−
    line-height: 85px;
+
−
    font-size: 18px;
+
−
}
+
  
−
.dropdwnSub {
+
        .dropdwn {
−
    display: block;
+
            display: block;
−
    padding: 12px 14px 12px 14px;
+
            width: 190px;
−
    color: #000000;
+
            padding: 0 60px 0 60px;
−
    text-decoration: none;
+
            color: #000000;
−
    line-height: 30px;
+
            text-decoration: none;
−
    font-size: 16px;
+
            line-height: 85px;
−
}
+
            font-size: 18px;
 +
        }
  
−
img.logo {
+
        .dropdwnSub {
−
    padding: 10px 20px;
+
            display: block;
−
    width: 70px;
+
            padding: 12px 14px 12px 14px;
−
    height: auto;
+
            color: #000000;
−
}
+
            text-decoration: none;
 +
            line-height: 30px;
 +
            font-size: 16px;
 +
        }
  
−
nav {
+
        nav {
−
    height: 85px;
+
            height: 85px;
−
    background: #fdf8f0;
+
            background: #fdf8f0;
−
    width: 100%;
+
            width: 100%;
−
    font-family: 'Montserrat' !important;
+
            font-family: 'Montserrat' !important;
−
    text-decoration: none !important;
+
            text-decoration: none !important;
−
    color: #000000 !important;
+
            color: #000000 !important;
−
    display: flex;
+
            display: flex;
−
    justify-content: space-between;
+
            flex-wrap: wrap;
−
}
+
            justify-content: space-between;
 +
            position: fixed;
 +
            top: 15px;
 +
            z-index: 100;
 +
        }
  
−
nav .mainMenu {
+
        nav ul.mainMenu {
−
    padding: 0;
+
            padding: 0;
−
    margin: 0 10px 0 0;
+
            margin: 0;
−
    float: right;
+
            float: right;
−
    display: flex;
+
            list-style: none;
−
    list-style: none;
+
        }
−
}
+
  
−
nav li a {
+
        nav li a {
−
    display: inline-block;
+
            display: inline-block;
−
    text-decoration: none !important;
+
            text-decoration: none !important;
−
    color: #000000 !important;
+
            color: #000000 !important;
−
}
+
        }
  
−
nav .mainMenu li {
+
        nav .mainMenu li {
−
    background: #fdf8f0;
+
            background: #fdf8f0;
−
    position: relative;
+
            position: relative;
−
    list-style: none;
+
            list-style: none;
−
    display: inline-block;
+
            display: inline-block;
−
    margin: 0 !important;
+
            margin: 0 !important;
−
}
+
        }
  
−
nav .mainMenu li a:hover {
+
        nav .mainMenu li a:hover {
−
    background: #f7eee2;
+
            background: #f7eee2;
−
}
+
        }
  
−
nav ul ul {
+
        nav ul ul {
−
    position: absolute;
+
            position: absolute;
−
    top: 80px;
+
            top: 80px;
−
    display: none;
+
            display: none;
−
    width: 100%;
+
            width: 100%;
−
}
+
        }
  
−
nav ul li:hover>ul {
+
        nav ul li:hover>ul {
−
    display: block;
+
            display: block;
−
    visibility: visible;
+
            visibility: visible;
−
    opacity: 1;
+
            opacity: 1;
−
    transition: ease-in-out .35s;
+
            transition: ease-in-out .35s;
−
    pointer-events: all !important;
+
            pointer-events: all !important;
−
}
+
        }
  
−
nav ul ul li {
+
        nav ul ul li {
−
    width: 100%;
+
            width: 100%;
−
    float: right;
+
            float: right;
−
    display: list-item;
+
            display: list-item;
−
    position: relative;
+
            position: relative;
−
    right: 15px;
+
            right: 15px;
−
}
+
        }
  
−
nav ul li ul li {
+
        nav ul li ul li {
−
    padding: 0 !important;
+
            padding: 0 !important;
−
    margin: 0 !important;
+
            margin: 0 !important;
−
}
+
        }
  
 +
        .titleNav,
 +
        .logoNav {
 +
            display: inline-block;
 +
        }
  
−
/*NEW*/
+
        #top_title {
 +
            display: none;
 +
        }
  
−
/*nav .openMenu {
+
        .columnNav {
−
    font-size: 2rem;
+
            display: flex;
−
    margin: 20px;
+
            width: fit-content;
−
    display: none;
+
            float: left;
−
    cursor: pointer;
+
            padding: 0;
−
}
+
        }
  
−
nav .mainMenu .closeMenu {
+
        .logoNav {
−
    font-size: 2rem;
+
            margin: 5px 5px 5px 30px;
−
    display: none;
+
        }
−
    cursor: pointer;
+
−
}
+
  
−
@media(max-width: 800px) {
+
        .titleNav {
−
    nav {
+
            font-family: Montserrat !important;
−
        height: 100vh;
+
            font-size: 24px;
−
        position: fixed;
+
            margin: auto 0 auto 0 !important;
−
        top: 0;
+
            padding-right: 30px;
−
        right: 0;
+
         }
−
        left: 0;
+
−
        z-index: 10;
+
−
        flex-direction: column;
+
−
        justify-content: center;
+
−
        align-items: center;
+
−
        background: #fdf8f0;
+
−
        transition: top 1s ease;
+
−
    }
+
−
    nav .mainMenu {
+
−
        display: none;
+
−
    }
+
−
    nav .mainMenu .closeMenu {
+
−
        display: block;
+
−
        position: absolute;
+
−
        top: 20px;
+
−
        right: 20px;
+
−
    }
+
−
    nav .openMenu {
+
−
         display: block;
+
−
    }
+
−
    .columnNav {
+
−
        display: inline-block;
+
−
    }
+
−
}
+
  
 +
        button.mainMenuMobile {
 +
            display: none;
 +
            margin: auto 50px auto 50px;
 +
            height: fit-content;
 +
            border: 0;
 +
            background: none;
 +
        }
  
−
/*nav .mainMenu li a:hover {
 
−
    background: none;
 
−
    color: #f7eee2;
 
−
} --> for inside @media*/
 
−
/*END NEW*/*/
 
  
−
.titleNav,
+
        button.mainMenuMobile i {
−
.logoNav {
+
            font-size: 24px;
−
    display: inline-block;
+
        }
−
}
+
  
−
#top_title {
+
        /*The following code hides p.titleNav when the screen width is less than 1100px.*/
−
    display: none;
+
−
}
+
  
−
.columnNav {
+
        @media(max-width: 1100px) {
−
    display: flex;
+
            p.titleNav {
−
    width: 50%;
+
                display: none;
−
    float: left;
+
            }
−
    padding: 5px;
+
        }
−
}
+
  
−
.logoNav {
+
        /*The following code put a.dropdwn closer together when the screen is less than 880px*/
−
    margin: 5px 5px 5px 30px;
+
−
}
+
  
−
.titleNav {
+
        @media(max-width: 880px) {
−
    font-family: Montserrat !important;
+
            a.dropdwn {
−
    font-size: 24px;
+
                width: 150px;
−
    margin: auto 0 auto 0 !important;
+
                padding: 0 30px 0 30px;
−
}
+
            }
 +
        }
  
−
/*Without the following code, the page starts breaking down when the screen is less than 1100px wide*/
+
        /*The follwing code puts the navigation menu into a mobile version when the screen is less than 750px*/
  
−
@media(max-width: 1100px) {
+
        @media(max-width: 750px) {
−
    a.dropdwn {
+
            button.mainMenuMobile {
−
        width: 150px;
+
                display: block;
−
        padding: 0 30px 0 30px;
+
            }
−
    }
+
 
−
    div.titleNav {
+
            nav ul.mainMenu {
−
        display: none;
+
                width: 100%;
−
    }
+
                display: none;
 +
                flex-wrap: wrap;
 +
                flex-direction: column;
 +
            }
  
−
}
+
            nav ul.mainMenu li {
 +
                width: 100%;;
 +
                text-align: center;
 +
            }
  
 +
            nav ul.mainMenu>li>a {
 +
                width: 100%;
 +
                padding:0;
 +
            }
 +
            nav ul ul {
 +
            position: static;
 +
        }
  
  
−
</style>
+
 
 +
        }
 +
    </style>
 
</head>
 
</head>
  
Line 247: Line 234:
 
         <nav>
 
         <nav>
 
             <div class="columnNav">
 
             <div class="columnNav">
−
                 <a href="https://2021.igem.org/Team:Groningen"><img class="logoNav" src="https://static.igem.org/mediawiki/2021/1/17/T--Groningen--LogoByeMonia.png" alt="" width="76" height="auto"></a>
+
                 <a href="https://2021.igem.org/Team:Groningen"><img class="logoNav"
 +
                        src="https://static.igem.org/mediawiki/2021/1/17/T--Groningen--LogoByeMonia.png" alt="" width="76"
 +
                        height="auto"></a>
 
                 <p class="titleNav">Groningen 2021</p>
 
                 <p class="titleNav">Groningen 2021</p>
 
             </div>
 
             </div>
−
             <div class=openMenu></div>
+
             <button class="mainMenuMobile" type="button">
 +
                <i class="fas fa-bars"></i>
 +
            </button>
 
             <ul class="mainMenu" style="top: -100%">
 
             <ul class="mainMenu" style="top: -100%">
 
                 <li><a class="dropdwn" href="#">Project</a>
 
                 <li><a class="dropdwn" href="#">Project</a>
 
                     <ul>
 
                     <ul>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Description">Description</a></li>
+
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Description">Description</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Model">Model</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Model">Model</a></li>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Contribution">Contribution</a></li>
+
                         <li><a class="dropdwnSub"
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Implementation">Implementation</a></li>
+
                                href="https://2021.igem.org/Team:Groningen/Contribution">Contribution</a></li>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Medals_and_Awards">Medals</a></li>
+
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Implementation">Implementation</a></li>
 +
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Medals_and_Awards">Awards</a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 
                 <li><a class="dropdwn" href="#">Wet lab</a>
 
                 <li><a class="dropdwn" href="#">Wet lab</a>
 
                     <ul>
 
                     <ul>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Engineering">Engineering</a></li>
+
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Engineering">Engineering</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Notebook">Notebook</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Notebook">Notebook</a></li>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Experiments">Experiments</a></li>
+
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Experiments">Experiments</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Results">Results</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Results">Results</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Parts">Parts</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Parts">Parts</a></li>
Line 274: Line 271:
 
                     <ul>
 
                     <ul>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Team">Team</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Team">Team</a></li>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Attributions">Attributions</a></li>
+
                         <li><a class="dropdwnSub"
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Collaborations">Collaborations</a></li>
+
                                href="https://2021.igem.org/Team:Groningen/Attributions">Attributions</a></li>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Partnership">Partnership</a></li>
+
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Collaborations">Collaborations</a></li>
 +
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Partnership">Partnership</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Sponsors">Sponsors</a></li>
 
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Sponsors">Sponsors</a></li>
 
                     </ul>
 
                     </ul>
Line 282: Line 282:
 
                 <li><a class="dropdwn" href="#">Outreach</a>
 
                 <li><a class="dropdwn" href="#">Outreach</a>
 
                     <ul>
 
                     <ul>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Human_Practices">Human Practices</a></li>
+
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Human_Practices">Human
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Gold_Human_Practices">Integrated Human Practices</a></li>
+
                                Practices</a></li>
−
                         <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Communication">Education</a></li>
+
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Gold_Human_Practices">Integrated Human
 +
                                Practices</a></li>
 +
                         <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Communication">Education</a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 292: Line 296:
 
     </div>
 
     </div>
 
</body>
 
</body>
 +
<script>
 +
    var coll = document.getElementsByClassName("mainMenuMobile");
 +
    var i;
 +
 +
    for (i = 0; i < coll.length; i++) {
 +
        coll[i].addEventListener("click", function () {
 +
            this.classList.toggle("active");
 +
            var umainMenu = this.nextElementSibling;
 +
            if (umainMenu.style.display === "block") {
 +
                umainMenu.style.display = "none";
 +
            } else {
 +
                umainMenu.style.display = "block";
 +
            }
 +
        });
 +
    }
 +
 +
</script>
 +
 
</html>
 
</html>

Latest revision as of 17:07, 14 December 2021