Difference between revisions of "Template:TokyoTech/header"

 
(28 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{TokyoTech/font-awesome/css/font-awesome.min}}
 
−
{{TokyoTech/font-awesome/css/font-awesome}}
 
−
{{TokyoTech/ionicons-2.0.1/css/ionicons.min}}
 
−
{{TokyoTech/css/reset}}
 
−
{{TokyoTech/css/bootstrap.min}}
 
−
{{TokyoTech/css/magnific-popup}}
 
 
{{TokyoTech/css/main}}
 
{{TokyoTech/css/main}}
−
{{TokyoTech/js/bootstrap.min}}
 
−
{{TokyoTech/js/jquery-3.1.0.min}}
 
−
{{TokyoTech/js/jquery.magnific-popup.min}}
 
  
 
<html>
 
<html>
−
<head>
+
<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
−
<title>Coli Sapiens</title>
+
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
−
                <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
+
  <div class="w3-container">
−
<meta charset="UTF-8" />
+
    <img src="https://static.igem.org/mediawiki/2017/5/57/T--TokyoTech--logo2.png" style="width: 100%">
−
<meta name="viewport" content="width=device-width, initial-scale=1" />
+
  </div>
−
<link href="https://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet">
+
  <div class="w3-bar-block" style="padding-top: 15px">
−
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
+
    <ul id="normal" class="dropmenu">
−
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a>  
−
                <script>
+
    <ul>
−
$(document).ready(function () {
+
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">1</a></li>
−
// Menu.
+
     </ul>
−
var $menu = $('#menu');
+
     </li>
−
var $body = $('body');
+
    </ul>
−
 
+
    <a href="#project" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Project</a>  
−
$menu.wrapInner('<div class="inner"></div>');
+
    <a href="#modeling" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Modeling</a>  
−
 
+
    <a href="#hp" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Human Practices</a>  
−
$menu._locked = false;
+
    <a href="#notebook" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Notebook</a>  
−
 
+
    <a href="#team" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Team</a>
−
$menu._lock = function() {
+
    <a href="#sponsers" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Sponsers</a>
−
 
+
  </div>
−
if ($menu._locked)
+
</nav>
−
return false;
+
</html>
−
 
+
−
$menu._locked = true;
+
−
 
+
−
window.setTimeout(function() {
+
−
$menu._locked = false;
+
−
}, 350);
+
−
 
+
−
return true;
+
−
 
+
−
};
+
−
 
+
−
$menu._show = function() {
+
−
 
+
−
if ($menu._lock())
+
−
$body.addClass('is-menu-visible');
+
−
 
+
−
};
+
−
 
+
−
$menu._hide = function() {
+
−
 
+
−
if ($menu._lock())
+
−
$body.removeClass('is-menu-visible');
+
−
 
+
−
};
+
−
 
+
−
$menu._toggle = function() {
+
−
 
+
−
if ($menu._lock())
+
−
$body.toggleClass('is-menu-visible');
+
−
 
+
−
};
+
−
 
+
−
$menu
+
−
.appendTo($body)
+
−
.on('click', function(event) {
+
−
event.stopPropagation();
+
−
})
+
−
.on('click', 'a', function(event) {
+
−
 
+
−
var href = $(this).attr('href');
+
−
 
+
−
event.preventDefault();
+
−
event.stopPropagation();
+
−
 
+
−
// Hide.
+
−
$menu._hide();
+
−
 
+
−
// Redirect.
+
−
if (href == '#menu')
+
−
return;
+
−
 
+
−
window.setTimeout(function() {
+
−
window.location.href = href;
+
−
}, 350);
+
−
 
+
−
})
+
−
.append('<a class="close" href="#menu">Close</a>');
+
−
 
+
−
$body
+
−
.on('click', 'a[href="#menu"]', function(event) {
+
−
 
+
−
event.stopPropagation();
+
−
event.preventDefault();
+
−
 
+
−
// Toggle.
+
−
$menu._toggle();
+
−
 
+
−
})
+
−
.on('click', function(event) {
+
−
 
+
−
// Hide.
+
−
$menu._hide();
+
−
 
+
−
})
+
−
.on('keydown', function(event) {
+
−
 
+
−
// Hide on escape.
+
−
if (event.keyCode == 27)
+
−
$menu._hide();
+
−
 
+
−
});
+
−
 
+
−
});
+
−
 
+
−
/*--------------popup------------*/
+
−
$('.open-popup-link').magnificPopup({
+
−
  type:'inline',
+
−
  midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
+
−
  gallery:{
+
−
     enabled:true
+
−
  }
+
−
});
+
−
 
+
−
 
+
−
$('.open-popup-link').magnificPopup({
+
−
  type:'inline',
+
−
  midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
+
−
  gallery:{
+
−
     enabled:true
+
−
  }
+
−
});
+
−
</script>
+
−
               
+
−
</head>
+
−
 
+
−
<body>
+
−
<section class="head">
+
−
<div class="container">
+
−
<div class="row">
+
−
<div class="col-md-12">
+
−
<header class="header">
+
−
<div class="inner">
+
−
<!-- Logo -->
+
−
<a href="#menu" class="nav-bars">
+
−
<img src="https://static.igem.org/mediawiki/2017/9/9c/T--TokyoTech--nav_icon.svg" class="img-responsive" alt="Collapsable Navbar">
+
−
</a>
+
−
<a href="https://2017.igem.org/Team:TokyoTech" class="logo">
+
−
<span class="symbol"><img src="https://static.igem.org/mediawiki/2017/4/4f/T--TokyoTech--logo170906_01.png" alt="Title" /></span><span class="title">Coli Sapiens</span>
+
−
</a>
+
−
</div>
+
−
</header>
+
−
<!-- Menu -->
+
−
<nav id="menu">
+
−
<h2>Menu</h2>
+
−
<ul>
+
−
<li><a href="index.html">Home</a></li>
+
−
<li><a href="elements.html">Elements</a></li>
+
−
</ul>
+
−
</nav>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
 
+
−
 
+
−
</body>
+
−
</html>
+

Latest revision as of 02:09, 21 October 2017