Difference between revisions of "Team:USTC/m"

Line 17: Line 17:
  
  
−
<body data-spy="scroll" data-target="#navId" data-offset="50">
+
<body>
 
     <div class="wrapper">
 
     <div class="wrapper">
 
         <!-- Sidebar  -->
 
         <!-- Sidebar  -->
Line 26: Line 26:
  
 
             <div class="navbar-brand">
 
             <div class="navbar-brand">
−
                 <img width="250px" src="https://static.igem.org/mediawiki/2018/1/1e/T--USTC--sidenav-logo.png" />
+
                 <img width="270px" src="https://static.igem.org/mediawiki/2018/1/1e/T--USTC--sidenav-logo.png" />
 
             </div>
 
             </div>
 
             <ul class="list-unstyled components">
 
             <ul class="list-unstyled components">
 
                 <li class="active">
 
                 <li class="active">
−
                     <a href="#">Home</a>
+
                     <a href="#">HOME</a>
 
                 </li>
 
                 </li>
 
                 <li>
 
                 <li>
−
                     <a href="#projectSubmenu" data-toggle="collapse" aria-expanded="false">PROJECTS <i class="fa fa-caret-down"></i></a>
+
                     <a href="#projectSubmenu" data-toggle="collapse" aria-expanded="false">PROJECT <i class="fa fa-caret-down"></i></a>
 
                     <ul class="collapse list-unstyled" id="projectSubmenu">
 
                     <ul class="collapse list-unstyled" id="projectSubmenu">
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 1</a>
+
                             <a href="#">Description</a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 2</a>
+
                             <a href="#">Design</a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 3</a>
+
                             <a href="#">Results</a>
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
                <!--Project-->
 
                 <li>
 
                 <li>
−
                     <a href="#notebookSubmenu" data-toggle="collapse" aria-expanded="false">NOTEBOOK</a>
+
                     <a href="#modelSubmenu" data-toggle="collapse" aria-expanded="false">MODEL <i class="fa fa-caret-down"></i></a>
−
                     <ul class="collapse list-unstyled" id="notebookSubmenu">
+
                     <ul class="collapse list-unstyled" id="modelSubmenu">
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 1</a>
+
                             <a href="#">Overview</a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 2</a>
+
                             <a href="#">Single-cell Model</a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 3</a>
+
                             <a href="#">System Analysis</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Effectiveness</a>
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
                <!--Model-->
 +
                <li>
 +
                    <a href="#">INTERLAB</a>
 +
                </li>
 +
                <!--Interlab-->
 
                 <li>
 
                 <li>
−
                     <a href="#partsSubmenu" data-toggle="collapse" aria-expanded="false">PARTS</a>
+
                     <a href="#partsSubmenu" data-toggle="collapse" aria-expanded="false">PARTS <i class="fa fa-caret-down"></i></a>
 
                     <ul class="collapse list-unstyled" id="partsSubmenu">
 
                     <ul class="collapse list-unstyled" id="partsSubmenu">
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 1</a>
+
                             <a href="#">Basic Parts</a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 2</a>
+
                             <a href="#">Composite Parts</a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#">Home 3</a>
+
                             <a href="#">Contributions</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Improve</a>
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
                <!--Parts-->
 
                 <li>
 
                 <li>
−
                     <a href="#">About</a>
+
                     <a href="#notebookSubmenu" data-toggle="collapse" aria-expanded="false">NOTEBOOK <i class="fa fa-caret-down"></i></a>
−
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
+
                     <ul class="collapse list-unstyled" id="notebookSubmenu">
−
                     <ul class="collapse list-unstyled" id="pageSubmenu">
+
 
                         <li>
 
                         <li>
−
                             <a href="#">Page 1</a>
+
                             <a href="#">Monthly Diary</a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#">Page 2</a>
+
                             <a href="#">Protocols</a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="#">Page 3</a>
+
                             <a href="#">Materials</a>
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
                <!--Notebook-->
 
                 <li>
 
                 <li>
−
                     <a href="#">Portfolio</a>
+
                    <a href="#HPSubmenu" data-toggle="collapse" aria-expanded="false">HUMAN PRACTICE <i class="fa fa-caret-down"></i></a>
 +
                    <ul class="collapse list-unstyled" id="HPSubmenu">
 +
                        <li>
 +
                            <a href="#">Overview</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Survey</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Analyze</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Practice</a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="#">Teamwork</a>
 +
                        </li>
 +
                    </ul>
 +
                </li>
 +
                <!--Human practice-->
 +
                <li>
 +
                     <a href="#">COLLABORATION</a>
 
                 </li>
 
                 </li>
 
                 <li>
 
                 <li>
−
                     <a href="#">Contact</a>
+
                     <a href="#">TEAM</a>
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
Line 106: Line 140:
 
                     <button type="button" id="sidebarCollapse" class="btn btn-info">
 
                     <button type="button" id="sidebarCollapse" class="btn btn-info">
 
                         <i class="fas fa-align-left"></i>
 
                         <i class="fas fa-align-left"></i>
−
                         <span>Navigation</span>
+
                         <span>Nav</span>
 
                     </button>
 
                     </button>
−
                     <img style="height:40px;" src="https://static.igem.org/mediawiki/2018/5/5b/T--USTC--mobile-title.png" >
+
                     <img height="40px" src="https://static.igem.org/mediawiki/2018/5/5b/T--USTC--mobile-title.png">
 
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
                         <ul class="nav navbar-nav ml-auto">
 
                         <ul class="nav navbar-nav ml-auto">
Line 179: Line 213:
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 +
 
     <div class="overlay"></div>
 
     <div class="overlay"></div>
  
Line 198: Line 233:
 
                 $('#sidebar').removeClass('active');
 
                 $('#sidebar').removeClass('active');
 
                 $('.overlay').removeClass('active');
 
                 $('.overlay').removeClass('active');
 +
                $('li:not(".active") a[aria-expanded=true]').click();
 
             });
 
             });
  
Line 204: Line 240:
 
                 $('.overlay').addClass('active');
 
                 $('.overlay').addClass('active');
 
                 $('.collapse.in').toggleClass('in');
 
                 $('.collapse.in').toggleClass('in');
−
                $('a[aria-expanded=true]').attr('aria-expanded', 'false');
 
 
             });
 
             });
−
        });
+
            $("#top_title").hide();
−
        $("#top_title").hide();
+
            $(".mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul").css("margin","0");
−
        $(".mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul").css("margin","0");
+
            $("body").scrollspy({ target: "#navId", offset: 50 });
 
     </script>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 16:03, 15 October 2018

Collapsible Sidebar Using Bootstrap 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.