Difference between revisions of "Template:Team:Harvard BioDesign/Templates:header"

Line 1: Line 1:
−
<html>
+
<style type="text/css">
 +
/*Strip the ul of padding and list styling*/
 +
ul {
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
position: absolute;
 +
}
  
−
<style type="text/css">
+
/*Create a horizontal list with spacing*/
−
.dropdown:hover .dropdown-menu {
+
li {
−
display: block;
+
display:inline-block;
−
}
+
float: left;
 +
margin-right: 1px;
 +
}
  
−
</style>
+
/*Style for menu links*/
 +
li a {
 +
display:block;
 +
min-width:140px;
 +
height: 50px;
 +
text-align: center;
 +
line-height: 50px;
 +
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
color: #fff;
 +
background: #2f3036;
 +
text-decoration: none;
 +
}
  
−
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+
/*Hover state for top level links*/
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
li:hover a {
−
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
background: #19c589;
 +
}
  
−
<nav class="navbar navbar-inverse navbar-fixed-top">
+
/*Style for dropdown links*/
 +
li:hover ul a {
 +
background: #f3f3f3;
 +
color: #2f3036;
 +
height: 40px;
 +
line-height: 40px;
 +
}
  
−
  <div class="container-fluid">
+
/*Hover state for dropdown links*/
−
    <div class="navbar-header">
+
li:hover ul a:hover {
−
    </div>
+
background: #19c589;
−
  <div>
+
color: #fff;
−
      <ul class="nav navbar-nav">
+
}
−
        <li class="active"><a href="https://2015.igem.org/Team:Harvard_BioDesign">Home</a></li>
+
−
        <li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Team">Team</a></li>
+
−
<li class = "dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://2015.igem.org/Team:Harvard_BioDesign/Project">Project <span class="caret"></span></a>
+
−
<ul class="dropdown-menu">
+
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Description">Description</a></li>
+
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Experiments">Experiments &amp; Protocols</a></li>
+
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Design">Design</a></li>
+
−
</ul>
+
−
</li>
+
−
<li class = "dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://2015.igem.org/Team:Harvard_BioDesign/Parts">Parts <span class="caret"></span></a>
+
−
<ul class="dropdown-menu">
+
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Basic_Part">Basic Parts</a></li>
+
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Composite_Part">Composite Parts</a></li>
+
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Part_Collection">Part Collection</a></li>
+
−
</ul>
+
−
</li>
+
  
−
        <li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Results">Results</a></li>
+
/*Hide dropdown links until they are needed*/
 +
li ul {
 +
display: none;
 +
}
  
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Notebook">Notebook</a></li>
+
/*Make dropdown links vertical*/
−
     
+
li ul li {
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Attributions">Attributions</a></li>
+
display: block;
 +
float: none;
 +
}
  
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Practices">Practices</a></li>
+
/*Prevent text wrapping*/
 +
li ul li a {
 +
width: auto;
 +
min-width: 100px;
 +
padding: 0 20px;
 +
}
  
−
<li><a href="https://2015.igem.org/Team:Harvard_BioDesign/Safety">Safety</a></li>       
+
/*Display the dropdown on hover*/
−
      </ul>
+
ul li a:hover + .hidden, .hidden:hover {
−
  </div>
+
display: block;
−
  </div>
+
}
−
</nav>
+
  
−
<div id="bannerContainer">
+
/*Style 'show menu' label button and hide it by default*/
−
<br><br>
+
.show-menu {
−
<h2> Add a banner to your wiki! </h2>
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
−
+
text-decoration: none;
−
<p>You can make the image 980px  by  200px</p>
+
color: #fff;
−
<p> Remember to call the file: "<i>Team_Example_banner.jpg</i>" </p>
+
background: #19c589;
−
</div>
+
text-align: center;
 +
padding: 10px 0;
 +
display: none;
 +
}
  
 +
/*Hide checkbox*/
 +
input[type=checkbox]{
 +
    display: none;
 +
}
 +
 +
/*Show menu when invisible checkbox is checked*/
 +
input[type=checkbox]:checked ~ #menu{
 +
    display: block;
 +
}
 +
 +
 +
/*Responsive Styles*/
 +
 +
@media screen and (max-width : 760px){
 +
/*Make dropdown links appear inline*/
 +
ul {
 +
position: static;
 +
display: none;
 +
}
 +
/*Create vertical spacing*/
 +
li {
 +
margin-bottom: 1px;
 +
}
 +
/*Make all menu links full width*/
 +
ul li, li a {
 +
width: 100%;
 +
}
 +
/*Display 'show menu' link*/
 +
.show-menu {
 +
display:block;
 +
}
 +
}
 +
</style>
 +
/***************************/
  
 +
<head>
 +
<meta charset="UTF-8">
 +
<title>CSS Only Navigation Menu</title>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<link rel="stylesheet" href="style.css">
 +
</head>
 +
<body>
 +
<label for="show-menu" class="show-menu">Show Menu</label>
 +
<input type="checkbox" id="show-menu" role="button">
 +
<ul id="menu">
 +
<li><a href="#">Home</a></li>
 +
<li>
 +
<a href="#">About ￬</a>
 +
<ul class="hidden">
 +
<li><a href="#">Who We Are</a></li>
 +
<li><a href="#">What We Do</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="#">Portfolio ￬</a>
 +
<ul class="hidden">
 +
<li><a href="#">Photography</a></li>
 +
<li><a href="#">Web & User Interface Design</a></li>
 +
<li><a href="#">Illustration</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">News</a></li>
 +
<li><a href="#">Contact</a></li>
 +
</ul>
 +
</body>
 
</html>
 
</html>

Revision as of 17:35, 28 June 2015

<style type="text/css"> /*Strip the ul of padding and list styling*/ ul { list-style:none; margin:0; padding:0; position: absolute; }

/*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 1px; }

/*Style for menu links*/ li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; }

/*Hover state for top level links*/ li:hover a { background: #19c589; }

/*Style for dropdown links*/ li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; }

/*Hover state for dropdown links*/ li:hover ul a:hover { background: #19c589; color: #fff; }

/*Hide dropdown links until they are needed*/ li ul { display: none; }

/*Make dropdown links vertical*/ li ul li { display: block; float: none; }

/*Prevent text wrapping*/ li ul li a { width: auto; min-width: 100px; padding: 0 20px; }

/*Display the dropdown on hover*/ ul li a:hover + .hidden, .hidden:hover { display: block; }

/*Style 'show menu' label button and hide it by default*/ .show-menu { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; background: #19c589; text-align: center; padding: 10px 0; display: none; }

/*Hide checkbox*/ input[type=checkbox]{ 

   display: none;

}

/*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ #menu{ 

   display: block;

}


/*Responsive Styles*/

@media screen and (max-width : 760px){ /*Make dropdown links appear inline*/ ul { position: static; display: none; } /*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; } /*Display 'show menu' link*/ .show-menu { display:block; } } </style> /***************************/

<head> <meta charset="UTF-8"> <title>CSS Only Navigation Menu</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button">

</body> </html>