Difference between revisions of "Team:TP-CC San Diego/Templates/NavBar"

Line 1: Line 1:
−
+
<html onmouseover="show()">
−
nav
+
<head>
 +
<style>
 +
body
 +
{
 +
background-color: #aed8e2;
 +
}
 +
 
 +
h1
 +
{
 +
float: center;
 +
text-align: center;
 +
color: blue;
 +
border: solid blue 2px;
 +
width: 300px;
 +
}
 +
 
 +
nav
 +
{
 +
position: fixed;
 +
display: block;
 +
  margin: 0 auto;
 +
  padding: 0;
 +
  background-color: #5396ac;
 +
width: 100%;
 +
top: 0;
 +
height: 50px;
 +
text-color: #ecd9c6;
 +
}
 +
 
 +
a.button {
 +
    -webkit-appearance: button;
 +
    -moz-appearance: button;
 +
    appearance: button;
 +
    text-decoration: none;
 +
    color: #5396ac;;
 +
}
 +
 
 +
#nav-item
 +
{
 +
display: inline-block;
 +
color: black;
 +
text-align: center;
 +
  padding: 14px 50px;
 +
  text-decoration: none;
 +
font-family: "Open Sans Condensed";
 +
font-size: 18px;
 +
}
 +
 
 +
#nav-item:hover
 +
{
 +
background-color: #0086b3;
 +
color: blue;
 +
}
 +
 
 +
                nav
 
{
 
{
 
top: 20px;
 
top: 20px;
Line 88: Line 142:
 
padding-top: 60px;
 
padding-top: 60px;
 
}
 
}
 +
</style>
 +
<script>
 +
function show()
 +
{
 +
document.getElementById("myDropdown").classList.toggle("show");
 +
}
 +
function show2()
 +
{
 +
document.getElementById("myDropdown2").classList.toggle("show2");
 +
}
 +
function show3()
 +
{
 +
document.getElementById("myDropdown3").classList.toggle("show3");
 +
}
 +
function show4()
 +
{
 +
document.getElementById("myDropdown4").classList.toggle("show4");
 +
}
 +
function show5()
 +
{
 +
document.getElementById("myDropdown5").classList.toggle("show5");
 +
}
 +
function show6()
 +
{
 +
document.getElementById("myDropdown6").classList.toggle("show6");
 +
}
 +
 +
window.onclick = function(event) {
 +
if (!event.target.matches('.dropbutton')) {
 +
var dropdowns = document.getElementsByClassName("dropdown-content");
 +
var i;
 +
for (i = 0; i < dropdowns.length; i++) {
 +
var openDropdown = dropdowns[i];
 +
if (openDropdown.classList.contains('show')) {
 +
openDropdown.classList.remove('show');
 +
}
 +
}
 +
}
 +
}
 +
</script>
 +
</head>
 +
<nav>
 +
<button onmouseover="show6()" onmouseout="show6()" class="dropbutton">Project</button>
 +
<div id="myDropdown" onmouseover="show()" onmouseout="show()" class="drop-content">
 +
<a href="">Overview</a>
 +
<a href="">Single Cell Model</a>
 +
<a href="">Population Model</a>
 +
</div>
 +
 +
<button onmouseover="show()" onmouseout="show()" class="dropbutton">Modelling</button>
 +
<div id="myDropdown2" onmouseover="show2()" onmouseout="show2()" class="drop-content">
 +
</div>
 +
 +
<button onmouseover="show2()" onmouseout="show2()" class="dropbutton">Software Tools</button>
 +
<div id="myDropdown3" onmouseover="show3()" onmouseout="show3()" class="drop-content">
 +
<a href="">Lab Book</a>
 +
<a href="">Protocols</a>
 +
<a href="">Medal Criteria</a>
 +
                                <a href="">Brainstorm</a>
 +
</div>
 +
 +
<button onmouseover="show3()" onmouseout="show3()" class="dropbutton">Notebook</button>
 +
<div id="myDropdown4" onmouseover="show4()" onmouseout="show4()" class="drop-content">
 +
<a href="">Human Practices</a>
 +
<a href="">Integrated Practices</a>
 +
<a href="">Public Engagement</a>
 +
                                <a href="">Collaborations</a>
 +
</div>
 +
 +
<button onmouseover="show4()" onmouseout="show4()" class="dropbutton">Human Practices</button>
 +
<div id="myDropdown5" onmouseover="show5()" onmouseout="show5()" class="drop-content">
 +
<a href=""></a>
 +
<a href=""></a>
 +
</div>
 +
 +
<button onmouseover="show5()" onmouseout="show5()" class="dropbutton">Team</button>
 +
<div id="myDropdown6" onmouseover="show6()" onmouseout="show6()" class="drop-content">
 +
<a href="">Description</a>
 +
<a href="">Results</a>
 +
                                <a href="">Proof</a>
 +
                                <a href="">Basic Parts</a>
 +
</div>
 +
</nav>

Revision as of 04:28, 21 July 2017