Difference between revisions of "Team:UCSC/NavBar"

Revision as of 18:11, 23 August 2018 (view source)

NicholasHammond (Talk | contribs)

← Older edit

Latest revision as of 20:52, 17 October 2018 (view source)

RyanModlin (Talk | contribs)

(15 intermediate revisions by 2 users not shown)

Line 25:

−

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownTeam()">Team ~~⯆~~

+

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownTeam()">Team

−

~~<!--~~ <i class="fa fa-caret-down"></i~~> --~~>

+

</a>

<li><a href="https://2018.igem.org/Team:UCSC/Collaborations">Collaborations</a></li>

+

<li><a href="https://2018.igem.org/Team:UCSC/Partnership">Partnership</a></li>

<li><a href="https://2018.igem.org/Team:UCSC/Attributions">Attributions</a></li>

<li><a href="https://2018.igem.org/Team:UCSC/Sponsors">Sponsors</a></li>

Line 37:

Line 38:

−

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownProject()">Project ~~⯆~~

+

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownProject()">Project

−

~~<!--~~ <i class="fa fa-caret-down"></i~~> --~~>

+

</a>

−

<li><a href="https://2018.igem.org/Team:UCSC/Description">~~Description~~</a></li>

+

<li><a href="https://2018.igem.org/Team:UCSC/Description">Overview</a></li>

<li><a href="https://2018.igem.org/Team:UCSC/Design">Design</a></li>

−

<li><a href="https://2018.igem.org/Team:UCSC/~~Target_Organism~~">~~Target Organism</a></li>~~

+

<li><a href="https://2018.igem.org/Team:UCSC/Applied_Design">Applied Design</a></li>

−

~~<li><a href="https://2018.igem.org/Team:UCSC/Model">Modeling~~</a></li>

+

<li><a href="https://2018.igem.org/Team:UCSC/Experiments">Experiments</a></li>

−

~~<li><a href="https://2018.igem.org/Team:UCSC/Improve">Improvement</a></li>~~

<li><a href="https://2018.igem.org/Team:UCSC/Results">Results</a></li>

<li><a href="https://2018.igem.org/Team:UCSC/Demonstrate">Demonstrate</a></li>

Line 55:

Line 54:

−

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownHumanPractices()">Human Practices ~~⯆~~

+

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownHumanPractices()">Human Practices

−

~~<!--~~ <i class="fa fa-caret-down"></i~~> --~~>

+

</a>

Line 67:

Line 66:

−

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="~~toggleDropdownParts~~()">~~Parts ⯆~~

+

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownNotebook()">Notebook

−

+

+

</a>

+

+

<li><a href="https://2018.igem.org/Team:UCSC/Notebook">Weekly Overview</a></li>

+

<li><a href="https://2018.igem.org/Team:UCSC/Experiments#Expe_pro">Protocols</a></li>

+

</ul>

+

</div>

+

+

<a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownParts()">Parts

+

</a>

<li><a href="https://2018.igem.org/Team:UCSC/Parts">Overview</a></li>

−

~~<li><a href="https://2018.igem.org/Team:UCSC/Basic_Part">Basic Parts</a></li>~~

−

~~<li><a href="https://2018.igem.org/Team:UCSC/Composite_Part">Composite Parts</a></li>~~

+

<li><a href="https://2018.igem.org/Team:UCSC/Improve">Improvement</a></li>

</ul>

</div>

Line 98:

Line 106:

/* Toggle between adding and removing the "show" class to dropdown when the user clicks on the icon */

function toggleDropdownTeam() {

−

if ($(window).width() <= ~~1010~~) {

+

if ($(window).width() <= 1200) {

var x = document.getElementById("ddTeam");

if (x.className === "dropdown-content") {

Line 109:

Line 117:

function toggleDropdownProject() {

−

if ($(window).width() <= ~~1010~~) {

+

if ($(window).width() <= 1200) {

var x = document.getElementById("ddProject");

if (x.className === "dropdown-content") {

Line 120:

Line 128:

function toggleDropdownHumanPractices() {

−

if ($(window).width() <= ~~1010~~) {

+

if ($(window).width() <= 1200) {

var x = document.getElementById("ddHumanPractices");

+

if (x.className === "dropdown-content") {

+

x.className += "show";

+

} else {

+

x.className = "dropdown-content";

+

}

+

}

+

}

+

function toggleDropdownNotebook() {

+

if ($(window).width() <= 1200) {

+

var x = document.getElementById("ddNotebook");

if (x.className === "dropdown-content") {

x.className += "show";

Line 131:

Line 150:

function toggleDropdownParts() {

−

if ($(window).width() <= ~~1010~~) {

+

if ($(window).width() <= 1200) {

var x = document.getElementById("ddParts");

if (x.className === "dropdown-content") {

Line 144:

Line 163:

−

+

</div>

</body>

</html>

@@ Line 25: / Line 25: @@
      <div class="dropdown">
-       <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownTeam()">Team &#11206;
+       <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownTeam()">Team
-<!--        <i class="fa fa-caret-down"></i> -->
+        <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-content" id="ddTeam">
          <li><a href="https://2018.igem.org/Team:UCSC/Team">Meet the Team</a></li>
          <li><a href="https://2018.igem.org/Team:UCSC/Collaborations">Collaborations</a></li>
+        <li><a href="https://2018.igem.org/Team:UCSC/Partnership">Partnership</a></li>
          <li><a href="https://2018.igem.org/Team:UCSC/Attributions">Attributions</a></li>
          <li><a href="https://2018.igem.org/Team:UCSC/Sponsors">Sponsors</a></li>
@@ Line 37: / Line 38: @@
      <div class="dropdown">
-      <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownProject()">Project &#11206;
+      <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownProject()">Project
-<!--       <i class="fa fa-caret-down"></i> -->
+       <i class="fa fa-caret-down"></i>
       </a>
       <ul class="dropdown-content" id="ddProject">
-        <li><a href="https://2018.igem.org/Team:UCSC/Description">Description</a></li>
+        <li><a href="https://2018.igem.org/Team:UCSC/Description">Overview</a></li>
         <li><a href="https://2018.igem.org/Team:UCSC/Design">Design</a></li>
-        <li><a href="https://2018.igem.org/Team:UCSC/Target_Organism">Target Organism</a></li>
+        <li><a href="https://2018.igem.org/Team:UCSC/Applied_Design">Applied Design</a></li>
-       <li><a href="https://2018.igem.org/Team:UCSC/Model">Modeling</a></li>
         <li><a href="https://2018.igem.org/Team:UCSC/Experiments">Experiments</a></li>
-       <li><a href="https://2018.igem.org/Team:UCSC/Improve">Improvement</a></li>
         <li><a href="https://2018.igem.org/Team:UCSC/Results">Results</a></li>
         <li><a href="https://2018.igem.org/Team:UCSC/Demonstrate">Demonstrate</a></li>
@@ Line 55: / Line 54: @@
      <div class="dropdown">
-      <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownHumanPractices()">Human Practices &#11206;
+      <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownHumanPractices()">Human Practices
-<!--       <i class="fa fa-caret-down"></i> -->
+       <i class="fa fa-caret-down"></i>
       </a>
       <ul class="dropdown-content" id="ddHumanPractices">
@@ Line 67: / Line 66: @@
      <div class="dropdown">
-      <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownParts()">Parts &#11206;
+      <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownNotebook()">Notebook
-<!--       <i class="fa fa-caret-down"></i> -->
+       <i class="fa fa-caret-down"></i>
+     </a>
+     <ul class="dropdown-content" id="ddNotebook">
+       <li><a href="https://2018.igem.org/Team:UCSC/Notebook">Weekly Overview</a></li>
+       <li><a href="https://2018.igem.org/Team:UCSC/Experiments#Expe_pro">Protocols</a></li>
+     </ul>
+    </div>
+    <div class="dropdown">
+     <a href="javascript:void(0);" class="dropbtn dropdown-icon" onclick="toggleDropdownParts()">Parts
+       <i class="fa fa-caret-down"></i>
       </a>
       <ul class="dropdown-content" id="ddParts">
         <li><a href="https://2018.igem.org/Team:UCSC/Parts">Overview</a></li>
-       <li><a href="https://2018.igem.org/Team:UCSC/Basic_Part">Basic Parts</a></li>
-       <li><a href="https://2018.igem.org/Team:UCSC/Composite_Part">Composite Parts</a></li>
 <!--       <li><a href="https://2018.igem.org/Team:UCSC/Part_Collection">Part Collection</a></li> Probably won't use? -->
+       <li><a href="https://2018.igem.org/Team:UCSC/Improve">Improvement</a></li>
       </ul>
      </div>
@@ Line 98: / Line 106: @@
 /* Toggle between adding and removing the "show" class to dropdown when the user clicks on the icon */
 function toggleDropdownTeam() {
-   if ($(window).width() <= 1010) {
+   if ($(window).width() <= 1200) {
     var x = document.getElementById("ddTeam");
     if (x.className === "dropdown-content") {
@@ Line 109: / Line 117: @@
 function toggleDropdownProject() {
-   if ($(window).width() <= 1010) {
+   if ($(window).width() <= 1200) {
     var x = document.getElementById("ddProject");
     if (x.className === "dropdown-content") {
@@ Line 120: / Line 128: @@
 function toggleDropdownHumanPractices() {
-   if ($(window).width() <= 1010) {
+   if ($(window).width() <= 1200) {
     var x = document.getElementById("ddHumanPractices");
+   if (x.className === "dropdown-content") {
+       x.className += "show";
+   } else {
+       x.className = "dropdown-content";
+   }
+  }
+}
+function toggleDropdownNotebook() {
+  if ($(window).width() <= 1200) {
+   var x = document.getElementById("ddNotebook");
     if (x.className === "dropdown-content") {
         x.className += "show";
@@ Line 131: / Line 150: @@
 function toggleDropdownParts() {
-   if ($(window).width() <= 1010) {
+   if ($(window).width() <= 1200) {
     var x = document.getElementById("ddParts");
     if (x.className === "dropdown-content") {
@@ Line 144: / Line 163: @@
 <!-- Fill space so that other pages start underneath the navbar -->
-<div class="navFiller" style="height:45px; width:100%; clear:both;">
+<div class="navFiller" style="height: calc(45px + 0px); width:100%; clear:both;">
 </div>
 </body>
 </html>