Almironeto (Talk | contribs) |
|||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
− | + | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
− | + | @import url('https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css'); | |
− | + | * { | |
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | box-sizing: border-box; | ||
+ | font-family: 'Poppins', sans-serif; | ||
+ | } | ||
+ | .sidebar { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | height: 100%; | ||
+ | width: 340px; | ||
+ | background: #11101d; | ||
+ | z-index: 100; | ||
+ | transition: all 0.5s ease; | ||
+ | } | ||
+ | .sidebar.close { | ||
+ | width: 78px; | ||
+ | } | ||
+ | .sidebar .logo-details { | ||
+ | height: 60px; | ||
+ | width: 100%; | ||
display: flex; | display: flex; | ||
− | - | + | align-items: center; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .sidebar .logo-details i { | |
− | . | + | font-size: 30px; |
− | - | + | color: #fff; |
− | + | height: 50px; | |
+ | min-width: 78px; | ||
+ | text-align: center; | ||
+ | line-height: 50px; | ||
} | } | ||
− | + | .sidebar .logo-details .logo_name { | |
− | . | + | font-size: 22px; |
− | + | color: #fff; | |
+ | font-weight: 600; | ||
+ | transition: 0.3s ease; | ||
+ | transition-delay: 0.1s; | ||
} | } | ||
− | + | .sidebar.close .logo-details .logo_name { | |
− | . | + | transition-delay: 0s; |
− | - | + | opacity: 0; |
− | + | pointer-events: none; | |
} | } | ||
− | + | .sidebar .nav-links { | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
height: 100%; | height: 100%; | ||
− | + | padding: 30px 0 150px 0; | |
− | + | overflow: auto; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .sidebar.close .nav-links { | |
− | . | + | overflow: visible; |
− | + | } | |
+ | .sidebar .nav-links::-webkit-scrollbar { | ||
display: none; | display: none; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .sidebar .nav-links li { | |
− | . | + | position: relative; |
− | + | list-style: none; | |
− | + | transition: all 0.4s ease; | |
+ | } | ||
+ | .sidebar .nav-links li:hover { | ||
+ | background: #1d1b31; | ||
+ | } | ||
+ | .sidebar .nav-links li .iocn-link { | ||
display: flex; | display: flex; | ||
− | + | align-items: center; | |
− | + | justify-content: space-between; | |
− | + | } | |
− | + | .sidebar.close .nav-links li .iocn-link { | |
− | + | display: block | |
− | - | + | } |
− | + | .sidebar .nav-links li i { | |
− | - | + | height: 50px; |
− | + | min-width: 78px; | |
− | + | text-align: center; | |
− | font- | + | line-height: 50px; |
+ | color: #fff; | ||
+ | font-size: 20px; | ||
cursor: pointer; | cursor: pointer; | ||
− | + | transition: all 0.3s ease; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .sidebar .nav-links li.showMenu i.arrow { | |
− | . | + | transform: rotate(-180deg); |
− | + | ||
} | } | ||
− | + | .sidebar.close .nav-links i.arrow { | |
− | + | display: none; | |
− | . | + | } |
− | + | .sidebar .nav-links li a { | |
+ | display: flex; | ||
+ | align-items: center; | ||
text-decoration: none; | text-decoration: none; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .sidebar .nav-links li a .link_name { | |
− | . | + | font-size: 18px; |
− | + | font-weight: 400; | |
+ | color: #fff; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | .sidebar.close .nav-links li a .link_name { | ||
+ | opacity: 0; | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | .sidebar .nav-links li .sub-menu { | ||
+ | padding: 6px 6px 14px 80px; | ||
+ | margin-top: -10px; | ||
+ | background: #1d1b31; | ||
+ | display: none; | ||
+ | } | ||
+ | .sidebar .nav-links li.showMenu .sub-menu { | ||
display: block; | display: block; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .sidebar .nav-links li .sub-menu a { | |
− | . | + | color: #fff; |
− | - | + | font-size: 15px; |
− | + | padding: 5px 0; | |
+ | white-space: nowrap; | ||
+ | opacity: 0.6; | ||
+ | transition: all 0.3s ease; | ||
} | } | ||
− | + | .sidebar .nav-links li .sub-menu a:hover { | |
− | . | + | opacity: 1; |
− | + | ||
} | } | ||
− | + | .sidebar.close .nav-links li .sub-menu { | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
− | + | left: 100%; | |
− | + | top: -10px; | |
− | + | margin-top: 0; | |
− | + | padding: 10px 20px; | |
− | top: | + | border-radius: 0 6px 6px 0; |
− | + | opacity: 0; | |
− | + | display: block; | |
− | + | pointer-events: none; | |
− | + | transition: 0s; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .sidebar.close .nav-links li:hover .sub-menu { | |
− | . | + | top: 0; |
− | + | opacity: 1; | |
− | + | pointer-events: auto; | |
− | + | transition: all 0.4s ease; | |
} | } | ||
− | + | .sidebar .nav-links li .sub-menu .link_name { | |
− | . | + | |
display: none; | display: none; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .sidebar.close .nav-links li .sub-menu .link_name { | |
− | . | + | font-size: 18px; |
− | + | opacity: 1; | |
− | + | display: block; | |
− | display: | + | |
} | } | ||
− | + | .sidebar .nav-links li .sub-menu.blank { | |
− | . | + | opacity: 1; |
− | + | pointer-events: auto; | |
− | - | + | padding: 3px 20px 6px 16px; |
− | + | opacity: 0; | |
− | + | pointer-events: none; | |
− | + | ||
− | + | ||
− | + | ||
− | - | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .sidebar .nav-links li:hover .sub-menu.blank { | |
− | . | + | top: 50%; |
− | + | transform: translateY(-50%); | |
− | + | } | |
+ | .sidebar .profile-details { | ||
+ | position: fixed; | ||
+ | bottom: 0; | ||
+ | width: 400px; | ||
display: flex; | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: space-between; | ||
+ | background: #1d1b31; | ||
+ | padding: 12px 0; | ||
+ | transition: all 0.5s ease; | ||
} | } | ||
− | + | .sidebar.close .profile-details { | |
− | . | + | background: none; |
− | + | } | |
− | + | .sidebar.close .profile-details { | |
− | + | width: 78px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | width: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .sidebar .profile-details .profile-content { | |
− | . | + | |
− | + | ||
− | + | ||
display: flex; | display: flex; | ||
+ | align-items: center; | ||
} | } | ||
− | + | .sidebar .profile-details img { | |
− | . | + | height: 52px; |
+ | width: 52px; | ||
+ | object-fit: cover; | ||
+ | border-radius: 16px; | ||
+ | margin: 0 14px 0 12px; | ||
+ | background: #1d1b31; | ||
+ | transition: all 0.5s ease; | ||
+ | } | ||
+ | .sidebar.close .profile-details img { | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .sidebar .profile-details .profile_name, | ||
+ | .sidebar .profile-details .job { | ||
+ | color: #fff; | ||
+ | font-size: 18px; | ||
+ | font-weight: 500; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | .sidebar.close .profile-details i, | ||
+ | .sidebar.close .profile-details .profile_name, | ||
+ | .sidebar.close .profile-details .job { | ||
display: none; | display: none; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .sidebar .profile-details .job { | |
− | . | + | font-size: 12px; |
− | + | } | |
− | + | .home-section { | |
+ | position: relative; | ||
+ | background: #E4E9F7; | ||
+ | height: 100vh; | ||
+ | left: 340px; | ||
+ | width: calc(100% - 260px); | ||
+ | transition: all 0.5s ease; | ||
+ | } | ||
+ | .sidebar.close ~ .home-section { | ||
+ | left: 78px; | ||
+ | width: calc(100% - 78px); | ||
+ | } | ||
+ | .home-section .home-content { | ||
+ | height: 60px; | ||
display: flex; | display: flex; | ||
+ | align-items: center; | ||
} | } | ||
− | + | .home-section .home-content .bx-menu, | |
− | . | + | .home-section .home-content .text { |
− | + | color: #11101d; | |
− | + | font-size: 35px; | |
− | + | } | |
− | + | .home-section .home-content .bx-menu { | |
− | + | margin: 0 15px; | |
− | + | ||
− | + | ||
− | - | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
cursor: pointer; | cursor: pointer; | ||
− | font-weight: | + | } |
+ | .home-section .home-content .text { | ||
+ | font-size: 26px; | ||
+ | font-weight: 600; | ||
+ | } | ||
+ | @media (max-width: 420px) { | ||
+ | .sidebar.close .nav-links li .sub-menu { | ||
+ | display: none; | ||
+ | } | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
− | + | <body> | |
− | + | <div class="sidebar close"> | |
− | + | <div class="logo-details"> | |
− | + | <i class='bx bxl-c-plus-plus'></i> | |
− | + | <span class="logo_name">Friendzymes</span> | |
− | + | ||
</div> | </div> | ||
− | < | + | <ul class="nav-links"> |
− | + | <li> | |
− | + | <a href="#"> | |
− | + | <i class='bx bx-grid-alt' ></i> | |
− | + | <span class="link_name">Home</span> | |
− | + | </a> | |
− | + | <ul class="sub-menu blank"> | |
− | + | <li><a class="link_name" href="https://2021.igem.org/Team:Open_Science_Global">Home</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li> | |
− | + | <div class="iocn-link"> | |
− | + | <a href="#"> | |
− | + | <i class='bx bx-collection' ></i> | |
− | + | <span class="link_name">Project</span> | |
− | + | </a> | |
− | + | <i class='bx bxs-chevron-down arrow' ></i> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a class="link_name" href="#">Project</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Description">Description</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Engineering">Engineering Success</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Implementation">Proposed Implementation</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Proof_Of_Concept">Proof of Concept</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Entrepreneurship">Entrepreneurship</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Notebook">Notebook</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="iocn-link"> | ||
+ | <a href="#"> | ||
+ | <i class='bx bx-book-alt' ></i> | ||
+ | <span class="link_name">Results</span> | ||
+ | </a> | ||
+ | <i class='bx bxs-chevron-down arrow' ></i> | ||
+ | </div> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a class="link_name" href="#">Results</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Software">Software</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Wetware">Wetware</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Parts">Parts</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Part_Collection">Parts Collection</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Hardware">Hardware</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="iocn-link"> | ||
+ | <a href="#"> | ||
+ | <i class='bx bx-plug' ></i> | ||
+ | <span class="link_name">Engagement</span> | ||
+ | </a> | ||
+ | <i class='bx bxs-chevron-down arrow' ></i> | ||
+ | </div> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a class="link_name" href="#">Engagement</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Human_Practices">Integrated Human Practices</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Education">Education</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Safety">Safety</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Communication">Communication</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Collaborations">Collaboration</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="iocn-link"> | ||
+ | <a href="#"> | ||
+ | <i class='bx bx-compass' ></i> | ||
+ | <span class="link_name">Team</span> | ||
+ | </a> | ||
+ | <i class='bx bxs-chevron-down arrow' ></i> | ||
+ | </div> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a class="link_name" href="#">Team</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Team">Team Members</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Attributions">Attributions & Sponsors</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Inclusivity">Inclusivity</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="iocn-link"> | ||
+ | <a href="#"> | ||
+ | <i class='bx bx-compass' ></i> | ||
+ | <span class="link_name">For Judges</span> | ||
+ | </a> | ||
+ | <i class='bx bxs-chevron-down arrow' ></i> | ||
+ | </div> | ||
+ | <ul class="sub-menu"> | ||
+ | <li><a class="link_name" href="#">For Judges</a></li> | ||
+ | <li><a href="https://igem.org/2021_Judging_Form?id=4103">Judging Form</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Contribution">Contribution/Medals</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Part_Collection">Parts Collection</a></li> | ||
+ | <li><a href="https://github.com/Open-Science-Global">Software</a></li> | ||
+ | <li><a href="https://2021.igem.org/Team:Open_Science_Global/Excellence">Excellence: Diversity</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <section class="home-section"> | ||
+ | <div class="home-content"> | ||
+ | <i class='bx bx-menu' ></i> | ||
+ | <span class="text">Drop Down Sidebar</span> | ||
</div> | </div> | ||
− | + | </section> | |
− | + | <script> | |
− | + | let arrow = document.querySelectorAll(".arrow"); | |
− | + | for (var i = 0; i < arrow.length; i++) { | |
− | + | arrow[i].addEventListener("click", (e)=>{ | |
− | + | let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow | |
− | + | arrowParent.classList.toggle("showMenu"); | |
− | + | }); | |
− | + | } | |
− | + | let sidebar = document.querySelector(".sidebar"); | |
− | + | let sidebarBtn = document.querySelector(".bx-menu"); | |
− | + | console.log(sidebarBtn); | |
− | + | sidebarBtn.addEventListener("click", ()=>{ | |
− | } | + | sidebar.classList.toggle("close"); |
− | + | }); | |
− | + | </script> | |
− | + | </body> | |
− | + | </html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Revision as of 15:37, 21 October 2021
Drop Down Sidebar