Difference between revisions of "Template:Virginia"

(Undo revision 27077 by Kag5ev (talk))
Line 15: Line 15:
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
  
−
@import url(http://fonts.googleapis.com/css?family=Raleway);
+
/* main menu */
−
#cssmenu,
+
#ddmenu {
−
#cssmenu ul,
+
    display: block;
−
#cssmenu ul li,
+
    font-family: "Arial Narrow", Helvetica, Arial, sans-serif;
−
#cssmenu ul li a,
+
    text-align: center; /*Specify the alignment of the whole UL if UL is not width:100%;*/
−
#cssmenu #menu-button {
+
    letter-spacing: normal;
−
  margin: 0;
+
−
  padding: 0;
+
−
  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;
+
 
}
 
}
−
#cssmenu:after,
+
 
−
#cssmenu > ul:after {
+
 
−
  content: ".";
+
#ddmenu ul {
−
  display: block;
+
    margin:0 auto;
−
  clear: both;
+
    padding: 0;
−
  visibility: hidden;
+
    text-align: center; /* Alignment of each top-level menu items within the UL */
−
  line-height: 0;
+
    width: 100%;
−
  height: 0;
+
    font-size: 0;
 +
    background: #3b5f41;
 +
    display: inline-block;
 +
    list-style: none;
 +
    position: relative;
 +
    z-index: 999999990;
 +
    border:none;
 +
border-radius:2px;
 
}
 
}
−
#cssmenu #menu-button {
+
 
−
  display: none;
+
#ddmenu li {
 +
    margin:0;
 +
    padding:0;
 +
    font-size: 15px;
 +
    display: inline-block;
 +
    *display: inline;
 +
    zoom: 1; /*for IE6-7*/
 +
    position: relative;
 +
    color: #EEE;
 +
    line-height: 50px; /*This determines the height of the menu*/
 +
    vertical-align:middle;
 +
    transition: background-color 0.2s;
 +
    outline:none;
 +
-moz-user-select:none;
 +
    -webkit-user-select: none;
 +
    -ms-user-select: none;
 
}
 
}
−
#cssmenu {
+
 
−
  width: auto;
+
#ddmenu .full-width {
−
  font-family: Raleway, sans-serif;
+
    position: static;
−
  line-height: 1;
+
 
}
 
}
−
#cssmenu > ul {
+
 
−
  background: #3db2e1;
+
#ddmenu {
 +
    color:#FFF;
 +
background-color: rgba(255,255,255,0.15);
 +
background-color: #999 \9; /*fallback for old IE*/
 
}
 
}
−
#cssmenu > ul > li {
+
 
−
  float: left;
+
 
−
  -webkit-perspective: 1000px;
+
#ddmenu .top-heading {
−
  -moz-perspective: 1000px;
+
    font-weight: bold;
−
  perspective: 1000px;
+
    margin:0 22px;
 +
    color: inherit;
 +
    text-decoration: none;
 +
    display:inline-block;
 +
    outline: 0;
 +
    cursor: pointer;
 
}
 
}
−
#cssmenu.align-center > ul {
+
 
−
  font-size: 0;
+
/*Style for project description*/
−
  text-align: center;
+
 
 +
h3{color: #006633};
 +
h2{color: #006633};
 +
 
 +
 
 +
/* links of top-heading */
 +
#ddmenu a, #ddmenu a:link, #ddmenu a:hover
 +
{
 +
    color:inherit;
 
}
 
}
−
#cssmenu.align-center > ul > li {
+
#ddmenu li:hover
−
  display: inline-block;
+
{
−
  float: none;
+
background-color:#66a96b;
 
}
 
}
−
#cssmenu.align-right > ul > li {
+
 
−
  float: right;
+
#ddmenu a:hover
 +
{
 +
    text-decoration:underline;
 +
 
 
}
 
}
−
#cssmenu > ul > li > a {
+
 
−
  padding: 16px 20px;
+
#ddmenu a:focus
−
  font-size: 14px;
+
{
−
  color: #ffffff;
+
    outline:1px dotted #09F;
−
  letter-spacing: 1px;
+
−
  text-transform: uppercase;
+
−
  text-decoration: none;
+
−
  background: #3db2e1;
+
−
  -webkit-transition: all .3s;
+
−
  -moz-transition: all .3s;
+
−
  -o-transition: all .3s;
+
−
  transition: all .3s;
+
−
  -webkit-transform-origin: 50% 0;
+
−
  -moz-transform-origin: 50% 0;
+
−
  transform-origin: 50% 0;
+
−
  -webkit-transform-style: preserve-3d;
+
−
  -moz-transform-style: preserve-3d;
+
−
  transform-style: preserve-3d;
+
 
}
 
}
−
#cssmenu > ul > li.active > a {
+
 
−
  color: #dff2fa;
+
/* caret(arrow icon) */
 +
#ddmenu .caret {
 +
    color: inherit;
 +
    left:-18px;
 +
    width: 0;
 +
    height: 0;
 +
    overflow: hidden; /*for IE6*/
 +
    vertical-align: middle;
 +
    margin-bottom: 2px;
 +
    border-top: 4px solid; /*caret size is 4px now*/
 +
    border-right: 4px solid transparent;
 +
    border-left: 4px solid transparent;
 +
    display: inline-block;
 +
    position:relative;
 
}
 
}
−
#cssmenu > ul > li:hover > a,
+
 
−
#cssmenu > ul > li > a:hover {
+
/* sub-menu layout
−
  color: #dff2fa;
+
----------------------------*/
−
  -webkit-transform: rotateX(90deg) translateY(-23px);
+
 
−
  -moz-transform: rotateX(90deg) translateY(-23px);
+
#ddmenu .dropdown {
−
  transform: rotateX(90deg) translateY(-23px);
+
    width: auto;
−
  -ms-transform: none;
+
    left: 0px;
 +
    color: #000000;
 +
    padding:0;margin:0;display:none;position:absolute;overflow:hidden;
 +
    top: 100%;
 +
    border:1px solid #CCC;
 +
border-top:none;
 +
border-radius:0 0 4px 4px;
 +
box-shadow: 0px 4px 4px rgba(0,0,0,0.14);
 
}
 
}
−
#cssmenu > ul > li > a::before {
+
 
−
  position: absolute;
+
#ddmenu .full-width .dropdown {
−
  top: 100%;
+
    width: 100%;
−
  left: 0;
+
    padding: 0;
−
  z-index: -1;
+
    margin: 0;
−
  -webkit-box-sizing: border-box;
+
−
  -moz-box-sizing: border-box;
+
−
  box-sizing: border-box;
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  padding: 16px 20px;
+
−
  color: #dff2fa;
+
−
  background: #19799f;
+
−
  content: attr(data-title);
+
−
  -webkit-transition: background 0.3s;
+
−
  -moz-transition: background 0.3s;
+
−
  transition: background 0.3s;
+
−
  -webkit-transform: rotateX(-90deg);
+
−
  -moz-transform: rotateX(-90deg);
+
−
  transform: rotateX(-90deg);
+
−
  -webkit-transform-origin: 50% 0;
+
−
  -moz-transform-origin: 50% 0;
+
−
  transform-origin: 50% 0;
+
−
  -ms-transform: translateY(- -18px);
+
 
}
 
}
−
#cssmenu > ul > li:hover > a::before,
+
 
−
#cssmenu > ul > li > a:hover::before {
+
#ddmenu .offset300 {
−
  background: #3db2e1;
+
    left: -300px;right:auto;
 
}
 
}
−
#cssmenu.small-screen {
+
 
−
  width: 100%;
+
#ddmenu .right-aligned {
 +
    left: auto;
 +
    right: 0px;
 
}
 
}
−
#cssmenu.small-screen > ul,
+
 
−
#cssmenu.small-screen.align-center > ul {
+
#ddmenu .over .dropdown {
−
  width: 100%;
+
    display: block;
−
  text-align: left;
+
 
}
 
}
−
#cssmenu.small-screen > ul > li,
+
 
−
#cssmenu.small-screen.align-center {
+
#ddmenu .dd-inner {
−
  float: none;
+
    text-align: center;
−
  display: block;
+
    padding: 20px;
−
  border-top: 1px solid rgba(100, 100, 100, 0.1);
+
    margin:0px;
 +
    background-color: #EEEEEE;
 +
    white-space: nowrap;
 +
    font-size: 13px;
 
}
 
}
−
#cssmenu.small-screen > ul > li:hover > a,
+
 
−
#cssmenu.small-screen > ul > li > a:hover {
+
#ddmenu ul ul
−
  color: #dff2fa;
+
{  
−
  -webkit-transform: none;
+
    margin:0;padding:0;text-align:left;width:auto;background:none;border:none;display:block;position:static;z-index:0;border-radius:0;
−
  -moz-transform: none;
+
−
  transform: none;
+
−
  -ms-transform: none;
+
 
}
 
}
−
#cssmenu.small-screen > ul > li > a::before {
+
 
−
  display: none;
+
#ddmenu ul ul li
 +
{
 +
    font-size:13px;
 +
    padding:6px 0; /*It determines the line height*/
 +
    color:inherit;
 +
    line-height:1;
 +
    margin:0;display:block;position:static;background:none;border:none;transition:none;border-radius:0;
 
}
 
}
−
#cssmenu.small-screen #menu-button {
+
 
−
  display: block;
+
/* links in sub menu
−
  padding: 16px 20px;
+
----------------------------*/
−
  cursor: pointer;
+
 
−
  font-size: 14px;
+
#ddmenu .dropdown a {
−
  text-decoration: none;
+
    color: #333333;
−
  color: #ffffff;
+
    line-height:1;
−
  text-transform: uppercase;
+
    text-decoration:none;
−
  letter-spacing: 1px;
+
    transition:color 0.4s;
−
  background: #3db2e1;
+
 
}
 
}
−
#cssmenu.small-screen #menu-button:after {
+
 
−
  content: "";
+
#ddmenu .dropdown a:hover, #ddmenu .dropdown a:focus {
−
  position: absolute;
+
    text-decoration: underline;
−
  right: 20px;
+
    color: #0099FF;
−
  top: 17px;
+
−
  display: block;
+
−
  -webkit-box-sizing: content-box;
+
−
  -moz-box-sizing: content-box;
+
−
  box-sizing: content-box;
+
−
  border-top: 2px solid #ffffff;
+
−
  border-bottom: 2px solid #ffffff;
+
−
  width: 22px;
+
−
  height: 3px;
+
 
}
 
}
−
#cssmenu.small-screen #menu-button.menu-opened:after {
+
 
−
  border-top: 2px solid #dff2fa;
+
/* blocks within the sub-menu
−
  border-bottom: 2px solid #dff2fa;
+
-----------------------------*/
 +
#ddmenu .column {
 +
    text-align: left;
 +
    vertical-align: top; /*or middle*/
 +
    display: inline-block;
 +
    *display: inline;*zoom: 1;
 +
    white-space:normal;
 +
    width:auto;min-width:200px;
 +
padding:0 30px;
 +
border-right:1px solid #999;
 
}
 
}
−
#cssmenu.small-screen #menu-button:before {
+
 
−
  content: "";
+
#ddmenu .dd-inner ul:last-child {
−
  position: absolute;
+
    border-right: none;
−
  right: 20px;
+
−
  top: 27px;
+
−
  display: block;
+
−
  width: 22px;
+
−
  height: 2px;
+
−
  background: #ffffff;
+
 
}
 
}
−
#cssmenu.small-screen #menu-button.menu-opened:before {
+
 
−
  background: #dff2fa;
+
#ddmenu .column h3 {
 +
    font-weight: 500;
 +
    line-height: 1.1;
 +
    margin-top: 12px;
 +
    margin-bottom: 8px;
 +
    font-size: 24px;
 
}
 
}
 +
 +
#ddmenu li {
 +
  border-left:1px solid #273f2b;
 +
  border-right:1px solid #304f36; }
 +
#ddmenu li:first-child {border-left:none;}
 +
#ddmenu li:last-child {border-right:none;}
 +
 +
#ddmenuLink {display:none;}
 +
 +
  
  
Line 542: Line 574:
  
  
−
<!doctype html>
+
<nav id="ddmenu">
−
<html lang=''>
+
    <div class="menu-icon"></div>
−
<head>
+
    <ul>
−
  <meta charset='utf-8'>
+
<li class="no-sub"><a class="top-heading" href="https://2016.igem.org/Team:Virginia">Home</a></li>
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
      <li class="full-width">
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
        <a class="top-heading"href="https://2016.igem.org/Team:Virginia/Team">Team</a>
−
  <link rel="stylesheet" href="styles.css">
+
        <i class="caret"></i>
−
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
+
        <div class="dropdown">
−
  <script src="script.js"></script>
+
          <div class="dd-inner">
−
  <title>CSS MenuMaker</title>
+
            <ul class="column">
−
</head>
+
              <li><h3>LAm3</h3></li>
−
<body>
+
              <li><a href="#">Anders</a></li>
 +
              <li><a href="#">Dan</a></li>
 +
              <li><a href="#">Chris</a></li>
 +
              <li><a href="#">Austin</a></li>
 +
              <li><a href="#">Kelli</a></li>
 +
            </ul>
 +
            <ul class="column">
 +
              <li><h3>Cool i guess</h3></li>
 +
              <li><a href="#">Sarah</a></li>
 +
              <li><a href="#">Mark/a></li>
 +
              <li><a href="#">Raquel</a></li>
 +
              <li><a href="#">Madeleine</a></li>
 +
              <li><a href="#">Nivedha</a></li>
 +
            </ul>
 +
            <ul class="column mayHide">
 +
              <li><br /><img src="/ddmenu/skins/img1.jpg" /></li>
 +
            </ul>
 +
          </div>
 +
        </div>
 +
      </li>
 +
      <li>
 +
        <a class="top-heading" href="https://2016.igem.org/Team:Virginia/Project">Project</a>
 +
        <i class="caret"></i>
 +
        <div class="dropdown">
 +
          <div class="dd-inner">
 +
            <ul class="column">
 +
              <li><h3>Vestibulum Ut</h3></li>
 +
              <li><a href="#">Nunc pharetra</a></li>
 +
              <li><a href="#">Vestibulum ante</a></li>
 +
              <li><a href="#">Nulla id laoreet</a></li>
 +
              <li><a href="#">Elementum blandit</a></li>
 +
            </ul>
 +
          </div>
 +
        </div>
 +
      </li>
 +
      <li>
 +
        <a class="top-heading"href="https://2016.igem.org/Team:Virginia/Parts">Parts</a>
 +
        <i class="caret"></i>
 +
        <div class="dropdown offset300">
 +
          <div class="dd-inner">
 +
            <ul class="column">
 +
              <li><h3>Pellentesque</h3></li>
 +
              <li><a href="#">Fermentum ut nulla</a></li>
 +
              <li><a href="#">Duis ut mauris</a></li>
 +
              <li><h3>Volutpat</h3></li>
 +
              <li><a href="#">Quisque dictum</a></li>
 +
              <li><a href="#">Nulla scelerisque</a></li>
 +
            </ul>
 +
            <ul class="column">
 +
              <li><h3>Suspendisse</h3></li>
 +
              <li><a href="#">Suspendisse potenti</a></li>
 +
              <li><a href="#">Curabitur in mauris</a></li>
 +
              <li><a href="#">Phasellus ultrices</a></li>
 +
              <li><a href="#">Quisque ornare</a></li>
 +
              <li><a href="#">Vestibulum</a></li>
 +
              <li><a href="#">Vitae tempus risus</a></li>
 +
            </ul>
 +
            <ul class="column mayHide">
 +
              <li><br /><img src="/ddmenu/skins/img2.jpg" /></li>
 +
            </ul>
 +
          </div>
 +
        </div>
 +
      </li>
 +
      <li class="no-sub">
 +
        <a class="top-heading" href="https://2016.igem.org/Team:Virginia/Safety">Safety</a>
 +
      </li>
 +
<li class="no-sub">
 +
        <a class="top-heading"href="https://2016.igem.org/Team:Virginia/Attributions">Attributions</a>
 +
      </li>
 +
      <li>
 +
        <a class="top-heading"href="https://2016.igem.org/Team:Virginia/Human_Practices">Human Practices</a>
 +
        <i class="caret"></i>
 +
        <div class="dropdown right-aligned">
 +
          <div class="dd-inner">
 +
            <ul class="column">
 +
              <li><h3>Nam a leo</h3></li>
 +
              <li><a href="#">Vel faucibus leo</a></li>
 +
              <li><a href="#">Duis ut mauris</a></li>
 +
              <li><a href="#">In tempus semper</a></li>
 +
              <li><a href="#">laoreet erat</a></li>
 +
            </ul>
 +
            <ul class="column">
 +
              <li><h3>Proin iaculis</h3></li>
 +
              <li><a href="#">In tempus semper</a></li>
 +
              <li><a href="#">Hendrerit tincidunt</a></li>
 +
              <li><a href="#">Duis ut mauris</a></li>
 +
              <li><a href="#">pretium amet</a></li>
 +
            </ul>
 +
<li class="no-sub">
 +
        <a class="top-heading" href="https://2016.igem.org/Team:Virginia/Awards">Awards</a>
 +
      </li>
 +
          </div>
 +
        </div>
 +
      </li>
 +
    </ul>
 +
  </nav>
  
−
<div id='cssmenu'>
 
−
<ul>
 
−
  <li class='active'><a href='#'>Home</a></li>
 
−
  <li><a href='#'>Products</a></li>
 
−
  <li><a href='#'>Company</a></li>
 
−
  <li><a href='#'>Contact</a></li>
 
−
</ul>
 
−
</div>
 
  
−
</body>
 
−
<html>
 
  
  
 +
<script>
  
 +
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
  
 +
$(document).ready(function() {
  
−
<script>
+
$("#HQ_page").attr('id','');
 +
 +
  
−
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
  
−
(function($) {
 
  
−
  $.fn.menumaker = function(options) {
 
−
     
 
−
      var cssmenu = $(this), settings = $.extend({
 
−
        title: "Menu",
 
−
        format: "dropdown",
 
−
        breakpoint: 768,
 
−
        sticky: false
 
−
      }, options);
 
  
−
      return this.each(function() {
+
$('#accordion').find('.menu_item').hover(function(){
−
        cssmenu.find('li ul').parent().addClass('has-sub');
+
 
−
        if (settings.format != 'select') {
+
//Expand or collapse this panel
−
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
+
submenu = $(this).find('.submenu');
−
          $(this).find("#menu-button").on('click', function(){
+
submenu.toggle();
−
            $(this).toggleClass('menu-opened');
+
 
−
            var mainmenu = $(this).next('ul');
+
icon = $(this).find('.icon');
−
            if (mainmenu.hasClass('open')) {  
+
 
−
              mainmenu.hide().removeClass('open');
+
if ( !$( submenu ).is(':visible') ) {
−
            }
+
icon.removeClass("less").addClass("plus");
−
            else {
+
}
−
              mainmenu.show().addClass('open');
+
else {
−
              if (settings.format === "dropdown") {
+
icon.removeClass("plus").addClass("less");
−
                mainmenu.find('ul').show();
+
}
−
              }
+
 
−
            }
+
//Hide the other panels
−
          });
+
$(".submenu").not(submenu).hide();
 +
$(".icon").not(icon).removeClass("less").addClass("plus");
 +
});
 +
 
 +
 
 +
$(".collapsable_menu_control").hover(function() {
 +
$(".menu_item").toggle();
 +
});
 +
 
 +
$( window ).resize(function() {
 +
$(".menu_item").show();
 +
});
 +
 
 +
 
 +
});
 +
 
  
 
</script>
 
</script>

Revision as of 15:44, 30 June 2016