Difference between revisions of "Template:Main2017"

 
(35 intermediate revisions by the same user not shown)
Line 95: Line 95:
  
 
$(".collapsable_menu_control").click(function() {
 
$(".collapsable_menu_control").click(function() {
−
$(".menu_item").toggle();
+
$("#all_menu_items").fadeToggle(400);
−
$(".menu_title").toggle();
+
−
$(".submenu_access").toggle();
+
−
$(".submenu").toggle();
+
 
});
 
});
  
Line 198: Line 195:
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
 
.igem_menu_wrapper {  
 
.igem_menu_wrapper {  
−
width: 15%;
 
−
height:100vh;
 
−
position:fixed;
 
−
padding:0px;
 
−
float:right;
 
 
background-color:#dddddd;  
 
background-color:#dddddd;  
−
text-align:left;
+
float:right;  
−
right:0%;
+
height:100vh;
 +
max-width: 270px;
 
overflow-y: auto;
 
overflow-y: auto;
 
overflow-x: hidden;
 
overflow-x: hidden;
 +
padding:0px;
 +
position:fixed;
 +
right:0%;
 +
text-align:left;
 +
width: 15%;
 
}
 
}
  
Line 243: Line 241:
 
}
 
}
  
−
.menu_item_wrapper:hover, .submenu_item:hover , .sub_submenu_item:hover, .submenu > .submenu_access:hover {
+
.menu_item_wrapper:hover, .submenu_item:hover , .sub_submenu_item:hover, .submenu > .submenu_access:hover,  menu_item:hover {
 
background-color:#00bdcd;  
 
background-color:#00bdcd;  
 
text-decoration: none;  
 
text-decoration: none;  
 
cursor:pointer;
 
cursor:pointer;
 +
 +
 
}
 
}
  
Line 351: Line 351:
 
     padding: 15px 0px;
 
     padding: 15px 0px;
 
     display: none;
 
     display: none;
−
     background-color: #000000;
+
float:left;
 +
     background-color: #f2f2f2;
 
     text-align: center;
 
     text-align: center;
 
     font-weight: bold;
 
     font-weight: bold;
−
     color: #666666;
+
     color: #5e5f5f;
 
     cursor: pointer;
 
     cursor: pointer;
 
}
 
}
  
  
−
 
+
.collapsable_menu_control:hover {
 +
background-color: #00bdcd;
 +
color: #ffffff;
 +
}
  
 
/********************************* CONTENT OF THE PAGE ********************************/
 
/********************************* CONTENT OF THE PAGE ********************************/
Line 365: Line 369:
 
/* Wrapper for the content */
 
/* Wrapper for the content */
 
.igem_content_wrapper {
 
.igem_content_wrapper {
−
width: 81%;
+
/*width: 88.9%;*/
−
float:left;  
+
width: -webkit-calc(100% -270px);
−
background-color:white;  
+
width:   -moz-calc(100% - 270px);
−
margin: 2%;
+
width: calc(100% - 270px);
 
display:block;
 
display:block;
 +
background-color:white;
 
}
 
}
 +
 +
 +
 +
/* subwrapper to center content */
 +
.igem_column_wrapper {
 +
margin:auto;
 +
max-width: 1400px;
 +
width:90%;
 +
}
 +
 +
  
 
/* class for when the menu is not shown and the content occupies the whole screen */
 
/* class for when the menu is not shown and the content occupies the whole screen */
Line 385: Line 401:
  
  
−
 
+
/*main layout class */
−
.full_size {
+
.column  {  
−
width:100%;  
+
float:left;
 +
margin: 1% 2%;
 +
padding: 0px;
 
}
 
}
  
−
.full_size img {  
+
/* 100% */
−
padding: 10px 15px;
+
.full_size { width:96%; }
−
width:97.5%;  
+
/* 66% */
−
}
+
.two_thirds_size { width: 62.6%; }
 +
/* 33% */
 +
.third_size { width: 29.3%; }
 +
/* 75% */
 +
.three_quarter_size {  width: 71%; }
 +
/* 50% */
 +
.half_size {  width: 46%; }
 +
/* 25% */
 +
.fourth_size { width: 21%; }
  
−
.half_size {
+
/*styling for all images*/
−
width: 50%;
+
.full_size img,
−
}
+
.half_size img,
−
 
+
.two_thirds_size img,
−
.half_size img {
+
.third_size img, 
−
padding: 10px 15px;
+
.three_quarters_size img,
−
width: 93%;
+
−
}
+
−
 
+
−
 
+
−
.third_size {
+
−
width: 33.3%;
+
−
}
+
−
.third_size img {
+
−
padding: 10px 15px;
+
−
width: 92%;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
.fourth_size {
+
−
width: 25%;
+
−
}
+
 
.fourth_size img {  
 
.fourth_size img {  
−
padding: 10px 15px;
+
margin-bottom: 15px;
−
width: 92%;  
+
width: 100%;  
 
}
 
}
−
 
−
 
  
  
Line 564: Line 571:
 
}
 
}
  
−
.button a {
+
.button a,  #bodyContent a[href ^="https://"], .link-https {
 
color: #000000 !important;
 
color: #000000 !important;
 
font-weight: bold;
 
font-weight: bold;
Line 573: Line 580:
 
}
 
}
  
−
.button a:hover {
+
.button a:hover , #bodyContent a[href ^="https://"]:hover, .link-https {
 
background-color: #000000;   
 
background-color: #000000;   
 
color: #00bdcd !important;
 
color: #00bdcd !important;
Line 665: Line 672:
 
}
 
}
  
 +
 +
 +
 +
.igem_menu_wrapper::-webkit-scrollbar {
 +
    display: none;
 +
}
  
  
  
 
/*STYLING */
 
/*STYLING */
 +
 +
 +
 +
  
 
/* styling for the titles */
 
/* styling for the titles */
Line 825: Line 842:
 
border-top:  1px solid #d3d3d3;
 
border-top:  1px solid #d3d3d3;
 
}
 
}
 +
 +
 +
#all_menu_items{ display:block;}
 +
 +
 +
 +
.full_size_image { margin-top:-55px; width: calc(100% - 270px); }
 +
  
  
Line 830: Line 855:
  
 
/********************************* RESPONSIVE STYLING ********************************/
 
/********************************* RESPONSIVE STYLING ********************************/
 +
 +
 +
/* 1784px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1784px) {
 +
.igem_content_wrapper { width:85%;}
 +
.full_size_image {  width:85%;}
 +
 +
 +
}
 +
 +
 +
 +
 +
/* IF THE SCREEN IS LESS THAN 1400PX */
 +
@media only screen and (max-width: 1400px) {
 +
.long_menu_name { font-size: 10px;}
 +
}
 +
 +
 +
 +
 +
 +
 +
  
 
/* IF THE SCREEN IS LESS THAN 1200PX */
 
/* IF THE SCREEN IS LESS THAN 1200PX */
Line 840: Line 890:
 
.load_menu_here, .menu_icon {display:none;}
 
.load_menu_here, .menu_icon {display:none;}
 
ul.image_slider {  padding:0px; width: 100%;  margin: auto;}
 
ul.image_slider {  padding:0px; width: 100%;  margin: auto;}
−
.menu_item, .submenu_item, .sub_submenu_item,  .menu_title { padding: 9px 0px 7px 10px; font-size: 10px;}
+
.menu_item, .submenu_item, .sub_submenu_item,  .menu_title { padding:9px 0px 7px 6%; font-size: 10px;}
 
.menu_item.hub_link, .submenu_item.with_submenu_items { width: 73.9%;}
 
.menu_item.hub_link, .submenu_item.with_submenu_items { width: 73.9%;}
 
  .submenu > .submenu_access { font-size: 10px; padding: 8px 0px; }
 
  .submenu > .submenu_access { font-size: 10px; padding: 8px 0px; }
 
.submenu_access{  font-size: 10px;  padding: 10px 0px;}
 
.submenu_access{  font-size: 10px;  padding: 10px 0px;}
−
 
+
#all_menu_items{ display:block;}
 +
.full_size_image { margin-top:-55px; width:85%;}
 
}
 
}
  
−
@media only screen and (max-width: 1100px) {
 
−
.menu_item.hub_link, .submenu_item.with_submenu_items { width: 73.6%;}
 
−
}
 
  
−
@media only screen and (max-width: 1100px) {
+
/* IF THE SCREEN IS LESS THAN 885PX */
−
.menu_item.hub_link, .submenu_item.with_submenu_items { width: 72.9%; }
+
−
}
+
  
−
@media only screen and (max-width: 1030px) {
+
@media only screen and (max-width: 885px) {
−
.menu_item.hub_link, .submenu_item.with_submenu_items { width: 71.9%; }
+
−
}
+
−
 
+
−
@media only screen and (max-width: 850px) {
+
−
.menu_item.hub_link , .submenu_item.with_submenu_items { width: 70.9%; }
+
−
}
+
−
 
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 800PX */
+
−
 
+
−
@media only screen and (max-width: 800px) {
+
  
 
.collapsable_menu_control, .menu_icon, .submenu_access { display:block;}
 
.collapsable_menu_control, .menu_icon, .submenu_access { display:block;}
Line 876: Line 911:
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
 
.igem_menu_wrapper img { width: 30%;  margin-left: 35%;}
 
.igem_menu_wrapper img { width: 30%;  margin-left: 35%;}
−
.menu_item, .submenu_item, .sub_submenu_item,  .menu_title {  padding:10px 0px 10px 10%; font-size: 13px; }
+
.menu_item, .submenu_item, .sub_submenu_item,  .menu_title, .long_menu_name {  padding:10px 0px 10px 10%; font-size: 13px; }
−
.submenu_item.with_submenu_items, .submenu > .submenu_item {font-size: 13px;}
+
 
.submenu > .submenu_access { font-size: 13px; padding: 10px 0px;}
 
.submenu > .submenu_access { font-size: 13px; padding: 10px 0px;}
 
.submenu_access{ font-size: 13px; padding: 12px 0px; }
 
.submenu_access{ font-size: 13px; padding: 12px 0px; }
Line 885: Line 919:
 
.submenu_item.with_submenu_items  {width: 65%;}
 
.submenu_item.with_submenu_items  {width: 65%;}
 
.menu_item.hub_link { width:50%;}
 
.menu_item.hub_link { width:50%;}
−
 
+
#all_menu_items {display:none;}
 +
.full_size_image { margin-top: -30px; width:100%;}
 
}
 
}
  
Line 910: Line 945:
 
<div class="igem_menu_wrapper" >
 
<div class="igem_menu_wrapper" >
  
−
<div class="collapsable_menu_control"> MENU 三 </div>
 
  
 
<div>
 
<div>
Line 921: Line 955:
 
</div>
 
</div>
  
 +
<div class="collapsable_menu_control"> MENU  </div>
  
 +
<div id="all_menu_items">
 +
<div id="load_menu_here">
  
 +
<div class="menu_is_loading">
 +
 +
<div class="menu_title"> <b> Loading... </b></div>
  
−
<div id="load_menu_here">
+
</div>
−
 
+
−
<div class="menu_is_loading">
+
−
+
−
<div class="menu_title"> <b> Loading... </b></div>
+
  
 
</div>
 
</div>
−
 
 
</div>
 
</div>
−
 
 
</div>
 
</div>
  
Line 942: Line 976:
 
<div class="igem_content_wrapper">
 
<div class="igem_content_wrapper">
  
 +
<div class=" igem_column_wrapper">
  
 
</html>
 
</html>

Latest revision as of 19:03, 5 September 2018

MENU
Loading...