Difference between revisions of "Team:Oxford/Templates/Nav"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
<style>
−
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+
#primary_nav_wrap
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
+
{
−
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+
margin-top:15px
 +
}
 +
 
 +
#primary_nav_wrap ul
 +
{
 +
list-style:none;
 +
position:relative;
 +
float:left;
 +
margin:0;
 +
padding:0
 +
}
 +
 
 +
#primary_nav_wrap ul a
 +
{
 +
display:block;
 +
color:#333;
 +
text-decoration:none;
 +
font-weight:700;
 +
font-size:12px;
 +
line-height:32px;
 +
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
 +
}
 +
</style>
 
</head>
 
</head>
 
<body>
 
<body>
  
−
<div class="container">
+
 
−
   <div class="dropdown">
+
 
−
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
+
<h1>Simple Pure CSS Drop Down Menu</h1>
−
    <span class="caret"></span></button>
+
<nav id="primary_nav_wrap">
−
    <ul class="dropdown-menu">
+
<ul>
−
      <li><a href="#">HTML</a></li>
+
   <li class="current-menu-item"><a href="#">Home</a></li>
−
      <li><a href="#">CSS</a></li>
+
  <li><a href="#">Menu 1</a>
−
       <li><a href="#">JavaScript</a></li>
+
     <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>
 +
      <li><a href="#">Sub Menu 4</a>
 +
        <ul>
 +
          <li><a href="#">Deep Menu 1</a>
 +
            <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>
 
     </ul>
−
   </div>
+
   </li>
−
</div>
+
  <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 21:27, 26 June 2016

Simple Pure CSS Drop Down Menu