Team:WashU

From 2010.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
 +
<head>
 +
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
 +
<title>Horizonal CSS Menu Tutorial ~ Example Page 5</title>
 +
<meta name="description" content="Example 5 - CSS Horizontal DropDown &amp; Popout Menu Tutorial"></meta>
 +
<link rel="shortcut icon" href="../../../favicon.ico" />
 +
<link href="tanfa.css" rel="stylesheet" type="text/css">
 +
<style type="text/css" media="screen">
 +
/**************** menu coding *****************/
 +
#menu {
 +
width: 100%;
 +
background: #eee;
 +
float: left;
 +
}
 +
 +
#menu ul {
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
width: 12em;
 +
float: left;
 +
}
 +
 +
#menu a, #menu h2 {
 +
font: bold 11px/16px arial, helvetica, sans-serif;
 +
display: block;
 +
border-width: 1px;
 +
border-style: solid;
 +
border-color: #ccc #888 #555 #bbb;
 +
margin: 0;
 +
padding: 2px 3px;
 +
}
 +
 +
#menu h2 {
 +
color: #fff;
 +
background: #000;
 +
text-transform: uppercase;
 +
}
 +
 +
#menu a {
 +
color: #000;
 +
background: #efefef;
 +
text-decoration: none;
 +
}
 +
 +
#menu a:hover {
 +
color: #a00;
 +
background: #fff;
 +
}
 +
 +
#menu li {position: relative;}
 +
 +
#menu ul ul {
 +
position: absolute;
 +
z-index: 500;
 +
}
 +
 +
#menu ul ul ul {
 +
position: absolute;
 +
top: 0;
 +
left: 100%;
 +
}
 +
 +
div#menu ul ul {
 +
display: none;
 +
}
 +
 +
div#menu ul ul,
 +
div#menu ul li:hover ul ul,
 +
div#menu ul ul li:hover ul ul
 +
{display: none;}
 +
 +
div#menu ul li:hover ul,
 +
div#menu ul ul li:hover ul,
 +
div#menu ul ul ul li:hover ul
 +
{display: block;}
 +
</style>
 +
</head>
 +
<body id="www-tanfa-co-uk">
 +
<div id="pagetop">
 +
<a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>
 +
<h1>CSS Drop Down Menu Tutorial Code</h1>
 +
<h2>Page 5 - Hiding and Revealing the Drops and Pops</h2>
 +
<h3>&laquo; <a href="tutorial-h.html#hs5">return to tutorial</a> :: Stages
 +
[<a href="hs1.html" title="Horizontal Example 1">1</a>]
 +
[<a href="hs2.html" title="Horizontal Example 2">2</a>]
 +
[<a href="hs3.html" title="Horizontal Example 3">3</a>]
 +
[<a href="hs4.html" title="Horizontal Example 4">4</a>]
 +
[5]
 +
[<a href="hs6.html" title="Horizontal Example 6">6</a>]
 +
[<a href="hs7.html" title="Horizontal Example 7">7</a>]
 +
</h3>
 +
</div>
 +
<!-- start menu HTML -->
 +
<div id="menu">
 +
<ul>
 +
  <li><h2>CSS Drop Down Menus</h2>
 +
    <ul>
 +
      <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
 +
        <ul>
 +
          <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
 +
          <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
 +
          <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
 +
        </ul>
 +
      </li>
 +
    </ul>
 +
  </li>
 +
</ul>
 +
 +
<ul>
 +
  <li><h2>Vertical CSS Pop-Out Menu</h2>
 +
    <ul>
 +
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
 +
      <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
 +
        <ul>
 +
          <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>
 +
            <ul>
 +
              <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
 +
              <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>
 +
              <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
 +
              <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
 +
              <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>
 +
              <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
      </li>
 +
    </ul>
 +
  </li>
 +
</ul>
 +
 +
<ul>
 +
  <li><h2>Horizontal Drop &amp; Pop Menu</h2>
 +
    <ul>
 +
      <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
 +
      <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
 +
        <ul>
 +
          <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
 +
            <ul>
 +
              <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
 +
              <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>
 +
              <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
 +
              <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
 +
              <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>
 +
              <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
      </li>
 +
    </ul>
 +
  </li>
 +
</ul>
 +
</div>
 +
<div>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
 +
</body>
 +
</html>
 +
 +
 +
 +
 +
{|align="justify"
{|align="justify"
|You can write a background of your team here.  Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.
|You can write a background of your team here.  Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.

Revision as of 16:10, 1 July 2010

Horizonal CSS Menu Tutorial ~ Example Page 5

CSS Drop Down Menu Tutorial Code

Page 5 - Hiding and Revealing the Drops and Pops

« return to tutorial :: Stages [1] [2] [3] [4] [5] [6] [7]

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.



You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing.
File:WashU logo.png
200px

Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)

File:WashU team.png
Your team picture
Team Example


Home Team Official Team Profile Project Parts Submitted to the Registry Modeling Notebook Safety
Retrieved from "http://2010.igem.org/Team:WashU"