Menú Suckerfish

Como en este BLOG DE PRUEBAS tengo instalado el menú Suckerfish y un trucp slide-in de con efecto flash, pero sin flash, voy a explicar aquí los dos.

Empecemos por el menú.:

.- Necesitamos el CSS. Yo he modificado el original para adaptarlo a la cabecera del blog. Este es el básico:

body {
 font-family: arial, helvetica, serif;
 font-size: 80%;
 background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
 padding: 2em;
 margin: 0;
}

#content {
 width: 34em;
 background-color: #f4ecd9;
 padding: 1em 0;
 border: 6px double #7d6340;
 margin: auto;
 voice-family: "\"}\""; 
 voice-family:inherit;
 width: 32em;
}
html>body #content {
 width: 32em;
} 

a {
 text-decoration: none;
}

a:link {
 color: #080;
}

a:visited {
 color: #790;
}

a:active {
 color: red;
}

a:hover {
 text-decoration: underline;
}

h1 {
 text-align: center;
 padding: 0 0 0.25em 0;
 margin: 0;
}

ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

#nav a {
 font-weight: bold;
 color: green;
}

#nav a {
 text-decoration: none;
}

#nav li li a {
 display: block;
 font-weight: normal;
 color: #060;
 padding: 0.2em 10px;
}

#nav li li a:hover {
 padding: 0.2em 5px;
 border: 5px solid #7d6340;
 border-width: 0 5px;
}

li {
 float: left;
 position: relative;
 width: 10em;
 text-align: center;
 cursor: default;
 background-color: white;
 border: 1px solid #7d6340;
 border-width: 1px 0;
}

li#first {
 border-left-width: 1em;
}

li#last {
 border-right-width: 1em;
}

li ul {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;

 font-weight: normal;
 background: url(images/ddbg3.gif) bottom left no-repeat;
 padding: 0.5em 0 1em 0;
 border-right: solid 1px #7d6340;
}

li>ul {
 top: auto;
 left: auto;
}

li li {
 display: block;
 float: none;
 background-color: transparent;
 border: 0;
}

li:hover ul, li.over ul {
 display: block;
}

hr {
 display: none;
}

p {
 clear: left;
 background: url(images/remora.gif) center left no-repeat;
 padding: 1em 1em 0 1em;
 margin: 0;
}

p.image {
 float: right;
 font-size: 0.8em;
 text-align: center;
 color: #7d6340;
 padding: 1.25em 1.25em 0.25em 0.25em;
)

p.image img {
 display: block;
 border: 1px solid #7d6340;
}
 

.- El script que desplegará los submenús:

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
 if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.onmouseover=function() {
     this.className+=" over";
    }
    node.onmouseout=function() {
     this.className=this.className.replace(" over", "");
    }
   }
  }
 }
}
window.onload=startList;

//--><!]]></script>
 

.- Y el HTML de nuestro menú, que colocaremos, supongo, bajo la cabecera del blog... o en el footer...

<h1><img src="images/logo2.gif" width="262" height="103" alt="the Suckerfish" /></h1>

<hr />

<ul id="nav">

 <li id="first">
  <div><a href="">Overview</a></div>
  <ul>

   <li><img src="images/remora4.gif" width="100" height="27" alt="Remora" /></li>
   <li><a href="">Classification</a></li>
   <li><a href="">Physcial Characteristics</a></li>

   <li><a href="">Habitat</a></li>
   <li><a href="">Lifestyle</a></li>
   <li><a href="">Evolution</a></li>

   <li><a href="">Distribution</a></li>
  </ul>
 </li>

 <li>
  <div><a href="">Species</a></div>
  <ul>
   <li><a href="">Ceylonese remora</a></li>

   <li><a href="">Remora remora</a></li>
   <li><a href="">Sharksucker</a></li>
   <li><a href="">Slender remora</a></li>
   <li><a href="">Spearfish remora</a></li>
   <li><a href="">Whitefin sharksucker</a></li>
   <li><img src="images/remora6.gif" width="59" height="80" alt="The top of a remoras head" /></li>

  </ul>
 </li>

 <li id="last">
  <div><a href="">Links</a></div>
  <ul>
   <li><a href="http://www.itis.usda.gov/servlet/SingleRpt/SingleRpt?amp;search_topic=TSN&amp;search_value=168567">Remoras at ITIS</a></li>
   <li><a href="http://animaldiversity.ummz.umich.edu/accounts/remora/r._remora.html">Remora remora at ADW</a></li>

   <li><a href="http://www.oceanlight.com/html/remora_sp.html">Phillip Colla photographs</a></li>
   <li><img src="images/remora3.gif" width="100" height="35" alt="Remora" /></li>
   <li><a href="http://www.amonline.net.au/fishes/fishfacts/fish/enaucrates.htm">Slender suckerfish at Australian Museum Online</a></li>
   <li><a href="http://www.colzoo.org/animalareas/shores/remora.html">Remora at Columbus Zoo</a></li>

  </ul>
 </li>

</ul>

<hr />
 

Además de bonito, es muy sencillo. Y es obra de htmldog