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 53: Line 181:
 
             </div>
 
             </div>
 
         </button>
 
         </button>
−
         <button class="nav-el" id="el-1" data-id="ov-3" onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/encode_decode',1000)"
+
         <button class="nav-el" id="el-1" data-id="ov-3" disabled="disabled"
 
             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 63: Line 191:
 
                                 onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/encode_decode',1000)">Encode and Decode</jump></li>
 
                                 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="#"
 
                         <li style="list-style-type:none"><jump href="#"
−
                                 onClick="delayURL('http://www.baidu.com/',1000)">Encryption</jump></li>
+
                                 onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/Encryption',1000)">Encryption</jump></li>
 
                         <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/Feature_Extraction',1000)">Feature Extraction</jump></li>
 
                                 onClick="delayURL('https://2019.igem.org/Team:Tsinghua-A/Feature_Extraction',1000)">Feature Extraction</jump></li>
Line 90: Line 218:
 
             </div>
 
             </div>
 
         </button>
 
         </button>
−
         <button class="nav-el" id="el-1" data-id="ov-6" onClick="delayURL('http://www.baidu.com/',1000)"
+
         <button class="nav-el" id="el-1" data-id="ov-6" disabled="disabled"
 
             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 106: Line 234:
 
             </div>
 
             </div>
 
         </button>
 
         </button>
−
         <button class="nav-el" id="el-1" data-id="ov-7" onClick="delayURL('http://www.baidu.com/',1000)"
+
         <button class="nav-el" id="el-1" data-id="ov-7" disabled="disabled"
 
             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 114: Line 242:
 
                     <ul>
 
                     <ul>
 
                         <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('https://2019.igem.org/Team:Tsinghua-A/description',1000)">Description</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 197: Line 325:
  
 
     </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:55, 22 October 2019

',1000)">Description</jump> 

             </li>
  • <jump href="#" onClick="delayURL('http://www.baidu.com/',1000)">Adward</jump> 
    •            </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>

    </html>