Difference between revisions of "Team:Linkoping Sweden/Description"

Line 1: Line 1:
 
{{Linkoping_Sweden/Header}}
 
{{Linkoping_Sweden/Header}}
  
−
<!DOCTYPE html>
 
 
<html>
 
<html>
 
<head>
 
<head>
 
<style>
 
<style>
 
body {margin:0;}
 
body {margin:0;}
 +
 +
/* Vill att endast Home (och inte med DropdownX) visas då bredden är mindre än 600px (då visas även de tre strecken till höger för att expandera menyn). DropdownX ska visa tre Link både då skärmen är större och mindre än 600px.*/
 +
/* Vill kombinera dessa:*/
 +
/* <https://www.w3schools.com/howto/howto_js_topnav_responsive.asp> */
 +
/* <https://www.w3schools.com/css/css_dropdowns.asp> (dropdown navbaren längst ner används i koden nedan). */
  
 
/* Add a background color to the top navigation */
 
/* Add a background color to the top navigation */
 
.topnav, uses {
 
.topnav, uses {
 
   overflow: hidden;
 
   overflow: hidden;
−
   background-color: #333;
+
   background-color: #019966;
 
}
 
}
  
  
−
/* Style the links inside the navigation bar, used my non-lists/non-buttons */
+
/* Style the links inside the navigation bar, used by non-lists/non-buttons */
 
.topnav a {
 
.topnav a {
 
   float: left;
 
   float: left;
 
   display: block;
 
   display: block;
−
   color: #f2f2f2;
+
   color: white;
 
   text-align: center;
 
   text-align: center;
 
   padding: 14px 16px;
 
   padding: 14px 16px;
Line 25: Line 29:
 
}
 
}
  
−
/* Change the color of links on hover, uses */
+
/* Change the color of links on hover that aren't lists, uses */
 
.topnav a:hover {
 
.topnav a:hover {
−
   background-color: green;
+
   background-color: white;
−
   color: black;
+
   color: #019966;
 
}
 
}
  
Line 35: Line 39:
 
   display: none;
 
   display: none;
 
}
 
}
 +
 +
 +
/* Show the dropdown menu on hover, this most be above css for screen smaller then 600px */
 +
.topnav .dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
  
 
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 
@media screen and (max-width: 600px) {
 
@media screen and (max-width: 600px) {
−
   .topnav a:not(:first-child) {display: none;}
+
 
 +
   .dropdown {display: none;}
 +
  .topnav a:not(:first-child) {display: none;}
 
   .topnav a.icon {
 
   .topnav a.icon {
 
     float: right;
 
     float: right;
Line 53: Line 66:
 
     top: 0;
 
     top: 0;
 
   }
 
   }
 +
 +
.topnav.responsive .dropdown:hover .dropdown-content {
 +
    position: relative;
 +
    display: block;
 +
}
 +
 +
  .topnav.responsive .dropdown {
 +
    display: block;
 +
    text-align: left;
 +
    width:100%;
 +
    }
 +
 
   .topnav.responsive a {
 
   .topnav.responsive a {
 
     float: none;
 
     float: none;
Line 61: Line 86:
 
}
 
}
  
−
/*Full container box, not used*/
 
−
.container {
 
−
    overflow: hidden;
 
−
    background-color: #333;
 
−
    font-family: Arial;
 
−
}
 
−
 
−
/*Text color for non-dropdown text, not used*/
 
−
.container a {
 
−
    float: left;
 
−
    font-size: 16px;
 
−
    color: white;
 
−
    text-align: center;
 
−
    padding: 14px 16px;
 
−
    text-decoration: none;
 
−
}
 
  
 
/* LIST */
 
/* LIST */
Line 82: Line 91:
 
.dropdown {
 
.dropdown {
 
     float: left;
 
     float: left;
 +
border: 1px;
 +
    border-style: solid;
 +
    border-color: #019966;
 
     /*overflow: hidden;*/
 
     /*overflow: hidden;*/
 +
 +
}
 +
 +
.dropbtn:hover:not(.active) {  /* color of the dropdown box and text when hovering*/
 +
    background-color: white;
 +
    color: #019966;
 +
}
 +
 +
.active {        /*Color of the box that the user is on*/
 +
    background-color: white;
 +
    color: #019966;
 
}
 
}
  
−
/* Dropdown Button, uses */
+
/* Dropdown list Button, uses */
 
.dropdown .dropbtn {
 
.dropdown .dropbtn {
 
     font-size: 16px;     
 
     font-size: 16px;     
 
     border: none;
 
     border: none;
 
     outline: none;
 
     outline: none;
−
     color: white;
+
     color: red;
 
     padding: 14px 16px;
 
     padding: 14px 16px;
 +
display: inline-block;
 
     background-color: inherit; /*inherited from .topnav*/
 
     background-color: inherit; /*inherited from .topnav*/
 +
 
}
 
}
  
−
/* Background color when hovering, uses */
+
/* Background color of menu when hovering, uses */
−
.container a:hover, .dropdown:hover .dropbtn {
+
.container a:hover, .dropdown:hover {
−
     background-color: blue;
+
     background-color: white;
 +
color: #019966;
 +
}
 +
 
 +
/* Text color when hovering list button, uses */
 +
.dropbtn:hover {
 +
    color: #019966;
 
}
 
}
  
Line 104: Line 135:
 
     display: none;
 
     display: none;
 
     position: absolute;
 
     position: absolute;
−
     background-color: #f9f9f9;
+
     background-color: #019966;
 +
 
 
     min-width: 160px;
 
     min-width: 160px;
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
Line 113: Line 145:
 
.dropdown-content a {
 
.dropdown-content a {
 
     float: none;
 
     float: none;
−
     color: black;
+
     color: #FFF;
 +
    border-left: 0px;
 +
    border-right: 0px;
 +
    border-bottom: 0px;
 +
border-top: 1px;
 +
    border-style: solid;
 +
    border-color: #019966;
 
     padding: 12px 16px;
 
     padding: 12px 16px;
 
     text-decoration: none;
 
     text-decoration: none;
Line 120: Line 158:
 
}
 
}
  
−
/* Change color of dropdown links on hover, uses */
+
/* Change to this color of dropdown links on hover, uses */
 
.dropdown-content a:hover {
 
.dropdown-content a:hover {
−
     background-color: #ddd;
+
     background-color: #FFF;
 +
color: #019966;
 
}
 
}
  
−
/* Show the dropdown menu on hover */
+
 
−
.dropdown:hover .dropdown-content {
+
 
−
    display: block;
+
 
−
}
+
 
 
</style>
 
</style>
 
</head>
 
</head>
Line 137: Line 176:
 
   <a href="#news">News</a>
 
   <a href="#news">News</a>
  
−
   <div class="dropdown">
+
 
 +
   <div class="dropdown" >
 
     <button class="dropbtn">DropdownX</button>
 
     <button class="dropbtn">DropdownX</button>
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
Line 155: Line 195:
  
 
<script>
 
<script>
 +
 
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 
function myFunction() {
 
function myFunction() {
Line 160: Line 201:
 
     if (x.className === "topnav") {
 
     if (x.className === "topnav") {
 
         x.className += " responsive";
 
         x.className += " responsive";
 +
 
     } else {
 
     } else {
 
         x.className = "topnav";
 
         x.className = "topnav";
 
     }
 
     }
 
}
 
}
 +
 
</script>
 
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<!-- -----------------------------------------------------------------------------
 
−
 
−
 
−
<div class="column full_size">
 
−
<h1>Description</h1>
 
−
 
−
<p>Tell us about your project, describe what moves you and why this is something important for your team.</p>
 
−
 
−
 
−
<h5>What should this page contain?</h5>
 
−
<ul>
 
−
<li> A clear and concise description of your project.</li>
 
−
<li>A detailed explanation of why your team chose to work on this particular project.</li>
 
−
<li>References and sources to document your research.</li>
 
−
<li>Use illustrations and other visual resources to explain your project.</li>
 
−
</ul>
 
−
 
−
 
−
</div>
 
−
 
−
<div class="column full_size" >
 
−
 
−
<h5>Advice on writing your Project Description</h5>
 
−
 
−
<p>
 
−
We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be consist, accurate and unambiguous in your achievements.
 
−
</p>
 
−
 
−
<p>
 
−
Judges like to read your wiki and know exactly what you have achieved. This is how you should think about these sections; from the point of view of the judge evaluating you at the end of the year.
 
−
</p>
 
−
 
−
</div>
 
−
 
−
 
−
<div class="column half_size" >
 
−
 
−
<h5>References</h5>
 
−
<p>iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you thought about your project and what works inspired you.</p>
 
−
 
−
</div>
 
−
 
−
 
−
<div class="column half_size" >
 
−
<h5>Inspiration</h5>
 
−
<p>See how other teams have described and presented their projects: </p>
 
−
 
−
<ul>
 
−
<li><a href="https://2016.igem.org/Team:Imperial_College/Description">2016 Imperial College</a></li>
 
−
<li><a href="https://2016.igem.org/Team:Wageningen_UR/Description">2016 Wageningen UR</a></li>
 
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Project_Overview"> 2014 UC Davis</a></li>
 
−
<li><a href="https://2014.igem.org/Team:SYSU-Software/Overview">2014 SYSU Software</a></li>
 
−
</ul>
 
−
</div>
 
−
------------------------------------------------------------------------------- -->
 
  
 
{{Linkoping_Sweden/Footer}}
 
{{Linkoping_Sweden/Footer}}

Revision as of 09:38, 20 June 2017

Responsive Topnav Example

Resize the browser window to see how it works.