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

Line 6: Line 6:
 
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan" rel="stylesheet">
  
−
article.tabs
+
body {
−
{
+
  background: #FFAA76;
−
position: relative;
+
  background: #666;
−
display: block;
+
  margin: 0 auto;
−
height: 500px;
+
−
margin: 40px auto;
+
 
}
 
}
  
−
article.tabs section
+
#tab_nav {
−
{
+
  position: relative;
−
position: absolute;
+
  overflow: hidden;
−
display: block;
+
  margin: 0 auto;
−
top: 60px;
+
  margin-top: 25px;
−
left: 0;
+
  word-spacing: -5px;
−
height: 300px;
+
  width: 700px;
−
padding: 10px 20px;
+
  height: 300px;
−
background-color: #ddd;
+
  margin-bottom: 25px;
−
border-radius: 5px;
+
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
−
box-shadow: 0 3px 3px gray;
+
−
z-index: 0;
+
 
}
 
}
  
−
article.tabs section:first-child
+
#tab_nav ul {
−
{
+
  margin: 0 auto;
−
z-index: 1;
+
  padding: 0;
 +
  display: inline-block;
 +
}
 +
 
 +
#tab_nav li {
 +
  background: #222;
 +
  color: white;
 +
  word-spacing: 0;
 +
  width: 134.7px;
 +
  list-style: none;
 +
  display: inline-block;
 +
  margin: 0 auto;
 +
  padding: 20px;
 +
  border-right: 1px solid rgba(0, 0, 0, 0.1);
 +
  font-family: Helvetica, Arial, sans-serif;
 +
  letter-spacing: 3px;
 +
  cursor: pointer;
 +
}
 +
 
 +
#tab_nav li:first-of-type {
 +
  box-shadow: inset 0 -50px 50px -50px rgba(0, 0, 0, 0.2),
 +
    inset -1px 0 0 rgba(0, 0, 0, .5);
 +
}
 +
 
 +
#tab_nav li:last-of-type {
 +
  box-shadow: inset 0 -50px 50px -50px rgba(0, 0, 0, 0.2),
 +
    inset 1px 0 0 rgba(250, 255, 255, .1);
 +
}
 +
 
 +
#tab_nav li:hover {
 +
  background: #191919;
 +
}
 +
 
 +
#tab_nav li:active {
 +
  background: rgba(255,170,118, .5);
 +
}
 +
 
 +
#tab_nav li span {
 +
  float: right;
 +
  font-weight: bold;
 +
  display: none;
 +
}
 +
 
 +
#tab_nav li:hover span {
 +
  display: block;
 +
}
 +
 
 +
#tab_nav div {
 +
  position: relative;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  background: white;
 +
  padding: 25px;
 +
  font-family: Helvetica, Arial, sans-serif;
 +
  word-spacing: 3px;
 +
}
 +
 
 +
#tab_nav li div {
 +
  display: none;
 +
  position: absolute;
 +
  top: 60px;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  background: white;
 +
  padding: 25px;
 +
  font-family: calibri;
 +
  letter-spacing: 1px;
 +
  z-index: 10;
 +
}
 +
 
 +
#tab_nav div h1 {
 +
  margin: 0 auto;
 +
  font-family: Helvetica, Arial, sans-serif;
 +
  font-size: 25px;
 +
}
 +
 
 +
#tab_nav li:focus {
 +
  outline: none;
 +
  background: white;
 +
  color: black;
 +
  box-shadow: 0 -5px 0 white;
 +
}
 +
 
 +
#tab_nav li:focus div {
 +
  display: block;
 
}
 
}
  
Line 41: Line 124:
 
<h2 class = "main-title"> Protocols </h2>
 
<h2 class = "main-title"> Protocols </h2>
  
−
<article class="tabs">
+
<div id="tab_nav">
−
 
+
  <ul>
−
<section id="tab1">
+
    <li tabindex="0">
−
<h2><a href="#tab1">Tab 1</a></h2>
+
      <b>1. Tab</b>
−
<p>This content appears on tab 1.</p>
+
      <span>&darr;</span>
−
</section>
+
      <div>
−
+
        <h1>1. Tab</h1>
−
<section id="tab2">
+
        <p>Something in 1. tab.</p>
−
<h2><a href="#tab2">Tab 2</a></h2>
+
      </div>
−
<p>This content appears on tab 2.</p>
+
    </li>
−
</section>
+
    <li tabindex="0">
−
+
      <b>2. Tab</b>
−
<section id="tab3">
+
      <span>&darr;</span>
−
<h2><a href="#tab3">Tab 3</a></h2>
+
      <div>
−
<p>This content appears on tab 3.</p>
+
        <h1>2. Tab</h1>
−
</section>
+
        <p>Something in 2. tab.</p>
−
 
+
      </div>
−
</article>
+
    </li>
 +
    <li tabindex="0">
 +
      <b>3. Tab</b>
 +
      <span>&darr;</span>
 +
      <div>
 +
        <h1>3. Tab</h1>
 +
        <p>Something in 3. tab.</p>
 +
      </div>
 +
    </li>
 +
    <li tabindex="0">
 +
      <b>4. Tab</b>
 +
      <span>&darr;</span>
 +
      <div>
 +
        <h1>4. Tab</h1>
 +
        <p>Something in 4. tab.</p>
 +
      </div>
 +
    </li>
 +
  </ul> 
 +
  <div>
 +
    <h1>About this</h1>
 +
    <p>This is a clickable CSS menu.</p>
 +
    <p>Just click on one of tabs on top.</p>
 +
  </div>
 +
</div>
  
 
</html>
 
</html>

Revision as of 04:22, 28 August 2017

Protocols

  • 1. Tab ↓

    1. Tab

    Something in 1. tab.

  • 2. Tab ↓

    2. Tab

    Something in 2. tab.

  • 3. Tab ↓

    3. Tab

    Something in 3. tab.

  • 4. Tab ↓

    4. Tab

    Something in 4. tab.

About this

This is a clickable CSS menu.

Just click on one of tabs on top.