Begun osi page formatting and js
some css implemented for osi_model.html. js is still broken
This commit is contained in:
Joshua Killen
parent
47367bf509
commit
1b6771a470
|
|
@ -51,49 +51,56 @@
|
|||
</div>
|
||||
|
||||
<link rel="stylesheet" href="osi_model.css" type="text/css">
|
||||
<script type="text/javascript" src="osi_model.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>OSI Model</h1>
|
||||
<div class="osiDrop">
|
||||
<div class="sevenDropBtn" onclick="7Drop()">Layer 7<div class="arrow">v</div></div>
|
||||
<div class="7Drop-content" id="7Drop">
|
||||
<div class="oddBtn"><div><a class="sevenBtn" id="sevenDropBtn" onclick="sevenDrop()">Layer 7</a></div><div class="arrowOdd"><img src="arrow.png" alt="v" width="16" height="16"></div></div>
|
||||
<div class="osiODrop-content" id="sevenDrop">
|
||||
<p>asdasd</p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="osiDrop">
|
||||
<div class="evenBtn" id="sixDropBtn" onclick="6Drop()">Layer 6</div><div class="arrowEven"><img src="arrow.png" alt="v" width="16" height="16"></div>
|
||||
<div class="osiEDrop-content" id="6Drop">
|
||||
<p></p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="osiDrop">
|
||||
<div class="sixDropBtn" onclick="6Drop()">Layer 6<div class="arrow">v</div></div>
|
||||
<div class="6Drop-content" id="6Drop">
|
||||
<div class="oddBtn" id="fiveDropBtn" onclick="5Drop()">Layer 5</div><div class="arrowOdd"><img src="arrow.png" alt="v" width="16" height="16"></div>
|
||||
<div class="osiODrop-content" id="5Drop">
|
||||
<p></p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="osiDrop">
|
||||
<div class="fiveDropBtn" onclick="5Drop()">Layer 5<div class="arrow">v</div></div>
|
||||
<div class="5Drop-content" id="5Drop">
|
||||
<div class="evenBtn" id="fourDropBtn" onclick="4Drop()">Layer 4</div><div class="arrowEven"><img src="arrow.png" alt="v" width="16" height="16"></div>
|
||||
<div class="osiEDrop-content" id="4Drop">
|
||||
<p></p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="osiDrop">
|
||||
<div class="fourDropBtn" onclick="4Drop()">Layer 4<div class="arrow">v</div></div>
|
||||
<div class="4Drop-content" id="4Drop">
|
||||
<div class="oddBtn" id="threeDropBtn" onclick="3Drop()">Layer 3</div><div class="arrowOdd"><img src="arrow.png" alt="v" width="16" height="16"></div>
|
||||
<div class="osiODrop-content" id="3Drop">
|
||||
<p></p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="osiDrop">
|
||||
<div class="threeDropBtn" onclick="3Drop()">Layer 3<div class="arrow">v</div></div>
|
||||
<div class="3Drop-content" id="3Drop">
|
||||
<div class="evenBtn" id="twoDropBtn" onclick="2Drop()">Layer 2</div><div class="arrowEven"><img src="arrow.png" alt="v" width="16" height="16"></div>
|
||||
<div class="osiEDrop-content" id="2Drop">
|
||||
<p></p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="osiDrop">
|
||||
<div class="twoDropBtn" onclick="2Drop()">Layer 2<div class="arrow">v</div></div>
|
||||
<div class="2Drop-content" id="2Drop">
|
||||
<div class="oddBtn" id="oneDropBtn" onclick="1Drop()">Layer 1</div><div class="arrowOdd"><img src="arrow.png" alt="v" width="16" height="16"></div>
|
||||
<div class="osiODrop-content" id="1Drop">
|
||||
<p></p>
|
||||
</div>
|
||||
</div><br>
|
||||
<div class="osiDrop">
|
||||
<div class="oneDropBtn" onclick="1Drop()">Layer 1<div class="arrow">v</div></div>
|
||||
<div class="1Drop-content" id="1Drop">
|
||||
<div class="evenBtn" id="refDropBtn" onclick="refDrop()">References</div><div class="arrowEven"><img src="arrow.png" alt="v" width="16" height="16"></div>
|
||||
<div class="osiEDrop-content" id="refDrop">
|
||||
<p></p>
|
||||
</div>
|
||||
</div><br>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -1,154 +1,53 @@
|
|||
.osiDrop {
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
text-align: right;
|
||||
.arrowOdd {
|
||||
background-color: blue;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.osiDrop .sevenDropBtn {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #f2f2f2;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.osiDrop .sixDropBtn {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #f2f2f2;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.osiDrop .fiveDropBtn {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #f2f2f2;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.osiDrop .fourDropBtn {
|
||||
.arrowEven {
|
||||
background-color: black;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.osiDrop .oddBtn {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #f2f2f2;
|
||||
padding: 14px 16px;
|
||||
background-color: blue;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.osiDrop .threeDropBtn {
|
||||
.osiDrop .evenBtn {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #f2f2f2;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
background-color: black;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.osiDrop .twoDropBtn {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #f2f2f2;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.osiDrop .oneDropBtn {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #f2f2f2;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.7Drop-content {
|
||||
.osiODrop-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #373737;
|
||||
background-color: blue;
|
||||
color: #ddd;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.6Drop-content {
|
||||
.osiEDrop-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #373737;
|
||||
color: #ddd;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.5Drop-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #373737;
|
||||
color: #ddd;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.4Drop-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #373737;
|
||||
color: #ddd;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.3Drop-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #373737;
|
||||
color: #ddd;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.2Drop-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #373737;
|
||||
color: #ddd;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.1Drop-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #373737;
|
||||
background-color: blue;
|
||||
color: #ddd;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
function sevenDrop() {
|
||||
document.getElementById("sevenDrop").classList.toggle("osiOshow");
|
||||
}
|
||||
|
||||
function webDrop() {
|
||||
document.getElementById("webDrop").classList.toggle("show");
|
||||
}
|
||||
|
||||
window.onclick = function(e) {
|
||||
if (!e.target.matches('.sevenBtn')) {
|
||||
var myDropdown = document.getElementById("sevenDrop");
|
||||
if (myDropdown.classList.contains('osiOshow')) {
|
||||
myDropdown.classList.remove ('osiOshow');
|
||||
}
|
||||
}else if (!e.target.matches('.webDropBtn')) {
|
||||
var myDropdown = document.getElementById("webDrop");
|
||||
if (myDropdown.classList.contains('show')) {
|
||||
myDropdown.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue