Difference between revisions of "Team:Tsinghua-A/navpage"

Line 1: Line 1:
 
{{Tsinghua-A}}
 
{{Tsinghua-A}}
<html lang="zh" style=""
 
  class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
 
 
<head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
  <link rel="stylesheet" href="https://2019.igem.org/Template:Tsinghua-A/navcss?action=raw&ctype=text/css">
 
  <link rel="stylesheet" href="https://2019.igem.org/Template:Tsinghua-A/navstylecss?action=raw&ctype=text/css">
 
  <link rel="stylesheet" href="https://2019.igem.org/Template:Tsinghua-A/nav3css?action=raw&ctype=text/css">
 
 
 
  <link rel="stylesheet" type="text/css"
 
    href="https://2019.igem.org/Template:Tsinghua-A/navdefaultcss?action=raw&ctype=text/css">
 
  <!--used for change font -->
 
 
  <script type="text/javascript">
 
    function delayURL(url, time) {
 
      setTimeout("top.location.href = '" + url + "'", 500);
 
      //change delay time here or change 500->time to use customize time;
 
    }
 
  </script>
 
</head>
 
 
<body class="dm-demo3 noscroll">
 
 
 
  <!-- Demo Navigation -->
 
 
  <div style="height:50em">
 
    <nav class="nav clearfix fx-box_rotate">
 
      <button class="nav-el" id="el-1" data-id="ov-1"
 
        onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/background',1000)"
 
        style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:10%;top:0%">
 
        <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
 
 
          <li style="list-style-type:circle">
 
            <jump href="#" onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/background',1000)"
 
              style="font-size:30px">Background</jump>
 
          </li>
 
 
        </div>
 
      </button>
 
      <button class="nav-el" id="el-1" data-id="ov-2" onClick="delayURL('http://www.baidu.com/',1000)"
 
        style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:40%;top:0%">
 
        <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
 
 
          <li style="list-style-type:circle">
 
            <jump href="#" onClick="delayURL('http://www.baidu.com/',1000)" style="font-size:30px">HP</jump>
 
          </li>
 
 
        </div>
 
      </button>
 
      <button class="nav-el" id="el-1" data-id="ov-3"
 
        onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/encode_decode',1000)"
 
        style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:70%;top:0%">
 
        <div style="position:absolute;right:20%;top:15%;text-decoration:none;font-size:15px;" ;>
 
 
          <li style="list-style-type:circle">
 
            <jump href="#" onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/encode_decode',1000)"
 
              style="font-size:30px">Project</jump>
 
            <ul>
 
              <li style="list-style-type:none">
 
                <jump href="#" onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/encode_decode',1000)">Encode and
 
                  Decode</jump>
 
              </li>
 
              <li style="list-style-type:none">
 
                <jump href="#" onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/Encryption',1000)">Encryption
 
                </jump>
 
              </li>
 
              <li style="list-style-type:none">
 
                <jump href="#" onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/Feature_Extraction',1000)">
 
                  Feature Extraction</jump>
 
              </li>
 
            </ul>
 
          </li>
 
        </div>
 
      </button>
 
      <button class="nav-el" id="el-1" data-id="ov-4" onClick="delayURL('http://www.baidu.com/',1000)"
 
        style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:10%;top:40%">
 
        <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
 
 
          <li style="list-style-type:circle">
 
            <jump href="#" onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/Experiments',1000)"
 
              style="font-size:30px">Experiments</jump>
 
          </li>
 
 
        </div>
 
      </button>
 
      <button class="nav-el" id="el-1" data-id="ov-5" onClick="delayURL('http://www.baidu.com/',1000)"
 
        style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:30%;top:30%">
 
        <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
 
 
          <li style="list-style-type:circle">
 
            <jump href="#" onClick="delayURL('http://www.baidu.com/',1000)" style="font-size:30px">Team</jump>
 
          </li>
 
 
        </div>
 
      </button>
 
      <button class="nav-el" id="el-1" data-id="ov-6" onClick="delayURL('http://www.baidu.com/',1000)"
 
        style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:50%;top:40%">
 
        <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
 
 
          <li style="list-style-type:circle">
 
            <jump href="#" onClick="delayURL('http://www.baidu.com/',1000)" style="font-size:30px">Software</jump>
 
            <ul>
 
              <li style="list-style-type:none">
 
                <jump href="#" onClick="delayURL('http://www.baidu.com/',1000)">Software</jump>
 
              </li>
 
              <li style="list-style-type:none">
 
                <jump href="#" onClick="delayURL('http://www.baidu.com/',1000)">Software</jump>
 
              </li>
 
            </ul>
 
          </li>
 
 
        </div>
 
      </button>
 
      <button class="nav-el" id="el-1" data-id="ov-7" onClick="delayURL('http://www.baidu.com/',1000)"
 
        style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:70%;top:30%">
 
        <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
 
 
          <li style="list-style-type:circle">
 
            <jump href="#" onClick="delayURL('http://www.baidu.com/',1000)" style="font-size:30px">Adward</jump>
 
            <ul>
 
              <li style="list-style-type:none">
 
                <jump href="#" onClick="delayURL('{{Tsinghua-A}}
 
 
<html lang="zh" style=""
 
<html lang="zh" style=""
 
     class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
 
     class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
Line 181: Line 53:
 
             </div>
 
             </div>
 
         </button>
 
         </button>
         <button class="nav-el" id="el-1" data-id="ov-3" disabled="disabled"
+
         <button class="nav-el" id="el-1" data-id="ov-3" onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/encode_decode',1000)"
 
             style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:70%;top:0%">
 
             style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:70%;top:0%">
 
             <div style="position:absolute;right:20%;top:15%;text-decoration:none;font-size:15px;" ;>
 
             <div style="position:absolute;right:20%;top:15%;text-decoration:none;font-size:15px;" ;>
Line 218: Line 90:
 
             </div>
 
             </div>
 
         </button>
 
         </button>
         <button class="nav-el" id="el-1" data-id="ov-6" disabled="disabled"
+
         <button class="nav-el" id="el-1" data-id="ov-6" onClick="delayURL('http://www.baidu.com/',1000)"
 
             style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:50%;top:40%">
 
             style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:50%;top:40%">
 
             <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
 
             <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
Line 234: Line 106:
 
             </div>
 
             </div>
 
         </button>
 
         </button>
         <button class="nav-el" id="el-1" data-id="ov-7" disabled="disabled"
+
         <button class="nav-el" id="el-1" data-id="ov-7" onClick="delayURL('http://www.baidu.com/',1000)"
 
             style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:70%;top:30%">
 
             style="padding-bottom: 26%;height:0;width:26%;position:absolute;left:70%;top:30%">
 
             <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
 
             <div style="position:absolute;right:20%;top:30%;text-decoration:none;font-size:15px;" ;>
Line 242: Line 114:
 
                     <ul>
 
                     <ul>
 
                         <li style="list-style-type:none"><jump href="#"
 
                         <li style="list-style-type:none"><jump href="#"
                                 onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/description',1000)">Description</jump></li>
+
                                 onClick="delayURL('http://www.baidu.com/',1000)">Adward</jump></li>
 
                         <li style="list-style-type:none"><jump href="#"
 
                         <li style="list-style-type:none"><jump href="#"
 
                                 onClick="delayURL('http://www.baidu.com/',1000)">Adward</jump></li>
 
                                 onClick="delayURL('http://www.baidu.com/',1000)">Adward</jump></li>
Line 325: Line 197:
  
 
     </script>
 
     </script>
 
</body>
 
 
</html>
 
',1000)">Description</jump>
 
              </li>
 
              <li style="list-style-type:none">
 
                <jump href="#" onClick="delayURL('http://www.baidu.com/',1000)">Adward</jump>
 
              </li>
 
            </ul>
 
          </li>
 
 
        </div>
 
      </button>
 
 
    </nav>
 
  </div>
 
 
 
 
 
 
 
 
  <script>
 
    /* Variables */
 
    var AnimEnd = 'animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd';
 
    var nav = $('.nav');
 
    var navButton = $('.nav-el');
 
    var overlay = $('.overlay');
 
 
    /* On menu button click event */
 
    $(navButton).click(function (event) {
 
 
      /* This conditional statement is here to prevent
 
      clicks on inactive buttons on IE10, as pointer-events
 
      cannot be applied on non-SVG elements */
 
 
      if ($(this).hasClass("inactive")) {
 
 
        event.preventDefault();
 
 
      } else {
 
 
        /* Remove old previous classes */
 
        $(navButton).removeClass('inactive_reverse active_reverse');
 
        $(nav).removeClass('fx-box_rotate fx-box_rotate_reverse');
 
        $(overlay).removeClass('active active_reverse');
 
 
        /* Add classes on defined elements */
 
        $(this).siblings().addClass('inactive');
 
        $(this).addClass('active');
 
        $(nav).addClass('fx-box_rotate');
 
 
        /* Activate related overlay */
 
        var o_target = $(this).data('id');
 
        $('#' + o_target).addClass('active');
 
 
        /* Prevent scrolling */
 
        $("body").addClass('noscroll');
 
 
      }
 
 
    });
 
 
    /* On close button click event */
 
    $(".close").click(function () {
 
 
      /* Add *_reverse classes */
 
      $('.active', nav).removeClass('active').addClass('active_reverse');
 
      $('.inactive', nav).addClass('inactive_reverse');
 
      $(nav).addClass('fx-box_rotate_reverse');
 
      $(this).parent().addClass('active_reverse');
 
 
      /* Remove .noscroll and .inactive when animation is finished */
 
      $('.inactive_reverse').bind(AnimEnd, function () {
 
 
        $('body').removeClass('noscroll');
 
        $(navButton).removeClass('inactive');
 
        $('.inactive_reverse').unbind(AnimEnd);
 
 
      });
 
 
    });
 
 
 
 
 
  </script>
 
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 03:56, 22 October 2019