Difference between revisions of "AJ:Bars Box"

 
(85 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
−
<!-- start of css -->
+
<!-- start of css -->
−
<style type="text/css">
+
<style type="text/css">
  
−
/* menu styling */
 
−
/* Titles are switched to Arial Black with no line decoration */
 
−
 
−
#menuWrap {
 
−
background: #f9f9f9;
 
−
width: 160px;
 
−
padding: 5px 10px 5px 10px;
 
−
}
 
  
 +
#bars_box {
 +
display:block;
 +
}
  
−
#menuWrap li {
+
/*Main page right column, the on page menu will be placed here */
−
float:none;
+
#menu_BarsBox{
−
}
+
width: 180px;
 +
background-color: #fff;
 +
}
  
−
#menuWrap a {
 
−
text-decoration:none;
 
−
color: #434343;
 
−
}
 
  
 +
#menu_BarsBox  h4 {
 +
color: #656459;
 +
padding: 5px 10px;
 +
padding-left: 5px;
 +
}
  
−
#bars_box {
 
−
display:block;
 
−
}
 
  
−
/*collapse and expand */
+
#menu_BarsBox a {
−
.collapseMenu {
+
text-decoration: none;
−
background: transparent;
+
}
−
margin: 0px 0 0 0;
+
−
padding: 5px 10px;
+
−
border: 1px solid #cccccc;
+
−
cursor: pointer;
+
−
color: #434343;
+
−
border-radius: 5px;
+
  
−
}
 
  
−
/*styling for the menu header */
+
#menu_BarsBox ul {background: #ffffff;}
−
.accordion-header,.accordion-header_noaction {
+
−
background: #d3d3d3;
+
−
margin: 0px 0 0 0;
+
−
padding: 5px 10px;
+
−
border: 1px solid #cccccc;
+
−
cursor: pointer;
+
−
color: #434343;
+
−
border-radius: 5px;
+
−
margin-top: 5px;
+
  
−
}
+
/*Styling for the the list item */
 +
#menu_BarsBox ul li{
 +
 +
padding-left: 10px;
 +
margin-bottom: -1px;
 +
margin-left: 0px;
  
 +
display:block;
 +
border: 1px solid #ccc;
 +
border-right: 0px solid white;
 +
border-left: 0px solid white;
  
−
.accordion-header_noaction:hover {
+
height:20px;
−
background: #c1dfa6;
+
width: 143px;
−
}
+
  
−
/* switches background color to green */
+
font-size: 11px;
−
.active-header {
+
font-weight: bold;
−
background: #95cea0;
+
color: #565656;
−
}
+
list-style: none;
−
+
−
/* switches background color to light green */
+
−
.active-header:hover {
+
−
background: #c1dfa6;
+
−
}
+
  
−
/* switches background color to default gray */
+
/*animate transition */
−
.inactive-header {
+
-webkit-transition: background 0.2s linear;
−
background: #d3d3d3;
+
-moz-transition: background 0.2s linear;
−
}
+
-ms-transition: background 0.2s linear;
 +
-o-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 +
}
  
−
/* switches background color to light green */
+
/*For the list item, changes the color on hover.*/
−
.inactive-header:hover {
+
#menu_BarsBox ul li:hover{
−
background: #c1dfa6;
+
background-color:#c1dfa6;
−
}
+
}
  
−
/* styling for the submenus */
 
−
.accordion-content {
 
−
display: none;
 
−
background: #ffffff;
 
−
border: 1px solid #cccccc;
 
−
border-top: 0;
 
−
border-radius: 5px;
 
−
color: #434343;
 
−
float: none;
 
−
}
 
  
−
/* change the color and styling of the links */
+
/*styling for the menu header*/
−
ul.submenuoptions li a, ul.submenuoptions li {
+
.accordion-header, .accordion-header_noaction {
−
color: #383838;
+
background: #f2f2f2;
−
font-size: 12px;
+
font-family: "Arial", Gadget, sans-serif;  
−
font-weight: bold;
+
border: 1px solid #ccc;
−
padding-left: -40px;
+
cursor: pointer;
−
margin-left: -10px;
+
/*animate transition */
−
border-radius: 5px;
+
-webkit-transition: background 0.2s linear;
−
display:block;
+
-moz-transition: background 0.2s linear;
−
padding-bottom: 2px;
+
-ms-transition: background 0.2s linear;
−
}
+
-o-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 +
}  
  
−
/* change background color on hover */
+
.accordion-header_noaction:hover {
−
ul.submenuoptions li:hover a, ul.submenuoptions li:hover {
+
background: #c1dfa6;
−
background-color: #c1dfa6;
+
}
−
text-decoration: none;
+
−
border-radius: 5px;
+
  
−
}
+
/* switches background color to green */
 +
.active-header {
 +
background: #d3d3d3;
 +
}
 +
 +
/* switches background color to light green */
 +
.active-header:hover {
 +
background: #c1dfa6;
 +
}
  
−
</style>
+
/* switches background color to default gray */
−
<!-- end of css -->
+
.inactive-header {
 +
background: #f2f2f2;
 +
}
  
 +
/* switches background color to light green */
 +
.inactive-header:hover {
 +
background: #c1dfa6;
 +
}
 +
 +
/* styling for the submenus */
 +
.accordion-content {
 +
display: none;
 +
background: #ffffff;
 +
border: 1px solid #cccccc;
 +
border-top: 0;
 +
float: left;
 +
margin-bottom:  10px;
 +
}
 +
</style>
 +
<!-- end of css -->
  
  
Line 122: Line 123:
 
$('.accordion-header').toggleClass('inactive-header');
 
$('.accordion-header').toggleClass('inactive-header');
 
 
−
 
−
 
−
var checkIfActive = 0;
 
−
 
−
$('.collapseMenu').click(function () {
 
−
if (checkIfActive == 0) {
 
−
$('.collapseMenu').html("Collapse All");
 
−
checkIfActive = 1;
 
−
$('.accordion-header').next().slideToggle().toggleClass('open-content');
 
−
}
 
−
else {
 
−
checkIfActive = 0;
 
−
$('.accordion-header').next().slideToggle().toggleClass('open-content');
 
−
$('.collapseMenu').html("Expand All");
 
−
}
 
−
});
 
 
 
−
// The Accordion Effect
+
// The Accordion Effect
 
$('.accordion-header').click(function () {
 
$('.accordion-header').click(function () {
 
if($(this).is('.inactive-header')) {
 
if($(this).is('.inactive-header')) {
Line 161: Line 146:
 
<!-- menu -->
 
<!-- menu -->
  
−
<div id="menuWrap">  
+
<div id="menu_BarsBox">  
−
<h5 style="text-align:center"> 2015 Navigation Menu </h5>
+
−
<!-- <h4 class="collapseMenu">Expand All</h4> -->
+
−
 
+
  
 +
<h5 style="margin:auto;text-align:center; padding:10px 0px;"> 2015 Navigation Menu </h5>
 
<a href="https://2015.igem.org/Main_Page"><h4 class="accordion-header_noaction">Home</h4></a>
 
<a href="https://2015.igem.org/Main_Page"><h4 class="accordion-header_noaction">Home</h4></a>
−
 
  
 
<h4 class="accordion-header">About iGEM</h4>  
 
<h4 class="accordion-header">About iGEM</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/About">What is iGEM?</a></li>
+
<a href="https://igem.org/About"><li>What is iGEM?</li></a>
−
<li><a style="font-size:10px;" href="https://igem.org/Previous_iGEM_Competitions">Previous Competitions</a></li>
+
<a href="https://igem.org/Previous_iGEM_Competitions"><li>Previous Competitions</li></a>
−
<li><a href="https://igem.org/Contact">iGEM Headquarters</a></li>
+
<a href="https://igem.org/Contact"><li>iGEM Headquarters </li></a>
−
<li><a href="https://igem.org/Press_Kit">Press Kit</a></li>
+
<a href="https://2015.igem.org/IGEM_Publicity"><li>Publicity</li></a>
−
<li><a href="https://igem.org/Newsletters">Join our Newsletter</a></li>
+
<a href="https://igem.org/Press_Kit"><li>Press Kit</li></a>
−
<li><a href="https://igem.org/Sponsorship">Sponsor iGEM</a></li>
+
<a href="https://igem.org/Newsletters"><li>Join our Newsletter</li></a>
 +
<a href="https://igem.org/Sponsorship"><li>Sponsor iGEM</li></a>
 +
<a href="http://blog.igem.org/"><li>iGEM blog</li></a>
 
</ul>
 
</ul>
 
</div>  
 
</div>  
  
−
<h4 class="accordion-header">Starting a Team</h4>  
+
 
 +
<h4 class="accordion-header">Starting a Team</h4>
 +
<div class="accordion-content">
 +
<ul>
 +
<a href="https://2015.igem.org/Starting_a_Team"><li>Starting a Team</li></a>
 +
<a href="https://2015.igem.org/Funding"><li>Funding</li></a>
 +
                                                <a href="https://2015.igem.org/Navigating_iGEM"><li>Navigating iGEM</li></a>
 +
</ul>
 +
</div>
 +
 
 +
 
 +
<h4 class="accordion-header">Registration & Fees</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/StartingATeam">Starting a Team</a></li>
+
<a href="https://igem.org/IGEM_2015_Registration"><li>Register Now </li></a>
−
<li><a href="https://2015.igem.org/Funding">Funding</a></li>
+
<a href="https://2015.igem.org/Registration"><li>How to Register</li></a>
 +
<a href="https://2015.igem.org/Fees"><li>Fees</li></a>
 
</ul>
 
</ul>
 
</div>  
 
</div>  
Line 191: Line 187:
 
<h4 class="accordion-header">Calendar</h4>  
 
<h4 class="accordion-header">Calendar</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/Calendar_of_Events">Calendar of Events</a></li>
+
<a href="https://2015.igem.org/Calendar_of_Events"><li>Calendar of Events</li></a>
 
</ul>
 
</ul>
 
</div>  
 
</div>  
Line 198: Line 194:
 
<h4 class="accordion-header">Requirements</h4>  
 
<h4 class="accordion-header">Requirements</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/Requirements">Requirements</a></li>
+
<a href="https://2015.igem.org/Requirements"><li>Requirements</li></a>
−
<li><a href="https://2015.igem.org/Wiki_How-To">Wiki Requirements</a></li>
+
<a href="https://2015.igem.org/Wiki_Requirements"><li>Wiki Requirements</li></a>
 +
<a href="https://2015.igem.org/Sections"><li>Sections</li></a>
 
</ul>
 
</ul>
 
</div>  
 
</div>  
Line 206: Line 203:
 
<h4 class="accordion-header">Tracks</h4>  
 
<h4 class="accordion-header">Tracks</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/Tracks">Complete List</a></li>
+
<a href="https://2015.igem.org/Tracks"><li>Complete List</li></a>
−
<li><a href="https://2015.igem.org/Tracks#New_Tracks">New Tracks</a></li>
+
<a href="https://2015.igem.org/Tracks#New_Tracks"><li>New Tracks</li></a>
−
<li><a href="https://2015.igem.org/Tracks/High_School">High School</a></li>
+
<a href="https://2015.igem.org/Tracks/HighSchool"><li>High School</li></a>
 +
                                                <a href="https://igem.org/Team_Tracks?year=2015"><li>Team Tracks</li></a>
 
</ul>
 
</ul>
 
</div>  
 
</div>  
  
−
<h4 class="accordion-header">Registration</h4>  
+
<h4 class="accordion-header">Parts</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://igem.org/IGEM_2015_Registration">Register Now </a></li>
+
<a href="http://parts.igem.org/Help:Registry-at-a-Glance"><li>Registry At-a-Glance</li></a>
−
<li><a href="https://2015.igem.org/Fees">Fees</a></li>
+
<a href="https://2015.igem.org/DNA_Distribution"><li>2015 DNA Distribution</li></a>
−
<li><a href="https://2015.igem.org/Registration">How to Register</a></li>
+
−
<li><a style="font-size:10px;" href="https://2015.igem.org/Team_Registration_Fee">Team Registration Fee</a></li>
+
−
<li><a  style="font-size:10px;" href="https://2015.igem.org/Jamboree_Attendance_Fee"> Jamboree Attendance Fee</a> </li>  
+
 
</ul>
 
</ul>
−
</div>  
+
</div>
  
−
<h4 class="accordion-header">Parts</h4>  
+
<h4 class="accordion-header">Resources</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="http://parts.igem.org/Help:Registry-at-a-Glance">Registry At-a-Glance</a></li>
+
                                                <a href="https://2015.igem.org/Teams_By_The_Numbers"><li>iGEM By The Numbers</li></a>
−
<li><a href="https://2015.igem.org/DNA_Distribution">2015 DNA Distribution</a></li>
+
                                                <a href="https://2015.igem.org/Telling_Your_Story"><li>Telling Your Story</li></a>
 +
                                                <a href="https://2015.igem.org/Keywords"><li>Keywords</li></a>
 +
                                                <a href="https://2015.igem.org/Troubleshooting"><li>Cloning Help</li></a>
 +
<a href="https://2015.igem.org/Visa_help"><li>Visa Help</li></a>
 +
                                                <a href="https://2015.igem.org/FundingOpportunities"><li> Funding Opportunities</li></a>
 +
<a href="https://2015.igem.org/Partner_Special_Offers"><li>Partner Special Offers</li></a>
 +
                                                  <a href="https://2015.igem.org/Submitting_a_Part"><li>Submitting a Part</li></a>
 
</ul>
 
</ul>
 
</div>
 
</div>
 +
 
<h4 class="accordion-header">Giant Jamboree</h4>  
 
<h4 class="accordion-header">Giant Jamboree</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/Giant_Jamboree">General Information</a></li>
+
<a href="https://2015.igem.org/Giant_Jamboree"><li>General Information</li></a>
 +
<a href="https://2015.igem.org/Giant_Jamboree/Career_Fair"><li>Career Fair</li></a>
 +
<a href="https://igem.org/Sponsorship"><li>Sponsorship Opportunities</li></a>
 +
</ul>
 +
</div>
 +
 
 +
<h4 class="accordion-header">Human Practices</h4>
 +
<div class="accordion-content">
 +
<ul>
 +
<a href="https://2015.igem.org/Practices_Hub"><li>Practices Hub </li></a>
 +
<a href="https://2015.igem.org/Judging/Awards#SpecialPrizes"><li>Human Practices Awards</li></a>
 +
<a href="https://2015.igem.org/Tracks/Policy_Practices"><li>Policy & Practices Track</li></a>
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 241: Line 254:
 
<h4 class="accordion-header">Safety</h4>  
 
<h4 class="accordion-header">Safety</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/Safety">Overview</a></li>
+
<a href="https://2015.igem.org/Safety"><li>Safety Overview</li></a>
−
<li><a href="https://2015.igem.org/Safety/RiskGroups">Risk Groups</a></li>
+
<a href="https://2015.igem.org/Safety/Risk_Groups"><li>Risk Groups</li></a>
−
<li><a href="https://2015.igem.org/Safety/BiosafetyLevels">Biosafety Levels</a></li>
+
<a href="https://2015.igem.org/Safety/WhiteList"><li>White List</li></a>
−
<li><a href="https://2015.igem.org/Safety/WhiteList">White List</a></li>
+
−
<li><a href="https://2015.igem.org/Safety/Resources">Resources</a></li>
+
−
<li><a href="https://2015.igem.org/Safety/Resources#Contact">Contact</a></li>
+
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 254: Line 264:
 
<h4 class="accordion-header">Judging</h4>  
 
<h4 class="accordion-header">Judging</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/Judging">Overview</a></li>
+
<a href="https://2015.igem.org/Judging"><li>Overview</li></a>
−
<li><a href="https://2015.igem.org/Judging/Awards">Awards</a></li>
+
<a href="https://2015.igem.org/Judging/Awards"><li>Awards</li></a>
−
<li><a href="https://2015.igem.org/Judging/Awards#Medals">Medals</a></li>
+
<a href="https://2015.igem.org/Judging/Medals"><li>Medals</li></a>
−
<li><a href="https://2015.igem.org/Poster">Poster Guidelines</a></li>
+
<a href="https://2015.igem.org/Poster"><li>Poster Guidelines</li></a>
−
<li><a href="https://2015.igem.org/Judging#forJudges"> For Judges </a> </li>
+
<a href="https://2015.igem.org/Judging#forJudges"><li> For Judges </li></a>  
 +
<a href="https://2015.igem.org/Committees"><li> For Committees </li></a>  
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 265: Line 276:
 
<h4 class="accordion-header">Community</h4>  
 
<h4 class="accordion-header">Community</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://2015.igem.org/Meetups">Meetups</a></li>
+
<a href="https://2015.igem.org/Meetups"><li>Meetups</li></a>
−
<li><a href="https://2015.igem.org/Community">Community page</a></li>
+
<a href="https://2015.igem.org/Community"><li>Community page</li></a>
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 274: Line 285:
 
<h4 class="accordion-header">2015 Teams</h4>  
 
<h4 class="accordion-header">2015 Teams</h4>  
 
<div class="accordion-content">  
 
<div class="accordion-content">  
−
<ul class="submenuoptions">
+
<ul>
−
<li><a href="https://igem.org/Team_List?year=2015">Team List</a></li>
+
<a href="https://igem.org/Team_List?year=2015"><li>Team List</li></a>
 +
<a href="https://igem.org/Team_Wikis?year=2015"><li>Team Wikis</li></a>
 +
<a href="http://www.google.com/maps/d/u/0/viewer?mid=z_CMSHmDgyfc.kShytm5hSTEk"><li>World Map</li></a>
 +
 
 
</ul>
 
</ul>
 
</div>
 
</div>
 +
 +
<h4 class="accordion-header">Sponsors</h4>
 +
<div class="accordion-content">
 +
<ul>
 +
<a href="https://igem.org/Sponsors"><li>iGEM 2015 Sponsors</li></a>
 +
<a href="https://igem.org/Sponsorship"><li>Sponsor iGEM</li></a>
 +
                                                <a href="https://2015.igem.org/Partner_Special_Offers"><li>Partner Special Offers</li></a>
 +
</ul>
 +
</div>
 +
 +
  
 
</div> <!-- this closes the menu div -->
 
</div> <!-- this closes the menu div -->
  
 
</html>
 
</html>

Latest revision as of 14:29, 8 September 2015