Difference between revisions of "Team:BostonU HW"

Line 2: Line 2:
  
 
<html>
 
<html>
−
 
 
<head>
 
<head>
−
 
 
<style>
 
<style>
 +
@import url(https://fonts.googleapis.com/css?family=Lato);
  
−
#primary_nav_wrap
+
*, *:before, *:after{
−
{
+
  -webkit-box-sizing: border-box;
−
margin-top:15px
+
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
  padding: 0;
 +
  margin: 0;
 +
  font-family: 'Lato', sans-serif;
 
}
 
}
  
−
#primary_nav_wrap ul
+
/*| Navigation |*/
−
{
+
−
list-style:none;
+
−
position:relative;
+
−
float:left;
+
−
margin:0;
+
−
padding:0
+
−
}
+
  
−
#primary_nav_wrap ul a
+
nav{
−
{
+
  position: fixed;
−
display:block;
+
  top: 0;
−
color:#333;
+
  left: 0;
−
text-decoration:none;
+
  width: 100%;
−
font-weight:700;
+
  background: #fff;
−
font-size:12px;
+
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
−
line-height:32px;
+
  border: 1px solid rgba(0,0,0,.1);
−
padding:0 15px;
+
−
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
+
−
}
+
−
 
+
−
#primary_nav_wrap ul li
+
−
{
+
−
position:relative;
+
−
float:left;
+
−
margin:0;
+
−
padding:0
+
−
}
+
−
 
+
−
#primary_nav_wrap ul li.current-menu-item
+
−
{
+
−
background:#ddd
+
−
}
+
−
 
+
−
#primary_nav_wrap ul li:hover
+
−
{
+
−
background:#f6f6f6
+
−
}
+
−
 
+
−
#primary_nav_wrap ul ul
+
−
{
+
−
display:none;
+
−
position:absolute;
+
−
top:100%;
+
−
left:0;
+
−
background:#fff;
+
−
padding:0
+
−
}
+
−
 
+
−
#primary_nav_wrap ul ul li
+
−
{
+
−
float:none;
+
−
width:200px
+
−
}
+
−
 
+
−
#primary_nav_wrap ul ul a
+
−
{
+
−
line-height:120%;
+
−
padding:10px 15px
+
−
}
+
−
 
+
−
#primary_nav_wrap ul ul ul
+
−
{
+
−
top:0;
+
−
left:100%
+
−
}
+
−
 
+
−
#primary_nav_wrap ul li:hover > ul
+
−
{
+
−
display:block
+
 
}
 
}
 +
  nav ul{
 +
    list-style: none;
 +
    position: relative;
 +
    float: right;
 +
    margin-right: 100px;
 +
    display: inline-table;
 +
  }
 +
    nav ul li{
 +
      float: left;
 +
      -webkit-transition: all .2s ease-in-out;
 +
      -moz-transition: all .2s ease-in-out;
 +
      transition: all .2s ease-in-out;
 +
    }
  
 +
    nav ul li:hover{background: rgba(0,0,0,.15);}
 +
    nav ul li:hover > ul{display: block;}
 +
    nav ul li{
 +
      float: left;
 +
      -webkit-transition: all .2s ease-in-out;
 +
      -moz-transition: all .2s ease-in-out;
 +
      transition: all .2s ease-in-out;
 +
    }
 +
      nav ul li a{
 +
        display: block;
 +
        padding: 30px 20px;
 +
        color: #222;
 +
        font-size: .9em;
 +
        letter-spacing: 1px;
 +
        text-decoration: none;
 +
        text-transform: uppercase;
 +
      }
 +
      nav ul ul{
 +
        display: none;
 +
        background: #fff;
 +
        position: absolute;
 +
        top: 100%;
 +
        box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
 +
        border: 1px solid rgba(0,0,0,.1);
 +
      }
 +
        nav ul ul li{float: none; position: relative;}
 +
          nav ul ul li a {
 +
            padding: 15px 30px;
 +
            border-bottom: 1px solid rgba(0,0,0,.05);
 +
          }
 +
          nav ul ul ul {
 +
            position: absolute;
 +
            left: 100%;
 +
            top:0;
 +
          }
 
</style>
 
</style>
−
 
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
 
+
<nav role='navigation'>
−
<h1>Simple Pure CSS Drop Down Menu</h1>
+
  <ul>
−
<nav id="primary_nav_wrap">
+
    <li><a href="#">Team</a></li>
−
<ul>
+
    <li><a href="#">Project</a>
−
  <li class="current-menu-item"><a href="#">Home</a></li>
+
      <ul>
−
  <li><a href="#">Menu 1</a>
+
        <li><a href="">Microfluidics 101</a></li>
−
    <ul>
+
        <li><a href="">Video Tutorials</a></li>
−
      <li><a href="#">Sub Menu 1</a></li>
+
      </ul>
−
      <li><a href="#">Sub Menu 2</a></li>
+
    </li>
−
      <li><a href="#">Sub Menu 3</a></li>
+
    <li><a href="#">Human Practices</a></li>
−
      <li><a href="#">Sub Menu 4</a>
+
    <li><a href="#">Medal Criteria</a></li>
−
        <ul>
+
  </ul>
−
          <li><a href="#">Deep Menu 1</a>
+
</nav>
−
            <ul>
+
−
              <li><a href="#">Sub Deep 1</a></li>
+
−
              <li><a href="#">Sub Deep 2</a></li>
+
−
              <li><a href="#">Sub Deep 3</a></li>
+
−
                <li><a href="#">Sub Deep 4</a></li>
+
−
            </ul>
+
−
          </li>
+
−
          <li><a href="#">Deep Menu 2</a></li>
+
−
        </ul>
+
−
      </li>
+
−
      <li><a href="#">Sub Menu 5</a></li>
+
−
    </ul>
+
−
  </li>
+
−
  <li><a href="#">Menu 2</a>
+
−
    <ul>
+
−
      <li><a href="#">Sub Menu 1</a></li>
+
−
      <li><a href="#">Sub Menu 2</a></li>
+
−
      <li><a href="#">Sub Menu 3</a></li>
+
−
    </ul>
+
−
  </li>
+
−
  <li><a href="#">Menu 3</a>
+
−
    <ul>
+
−
      <li class="dir"><a href="#">Sub Menu 1</a></li>
+
−
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
+
−
        <ul>
+
−
          <li><a href="#">Category 1</a></li>
+
−
          <li><a href="#">Category 2</a></li>
+
−
          <li><a href="#">Category 3</a></li>
+
−
          <li><a href="#">Category 4</a></li>
+
−
          <li><a href="#">Category 5</a></li>
+
−
        </ul>
+
−
      </li>
+
−
      <li><a href="#">Sub Menu 3</a></li>
+
−
      <li><a href="#">Sub Menu 4</a></li>
+
−
      <li><a href="#">Sub Menu 5</a></li>
+
−
    </ul>
+
−
  </li>
+
−
  <li><a href="#">Menu 4</a></li>
+
−
  <li><a href="#">Menu 5</a></li>
+
−
  <li><a href="#">Menu 6</a></li>
+
−
  <li><a href="#">Contact Us</a></li>
+
−
</ul>
+
−
</nav>
+
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Revision as of 19:06, 16 August 2017

<!doctype html> Material Kit by Creative Tim