Difference between revisions of "Template:Groningen/Navbar"

 
(25 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)---->
−
             div.my-content p:first-child {
+
    <script>
−
                display: none;
+
        !function () {
−
             }
+
             document.getElementById("HQ_page").removeAttribute("id");
−
            /*Nav bar styles*/
+
            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;
+
−
            }
+
  
−
            .dropdwn {
+
        * {
−
                display: block;
+
            box-sizing: border-box;
−
                width: 190px;
+
            padding: 0;
−
                padding: 0 60px 0 60px;
+
            margin: 0;
−
                color: #000000;
+
        }
−
                text-decoration: none;
+
−
                line-height: 85px;
+
−
                font-size: 18px;
+
−
            }
+
  
−
            .dropdwnSub {
+
        body {
−
                display: block;
+
            background: #ffffff;
−
                padding: 12px 14px 12px 14px;
+
            font-family: Montserrat;
−
                color: #000000;
+
            margin: 0;
−
                text-decoration: none;
+
            padding: 0;
−
                line-height: 30px;
+
        }
−
                font-size: 16px;
+
−
            }
+
  
−
            nav {
+
        content {
−
                height: 85px;
+
            width: 100%;
−
                background: #fdf8f0;
+
            margin: 0;
−
                width: 100%;
+
            padding: 0;
−
                font-family: 'Montserrat' !important;
+
        }
−
                text-decoration: none !important;
+
−
                color: #000000 !important;
+
−
                display: flex;
+
−
                flex-wrap: wrap;
+
−
                justify-content: space-between;
+
−
            }
+
  
−
            nav ul.mainMenu {
+
        .dropdwn {
−
                padding: 0;
+
            display: block;
−
                margin: 0;
+
            width: 190px;
−
                float: right;
+
            padding: 0 60px 0 60px;
−
                list-style: none;
+
            color: #000000;
−
             }
+
            text-decoration: none;
 +
             line-height: 85px;
 +
            font-size: 18px;
 +
        }
  
−
            nav li a {
+
        .dropdwnSub {
−
                display: inline-block;
+
            display: block;
−
                text-decoration: none !important;
+
            padding: 12px 14px 12px 14px;
−
                color: #000000 !important;
+
            color: #000000;
−
             }
+
            text-decoration: none;
 +
            line-height: 30px;
 +
             font-size: 16px;
 +
        }
  
−
            nav .mainMenu li {
+
        nav {
−
                background: #fdf8f0;
+
            height: 85px;
−
                position: relative;
+
            background: #fdf8f0;
−
                list-style: none;
+
            width: 100%;
−
                display: inline-block;
+
            font-family: 'Montserrat' !important;
−
                margin: 0 !important;
+
            text-decoration: none !important;
−
             }
+
            color: #000000 !important;
 +
            display: flex;
 +
            flex-wrap: wrap;
 +
            justify-content: space-between;
 +
             position: fixed;
 +
            top: 15px;
 +
            z-index: 100;
 +
        }
  
−
            nav .mainMenu li a:hover {
+
        nav ul.mainMenu {
−
                background: #f7eee2;
+
            padding: 0;
−
             }
+
             margin: 0;
 +
            float: right;
 +
            list-style: none;
 +
        }
  
−
            nav ul ul {
+
        nav li a {
−
                position: absolute;
+
            display: inline-block;
−
                top: 80px;
+
            text-decoration: none !important;
−
                display: none;
+
            color: #000000 !important;
−
                width: 100%;
+
        }
−
            }
+
  
−
            nav ul li:hover>ul {
+
        nav .mainMenu li {
−
                display: block;
+
            background: #fdf8f0;
−
                visibility: visible;
+
            position: relative;
−
                opacity: 1;
+
            list-style: none;
−
                transition: ease-in-out .35s;
+
            display: inline-block;
−
                pointer-events: all !important;
+
            margin: 0 !important;
−
            }
+
        }
  
−
            nav ul ul li {
+
        nav .mainMenu li a:hover {
−
                width: 100%;
+
            background: #f7eee2;
−
                float: right;
+
        }
−
                display: list-item;
+
−
                position: relative;
+
−
                right: 15px;
+
−
            }
+
  
−
            nav ul li ul li {
+
        nav ul ul {
−
                padding: 0 !important;
+
            position: absolute;
−
                margin: 0 !important;
+
            top: 80px;
−
             }
+
             display: none;
 +
            width: 100%;
 +
        }
  
−
             .titleNav,
+
        nav ul li:hover>ul {
−
            .logoNav {
+
             display: block;
−
                display: inline-block;
+
            visibility: visible;
−
             }
+
            opacity: 1;
 +
            transition: ease-in-out .35s;
 +
            pointer-events: all !important;
 +
        }
 +
 
 +
        nav ul ul li {
 +
            width: 100%;
 +
            float: right;
 +
            display: list-item;
 +
            position: relative;
 +
            right: 15px;
 +
        }
 +
 
 +
        nav ul li ul li {
 +
            padding: 0 !important;
 +
            margin: 0 !important;
 +
        }
 +
 
 +
        .titleNav,
 +
        .logoNav {
 +
            display: inline-block;
 +
        }
 +
 
 +
        #top_title {
 +
             display: none;
 +
        }
 +
 
 +
        .columnNav {
 +
            display: flex;
 +
            width: fit-content;
 +
            float: left;
 +
            padding: 0;
 +
        }
  
−
             #top_title {
+
        .logoNav {
 +
             margin: 5px 5px 5px 30px;
 +
        }
 +
 
 +
        .titleNav {
 +
            font-family: Montserrat !important;
 +
            font-size: 24px;
 +
            margin: auto 0 auto 0 !important;
 +
            padding-right: 30px;
 +
        }
 +
 
 +
        button.mainMenuMobile {
 +
            display: none;
 +
            margin: auto 50px auto 50px;
 +
            height: fit-content;
 +
            border: 0;
 +
            background: none;
 +
        }
 +
 
 +
 
 +
        button.mainMenuMobile i {
 +
            font-size: 24px;
 +
        }
 +
 
 +
        /*The following code hides p.titleNav when the screen width is less than 1100px.*/
 +
 
 +
        @media(max-width: 1100px) {
 +
            p.titleNav {
 
                 display: none;
 
                 display: none;
 
             }
 
             }
 +
        }
  
−
            .columnNav {
+
        /*The following code put a.dropdwn closer together when the screen is less than 880px*/
−
                display: flex;
+
−
                width: fit-content;
+
−
                float: left;
+
−
                padding: 0;
+
−
            }
+
  
−
             .logoNav {
+
        @media(max-width: 880px) {
−
                 margin: 5px 5px 5px 30px;
+
             a.dropdwn {
 +
                 width: 150px;
 +
                padding: 0 30px 0 30px;
 
             }
 
             }
 +
        }
  
−
            .titleNav {
+
        /*The follwing code puts the navigation menu into a mobile version when the screen is less than 750px*/
−
                font-family: Montserrat !important;
+
−
                font-size: 24px;
+
−
                margin: auto 0 auto 0 !important;
+
−
                padding-right: 30px;
+
−
            }
+
  
 +
        @media(max-width: 750px) {
 
             button.mainMenuMobile {
 
             button.mainMenuMobile {
−
                 display: none;
+
                 display: block;
−
                margin: auto 50px auto 50px;
+
−
                height: fit-content;
+
−
                border: 0;
+
−
                background: none;
+
 
             }
 
             }
  
−
             button.mainMenuMobile i {
+
             nav ul.mainMenu {
−
                 font-size: 24px;
+
                 width: 100%;
 +
                display: none;
 +
                flex-wrap: wrap;
 +
                flex-direction: column;
 
             }
 
             }
  
−
             /*The following code hides p.titleNav when the screen width is less than 1100px.*/
+
             nav ul.mainMenu li {
−
 
+
                width: 100%;;
−
            @media(max-width: 1100px) {
+
                 text-align: center;
−
                 p.titleNav {
+
−
                    display: none;
+
−
                }
+
 
             }
 
             }
  
−
             /*The following code put a.dropdwn closer together when the screen is less than 880px*/
+
             nav ul.mainMenu>li>a {
−
 
+
                 width: 100%;
−
            @media(max-width: 880px) {
+
                padding:0;
−
                 a.dropdwn {
+
−
                    width: 150px;
+
−
                    padding: 0 30px 0 30px;
+
−
                }
+
 
             }
 
             }
 +
            nav ul ul {
 +
            position: static;
 +
        }
  
−
            /*The follwing code puts the navigation menu into a mobile version when the screen is less than 750px*/
 
  
−
            @media(max-width: 750px) {
 
−
                button.mainMenuMobile {
 
−
                    display: block;
 
−
                }
 
  
−
                nav .mainMenu {
+
        }
−
                    width: 100%;
+
    </style>
−
                    display: none;
+
</head>
−
                    flex-wrap: wrap;
+
−
                    flex-direction: column;
+
−
                }
+
−
 
+
−
                a.dropdown {
+
−
                    width: 100%;
+
−
                }
+
−
 
+
−
                nav button:hover + .mainMenu  {
+
−
                    display: flex;
+
−
                    visibility: visible;
+
−
                }
+
  
 +
<body>
 +
    <div>
 +
        <nav>
 +
            <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>
 +
                <p class="titleNav">Groningen 2021</p>
 +
            </div>
 +
            <button class="mainMenuMobile" type="button">
 +
                <i class="fas fa-bars"></i>
 +
            </button>
 +
            <ul class="mainMenu" style="top: -100%">
 +
                <li><a class="dropdwn" href="#">Project</a>
 +
                    <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/Model">Model</a></li>
 +
                        <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Contribution">Contribution</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>
 +
                </li>
 +
                <li><a class="dropdwn" href="#">Wet lab</a>
 +
                    <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/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/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/Safety">Safety</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li><a class="dropdwn" href="#">People</a>
 +
                    <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/Attributions">Attributions</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>
 +
                    </ul>
 +
                </li>
 +
                <li><a class="dropdwn" href="#">Outreach</a>
 +
                    <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/Gold_Human_Practices">Integrated Human
 +
                                Practices</a></li>
 +
                        <li><a class="dropdwnSub"
 +
                                href="https://2021.igem.org/Team:Groningen/Communication">Education</a></li>
 +
                    </ul>
 +
                </li>
 +
            </ul>
 +
            <div class="closeMenu" style="display:none"><i class="fas fa-times"></i></div>
 +
        </nav>
 +
    </div>
 +
</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>
  
−
        </style>
 
−
    </head>
 
−
 
−
    <body>
 
−
        <div>
 
−
            <nav>
 
−
                <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>
 
−
                    <p class="titleNav">Groningen 2021</p>
 
−
                </div>
 
−
                <button class="mainMenuMobile" type="button">
 
−
                    <i class="fas fa-bars"></i>
 
−
                </button>
 
−
                <ul class="mainMenu" style="top: -100%">
 
−
                    <li><a class="dropdwn" href="#">Project</a>
 
−
                        <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/Model">Model</a></li>
 
−
                            <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Contribution">Contribution</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">Medals</a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li><a class="dropdwn" href="#">Wet lab</a>
 
−
                        <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/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/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/Safety">Safety</a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li><a class="dropdwn" href="#">People</a>
 
−
                        <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/Attributions">Attributions</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>
 
−
                        </ul>
 
−
                    </li>
 
−
                    <li><a class="dropdwn" href="#">Outreach</a>
 
−
                        <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/Gold_Human_Practices">Integrated Human Practices</a></li>
 
−
                            <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Communication">Education</a></li>
 
−
                        </ul>
 
−
                    </li>
 
−
                </ul>
 
−
                <div class="closeMenu" style="display:none"><i class="fas fa-times"></i></div>
 
−
            </nav>
 
−
        </div>
 
−
    </body>
 
 
</html>
 
</html>

Latest revision as of 17:07, 14 December 2021