Difference between revisions of "Template:IISc-Bangalore"

(Replaced content with "<h1>Hello, World!</h1>")
Line 1: Line 1:
−
<html>
+
<h1>Hello, World!</h1>
−
 
+
−
<script>
+
−
 
+
−
// This is the jquery part of your template. 
+
−
// Try not modify any of this code too much since it makes your menu work.
+
−
 
+
−
$(document).ready(function() {
+
−
 
+
−
$("#HQ_page").attr('id','');
+
−
 
+
−
// call the functions that control the menu
+
−
menu_functionality();
+
−
hide_show_menu();
+
−
 
+
−
 
+
−
 
+
−
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
−
function menu_functionality() {
+
−
 
+
−
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
−
$(".menu_button").click(function(){
+
−
 
+
−
// add or remove the class "open" , this class holds the "-"
+
−
$(this).children().toggleClass("open");
+
−
// show or hide the submenu
+
−
$(this).next('.submenu_wrapper').fadeToggle(400);
+
−
});
+
−
 
+
−
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
−
$("#display_menu_control").click(function(){
+
−
$('#menu_content').fadeToggle(400);
+
−
});
+
−
 
+
−
// call the current page highlight function
+
−
highlight_current_page();
+
−
}
+
−
 
+
−
 
+
−
// call the highlight current page function to show it on the menu with a different background color
+
−
function highlight_current_page() {
+
−
 
+
−
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
+
−
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
+
−
 
+
−
// now that the current_page class has been added to a menu item, make the submenu fade in
+
−
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
+
−
// change the +/- symbol of the corresponding menu button
+
−
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
+
−
+
−
}
+
−
 
+
−
 
+
−
 
+
−
// allow button on the black menu bar to show/hide the side menu
+
−
function hide_show_menu() {
+
−
+
−
// in case you preview mode is selected, the menu is hidden for better visibility
+
−
if (window.location.href.indexOf("submit") >= 0) {
+
−
$(".igem_2017_menu_wrapper").hide();
+
−
}
+
−
 
+
−
// if the black menu bar has been loaded
+
−
  if (document.getElementById('bars_item')) {
+
−
 
+
−
// when the "bars_item" has been clicked
+
−
$("#bars_item").click(function() {
+
−
$("#sideMenu").hide();
+
−
 
+
−
// show/hide the menu wrapper
+
−
$(".igem_2017_menu_wrapper").fadeToggle("100");
+
−
});
+
−
  }
+
−
 
+
−
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
+
−
else {
+
−
    setTimeout(hide_show_menu, 15);
+
−
}
+
−
}
+
−
 
+
−
 
+
−
});
+
−
 
+
−
 
+
−
</script>
+
−
 
+
−
<style>
+
−
 
+
−
#sideMenu { display:none;}
+
−
 
+
−
.menu1, .menu1 ul {
+
−
list-style: none;
+
−
padding: 0;
+
−
margin: 0;
+
−
}
+
−
 
+
−
.menu1 {
+
−
height: 58px;
+
−
}
+
−
 
+
−
.menu1 li {
+
−
background: -moz-linear-gradient(#292929, #252525);
+
−
background: -ms-linear-gradient(#292929, #252525);
+
−
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
+
−
background: -webkit-linear-gradient(#292929, #252525);
+
−
background: -o-linear-gradient(#292929, #252525);
+
−
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
+
−
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
+
−
background: linear-gradient(#292929, #252525);
+
−
border-bottom: 2px solid #181818;
+
−
border-top: 2px solid #303030;
+
−
min-width: 160px;
+
−
}
+
−
 
+
−
.menu1 > li {
+
−
display: block;
+
−
float: left;
+
−
position: relative;
+
−
}
+
−
 
+
−
.menu1 > li:first-child {
+
−
border-radius: 5px 0 0;
+
−
}
+
−
 
+
−
.menu1 a {
+
−
border-left: 3px solid rgba(0, 0, 0, 0);
+
−
color: #808080;
+
−
display: block;
+
−
font-family: 'Lucida Console';
+
−
font-size: 18px;
+
−
line-height: 54px;
+
−
padding: 0 25px;
+
−
text-decoration: none;
+
−
text-transform: uppercase;
+
−
}
+
−
 
+
−
.menu1 li:hover {
+
−
background-color: #1c1c1c;
+
−
background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
+
−
background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
+
−
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
+
−
background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
+
−
background: -o-linear-gradient(#1c1c1c, #1b1b1b);
+
−
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
+
−
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
+
−
background: linear-gradient(#1c1c1c, #1b1b1b);
+
−
border-bottom: 2px solid #222222;
+
−
border-top: 2px solid #1B1B1B;
+
−
}
+
−
 
+
−
.menu1 li:hover > a {
+
−
border-radius: 5px 0 0 0;
+
−
border-left: 3px solid #C4302B;
+
−
color: #C4302B;
+
−
}
+
−
 
+
−
/* submenu1 styles */
+
−
.submenu1 {
+
−
left: 0;
+
−
max-height: 0;
+
−
position: absolute;
+
−
top: 100%;
+
−
z-index: 0;
+
−
-webkit-perspective: 400px;
+
−
-moz-perspective: 400px;
+
−
-ms-perspective: 400px;
+
−
-o-perspective: 400px;
+
−
perspective: 400px;
+
−
}
+
−
 
+
−
.submenu1 li {
+
−
opacity: 0;
+
−
-webkit-transform: rotateY(90deg);
+
−
-moz-transform: rotateY(90deg);
+
−
-ms-transform: rotateY(90deg);
+
−
-o-transform: rotateY(90deg);
+
−
transform: rotateY(90deg);
+
−
-webkit-transition: opacity .4s, -webkit-transform .5s;
+
−
-moz-transition: opacity .4s, -moz-transform .5s;
+
−
-ms-transition: opacity .4s, -ms-transform .5s;
+
−
-o-transition: opacity .4s, -o-transform .5s;
+
−
transition: opacity .4s, transform .5s;
+
−
}
+
−
 
+
−
.menu1 .submenu1 li:hover a {
+
−
border-left: 3px solid #454545;
+
−
border-radius: 0;
+
−
color: #ffffff;
+
−
}
+
−
 
+
−
.menu1 > li:hover .submenu1, .menu1 > li:focus .submenu1 {
+
−
max-height: 2000px;
+
−
z-index: 10;
+
−
}
+
−
 
+
−
.menu1 > li:hover .submenu1 li, .menu1 > li:focus .submenu1 li {
+
−
opacity: 1;
+
−
-webkit-transform: none;
+
−
-moz-transform: none;
+
−
-ms-transform: none;
+
−
-o-transform: none;
+
−
transform: none;
+
−
}
+
−
 
+
−
/* CSS3 delays for transition effects */
+
−
.menu1 li:hover .submenu1 li:nth-child(1) {
+
−
-webkit-transition-delay: 0s;
+
−
-moz-transition-delay: 0s;
+
−
-ms-transition-delay: 0s;
+
−
-o-transition-delay: 0s;
+
−
transition-delay: 0s;
+
−
}
+
−
 
+
−
.menu1 li:hover .submenu1 li:nth-child(2) {
+
−
-webkit-transition-delay: 50ms;
+
−
-moz-transition-delay: 50ms;
+
−
-ms-transition-delay: 50ms;
+
−
-o-transition-delay: 50ms;
+
−
transition-delay: 50ms;
+
−
}
+
−
 
+
−
.menu1 li:hover .submenu1 li:nth-child(3) {
+
−
-webkit-transition-delay: 100ms;
+
−
-moz-transition-delay: 100ms;
+
−
-ms-transition-delay: 100ms;
+
−
-o-transition-delay: 100ms;
+
−
transition-delay: 100ms;
+
−
}
+
−
 
+
−
.menu1 li:hover .submenu1 li:nth-child(4) {
+
−
-webkit-transition-delay: 150ms;
+
−
-moz-transition-delay: 150ms;
+
−
-ms-transition-delay: 150ms;
+
−
-o-transition-delay: 150ms;
+
−
transition-delay: 150ms;
+
−
}
+
−
 
+
−
.menu1 li:hover .submenu1 li:nth-child(5) {
+
−
-webkit-transition-delay: 200ms;
+
−
-moz-transition-delay: 200ms;
+
−
-ms-transition-delay: 200ms;
+
−
-o-transition-delay: 200ms;
+
−
transition-delay: 200ms;
+
−
}
+
−
 
+
−
.menu1 li:hover .submenu1 li:nth-child(6) {
+
−
-webkit-transition-delay: 250ms;
+
−
-moz-transition-delay: 250ms;
+
−
-ms-transition-delay: 250ms;
+
−
-o-transition-delay: 250ms;
+
−
transition-delay: 250ms;
+
−
}
+
−
 
+
−
.menu1 li:hover .submenu1 li:nth-child(7) {
+
−
-webkit-transition-delay: 300ms;
+
−
-moz-transition-delay: 300ms;
+
−
-ms-transition-delay: 300ms;
+
−
-o-transition-delay: 300ms;
+
−
transition-delay: 300ms;
+
−
}
+
−
 
+
−
.menu1 li:hover .submenu1 li:nth-child(8) {
+
−
-webkit-transition-delay: 350ms;
+
−
-moz-transition-delay: 350ms;
+
−
-ms-transition-delay: 350ms;
+
−
-o-transition-delay: 350ms;
+
−
transition-delay: 350ms;
+
−
}
+
−
 
+
−
.submenu1 li:nth-child(1) {
+
−
-webkit-transition-delay: 350ms;
+
−
-moz-transition-delay: 350ms;
+
−
-ms-transition-delay: 350ms;
+
−
-o-transition-delay: 350ms;
+
−
transition-delay: 350ms;
+
−
}
+
−
 
+
−
.submenu1 li:nth-child(2) {
+
−
-webkit-transition-delay: 300ms;
+
−
-moz-transition-delay: 300ms;
+
−
-ms-transition-delay: 300ms;
+
−
-o-transition-delay: 300ms;
+
−
transition-delay: 300ms;
+
−
}
+
−
 
+
−
.submenu1 li:nth-child(3) {
+
−
-webkit-transition-delay: 250ms;
+
−
-moz-transition-delay: 250ms;
+
−
-ms-transition-delay: 250ms;
+
−
-o-transition-delay: 250ms;
+
−
transition-delay: 250ms;
+
−
}
+
−
 
+
−
.submenu1 li:nth-child(4) {
+
−
-webkit-transition-delay: 200ms;
+
−
-moz-transition-delay: 200ms;
+
−
-ms-transition-delay: 200ms;
+
−
-o-transition-delay: 200ms;
+
−
transition-delay: 200ms;
+
−
}
+
−
 
+
−
.submenu1 li:nth-child(5) {
+
−
-webkit-transition-delay: 150ms;
+
−
-moz-transition-delay: 150ms;
+
−
-ms-transition-delay: 150ms;
+
−
-o-transition-delay: 150ms;
+
−
transition-delay: 150ms;
+
−
}
+
−
 
+
−
.submenu1 li:nth-child(6) {
+
−
-webkit-transition-delay: 100ms;
+
−
-moz-transition-delay: 100ms;
+
−
-ms-transition-delay: 100ms;
+
−
-o-transition-delay: 100ms;
+
−
transition-delay: 100ms;
+
−
}
+
−
 
+
−
.submenu1 li:nth-child(7) {
+
−
-webkit-transition-delay: 50ms;
+
−
-moz-transition-delay: 50ms;
+
−
-ms-transition-delay: 50ms;
+
−
-o-transition-delay: 50ms;
+
−
transition-delay: 50ms;
+
−
}
+
−
 
+
−
.submenu1 li:nth-child(8) {
+
−
-webkit-transition-delay: 0s;
+
−
-moz-transition-delay: 0s;
+
−
-ms-transition-delay: 0s;
+
−
-o-transition-delay: 0s;
+
−
transition-delay: 0s;
+
−
}
+
−
 
+
−
</style>
+
−
 
+
−
<!--- THIS IS WHERE THE HTML BEGINS --->
+
−
 
+
−
 
+
−
 
+
−
<head>
+
−
 
+
−
<!-- This tells the browser that your page is responsive -->
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
 
+
−
</head>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<!-- start of content -->
+
−
 
+
−
<div style="width:100%;">
+
−
<div style="float:right;">
+
−
<ul class="menu1" style="display:block;float:right;">
+
−
    <li><a href="https://2017.igem.org/Team:IISc-Bangalore">Home</a></li>
+
−
    <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Team">Team</a></li>
+
−
    <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Project">Project</a>
+
−
        <ul class="submenu1">
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Description">Description</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Design">Design</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Model">Model</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Parts">Parts</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/InterLab">InterLab</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Improve">Improve</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Hardware">Hardware</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Evolution">Evolution</a></li>
+
−
        </ul>
+
−
    </li>
+
−
    <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Lab">Lab</a>
+
−
    <ul class="submenu1">
+
−
        <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Experiments">Experiments</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Results">Results</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Demonstrate">Demonstrate</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Safety">Safety</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Notebook">Notebook</a></li>
+
−
        </ul>
+
−
    </li>
+
−
   
+
−
    <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Community">Community</a>
+
−
    <ul class="submenu1">
+
−
        <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Human Practices">Human Practices</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Integrated Practices">Integrated Practices</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Public Engagement">Public Engagement</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Collaborations">Collaborations</a></li>
+
−
            <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Safety">Safety</a></li>
+
−
        </ul>
+
−
    </li>
+
−
    <li><a href="https://2017.igem.org/Team:IISc-Bangalore/Attributions">Attributions</a></li>       
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</html>
+

Revision as of 17:48, 30 September 2017

Hello, World!