Contenido

Menú al estilo Slashdot

28 jul

+ 3

slashdot Slashdot, es una de las webs  más visitadas y respetadas de Internet. Gracias al rediseño han mejorado tambien en su aspecto y a mi entender la navegación. Los menús de navegación son una parte imprescindible en una web de tal carácterísticas, con tantas temáticas y secciones. Con un menú deslizante ahorramos espacio, en caso de disponer de muchas categorias, y seguimos ofreciendo todo el contenido a nuestros visitantes.

Ahora montar un sistema de menús exactamente igual a los que usan en Slashdot.org es tan facil como esto:

El resultado es muy bueno ya que es completamente accesible y funciona en navegadores sin precesamiento de ficheros CSS.


<div class="sdmenu">
      <span class="title" id="top"><img src="slashfiles/expanded.gif" class="arrow" alt="-">Online Tools</span>
      <div webdeveloper-inline-style="height: 156px;" class="submenu">
        <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
        <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
        <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
        <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>

        <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
        <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
      </div>
      <span class="titlehidden"><img src="slashfiles/collapsed.gif" class="arrow" alt="-">Support Us</span>
      <div webdeveloper-inline-style="height: 0px; display: none;" class="submenu">
        <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
        <a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>

        <a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
      </div>
      <span class="titlehidden"><img src="slashfiles/collapsed.gif" class="arrow" alt="-">Partners</span>
      <div webdeveloper-inline-style="height: 0px; display: none;" class="submenu">
        <a href="http://www.javascriptkit.com">JavaScript Kit</a>
        <a href="http://www.cssdrive.com">CSS Drive</a>
        <a href="http://www.codingforums.com">CodingForums</a>

        <a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
      </div>
    </div>

Además se nota mi devoción por este formato de menús ya que desde el ajaxContempt los he usado en varios ocasiones.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.