Difference between revisions of "Team:Emory/Safety"

Line 27: Line 27:
  
  
−
/* Style the buttons that are used to open and close the accordion panel */
+
/* NAV STYLE*/
−
button.accordion {
+
*{margin:0;padding:0;text-decoration:none;}
−
    background-color: #eee;
+
−
    color: #444;
+
−
    cursor: pointer;
+
−
    padding: 18px;
+
−
    width: 100%;
+
−
    text-align: left;
+
−
    border: none;
+
−
    outline: none;
+
−
    transition: 0.4s;
+
−
}
+
  
−
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+
nav{position:relative;width:980px;margin:0px 0px -50px 0px; auto;}
−
button.accordion.active, button.accordion:hover {
+
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
−
    background-color: #ddd;
+
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
−
}
+
#cssmenu #head-mobile{display:none}
 +
#cssmenu{font-family:sans-serif;background:#333}
 +
#cssmenu > ul > li{float:left}
 +
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
 +
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
 +
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#448D00!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
 +
#cssmenu > ul > li.has-sub > a{padding-right:30px}
 +
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
 +
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
 +
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
 +
#cssmenu ul ul{position:absolute;left:-9999px}
 +
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
 +
#cssmenu ul ul li:hover{}
 +
#cssmenu li:hover > ul{left:auto;margin:0px;}
 +
#cssmenu li:hover > ul > li{height:35px}
 +
#cssmenu ul ul ul{margin-left:100%;top:0}
 +
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
 +
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
 +
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
 +
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
 +
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
 +
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
 +
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
 +
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
 +
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}
  
−
/* Style the accordion panel. Note: hidden by default */
+
@media screen and (max-width:700px){
−
div.panel {
+
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
−
    padding: 0 18px;
+
.logo2{display:none}
−
    background-color: white;
+
nav{width:100%;}
−
    max-height: 0;
+
#cssmenu{width:100%}
−
    overflow: hidden;
+
#cssmenu ul{width:100%;display:none}
−
    transition: 0.6s ease-in-out;
+
#cssmenu ul li{width:100%;border-top:1px solid #444}
−
    opacity: 0;
+
#cssmenu ul li:hover{background:#363636;}
 +
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
 +
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
 +
#cssmenu > ul > li{float:none}
 +
#cssmenu ul ul li a{padding-left:25px}
 +
#cssmenu ul ul li{background:#333!important;}
 +
#cssmenu ul ul li:hover{background:#363636!important}
 +
#cssmenu ul ul ul li a{padding-left:35px}
 +
#cssmenu ul ul li a{color:#ddd;background:none}
 +
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
 +
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
 +
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
 +
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
 +
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
 +
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
 +
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
 +
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
 +
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
 +
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
 +
#cssmenu .submenu-button.submenu-opened{background:#262626}
 +
#cssmenu ul ul .submenu-button{height:34px;width:34px}
 +
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
 +
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
 +
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
 +
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
 +
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
 +
#cssmenu .submenu-button.submenu-opened:before{display:none}
 +
#cssmenu ul ul ul li.active a{border-left:none}
 +
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
 
}
 
}
  
−
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
 
−
div.panel.show {
 
−
    opacity: 1;
 
−
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
 
−
}
 
−
</style>
 
  
 +
/* NAV END*/
  
  
−
<script>
 
−
 
−
//Smooth Scroll Dammit
 
−
$(document).ready(function(){
 
−
$('a[href^="#"]').on('click',function (e) {
 
−
    e.preventDefault();
 
−
 
−
    var target = this.hash;
 
−
    var $target = $(target);
 
−
 
−
    $('html, body').stop().animate({
 
−
        'scrollTop': $target.offset().top
 
−
    }, 900, 'swing', function () {
 
−
        window.location.hash = target;
 
−
    });
 
−
});
 
−
});
 
−
 
−
 
−
// Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. //The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" //class is used to open the specific accordion panel
 
−
 
−
var acc = document.getElementsByClassName("accordion");
 
−
var i;
 
−
 
−
for (i = 0; i < acc.length; i++) {
 
−
    acc[i].onclick = function(){
 
−
        this.classList.toggle("active");
 
−
        this.nextElementSibling.classList.toggle("show");
 
−
    }
 
−
}
 
−
</script>
 
  
  
Line 104: Line 110:
  
 
<!-- NAV BAR-->
 
<!-- NAV BAR-->
−
<nav class="navbar navbar-inverse navbar-fixed-top">
+
<nav id='cssmenu'>
−
  <div class="container-fluid">
+
<div id="head-mobile"></div>
−
    <ul class="nav navbar-nav">
+
<div class="button"></div>
−
      <li class="active"><a href="https://2016.igem.org/Team:Emory">Home</a></li>
+
−
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Project<span class="caret"></span></a>
+
−
        <ul class="dropdown-menu">
+
−
          <li><a href="https://2016.igem.org/Team:Emory/Description">Description</a></li>
+
−
          <li><a href="https://2016.igem.org/Team:Emory/Design">Design</a></li>
+
−
          <li><a href="https://2016.igem.org/Team:Emory/Experiments">Experiments</a></li>
+
−
          <li><a href="https://2016.igem.org/Team:Emory/Proof">Proof of Concept</a></li>
+
−
          <li><a href="https://2016.igem.org/Team:Emory/Demonstrate">Demonstrations</a></li>
+
−
          <li><a href="https://2016.igem.org/Team:Emory/Results">Results</a></li>
+
−
          <li><a href="https://2016.igem.org/Team:Emory/Notebook">Notebook</a></li>
+
−
        </ul>
+
−
      </li>
+
  
−
+
<ul>
−
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Parts<span class="caret"></span></a>
+
<li class='active'><a href='https://2016.igem.org/Team:Emory'>HOME</a></li>
−
        <ul class="dropdown-menu">
+
<li><a href='#'>PROJECT</a>
−
          <li><a href="https://2016.igem.org/Team:Emory/Parts">Parts Overview</a></li>
+
  <ul>
−
          <li><a href="https://2016.igem.org/Team:Emory/Basic_Part">Basic Parts</a></li>
+
      <li><a href='https://2016.igem.org/Team:Emory/Description'>Description</a></li>
−
          <li><a href="https://2016.igem.org/Team:Emory/Composite_Part">Composite Parts</a></li>
+
      <li><a href='https://2016.igem.org/Team:Emory/Experiments'>Experiments</a></li>
−
          <li><a href="https://2016.igem.org/Team:Emory/Part_Collection">Part Collection</a></li>
+
      <li><a href='https://2016.igem.org/Team:Emory/Proof'>Proof of Concept</a></li>
−
        </ul>
+
      <li><a href='https://2016.igem.org/Team:Emory/Results'>Results</a></li>
 +
      <li><a href='https://2016.igem.org/Team:Emory/Notebook'>Notebook</a></li>
  
 +
  </ul>
 +
</li>
  
−
  <li><a href="https://2016.igem.org/Team:Emory/Safety">Safety</a></li>
+
<li><a href='https://2016.igem.org/Team:Emory/Basic_Part'>PARTS</a></li>
 +
<li><a href='https://2016.igem.org/Team:Emory/Safety'>SAFETY</a></li>
 +
<li><a href='https://2016.igem.org/Team:Emory/HP/Silver'>COMMUNITY INVOLVEMENT</a>
 +
<li><a href='https://2016.igem.org/Team:Emory/Collaborations'>COLLABORATIONS</a></li>
 +
<li><a href='https://2016.igem.org/Team:Emory/Team'>TEAM</a></li>
 +
<li><a href='https://2016.igem.org/Team:Emory/Attributions'>ATTRIBUTIONS</a></li>
 +
</ul>
 +
</nav>
  
  
−
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Community Involvement<span class="caret"></span></a>
 
−
        <ul class="dropdown-menu">
 
−
          <li><a href="https://2016.igem.org/Team:Emory/HP/Silver">Human Practices & Outreach</a></li>
 
−
          <li><a href="https://2016.igem.org/Team:Emory/Integrated_Practices">Integrated Practices</a></li>
 
−
          <li><a href="https://2016.igem.org/Team:Emory/Engagement">Engagement</a></li>
 
−
        </ul>
 
−
      </li>
 
−
 
−
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Meet the Team<span class="caret"></span></a>
 
−
        <ul class="dropdown-menu">
 
−
          <li><a href="https://2016.igem.org/Team:Emory/Team">Team Members</a></li>
 
−
          <li><a href="https://2016.igem.org/Team:Emory/Collaborations">Collaborations</a></li>
 
−
        </ul>
 
−
      </li>
 
−
 
−
<li><a href="https://2016.igem.org/Team:Emory/Attributions">Attributions</a></li>
 
−
 
−
    </ul>
 
−
  </div>
 
−
</nav>
 
−
 
  
  
Line 171: Line 154:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
<script>
 +
<script>
 +
 +
(function($) {
 +
$.fn.menumaker = function(options) { 
 +
var cssmenu = $(this), settings = $.extend({
 +
  format: "dropdown",
 +
  sticky: false
 +
}, options);
 +
return this.each(function() {
 +
  $(this).find(".button").on('click', function(){
 +
    $(this).toggleClass('menu-opened');
 +
    var mainmenu = $(this).next('ul');
 +
    if (mainmenu.hasClass('open')) {
 +
      mainmenu.slideToggle().removeClass('open');
 +
    }
 +
    else {
 +
      mainmenu.slideToggle().addClass('open');
 +
      if (settings.format === "dropdown") {
 +
        mainmenu.find('ul').show();
 +
      }
 +
    }
 +
  });
 +
  cssmenu.find('li ul').parent().addClass('has-sub');
 +
multiTg = function() {
 +
    cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
 +
    cssmenu.find('.submenu-button').on('click', function() {
 +
      $(this).toggleClass('submenu-opened');
 +
      if ($(this).siblings('ul').hasClass('open')) {
 +
        $(this).siblings('ul').removeClass('open').slideToggle();
 +
      }
 +
      else {
 +
        $(this).siblings('ul').addClass('open').slideToggle();
 +
      }
 +
    });
 +
  };
 +
  if (settings.format === 'multitoggle') multiTg();
 +
  else cssmenu.addClass('dropdown');
 +
  if (settings.sticky === true) cssmenu.css('position', 'fixed');
 +
resizeFix = function() {
 +
  var mediasize = 700;
 +
    if ($( window ).width() > mediasize) {
 +
      cssmenu.find('ul').show();
 +
    }
 +
    if ($(window).width() <= mediasize) {
 +
      cssmenu.find('ul').hide().removeClass('open');
 +
    }
 +
  };
 +
  resizeFix();
 +
  return $(window).on('resize', resizeFix);
 +
});
 +
  };
 +
})(jQuery);
 +
 +
(function($){
 +
$(document).ready(function(){
 +
$("#cssmenu").menumaker({
 +
  format: "multitoggle"
 +
});
 +
});
 +
})(jQuery);
 +
 +
 +
</script>

Revision as of 00:28, 19 October 2016

Team:Emory iGEM 2016