AD Blog

Vančák bloguje - text spotu:

Flexibilní obrázkové horizontální menu

Aneb jak jsem ladil CSS.

Na jeden projekt do administrační části jsem potřeboval vytvořit horizontální menu, které se bude flexibilně přispůsobovat textům odkazů s výrazným hoverem. Navíc nejsem schopný dopředu určit jak dlouhý text bude.

Najít řešení výše uvedených požadavků jsem se pokoušel všude možně něco najít. Ale jaksi nic nevyhovovalo. Takže se slovy „co si člověk neudělá sám, nemá“ jsem vyhrnul rukávy a začal tvořit sám. Vzhledem k tomu, že moje řešení mi přijde docela elegatní, dávám ho k veřejné kritice. I když vím, že je to pro vás zřejmě stará vesta.

Předně jsem pomocí Gimpu a manuálu na Linusoft.cz vytvořil následující obrázky (skutečný rozměr š x v [px] 15×50, 1×50 a 15×50) s průhledným pozadím a uložil ve formátu gif.

HTML je maximálně jednoduché:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="cs">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <link rel="stylesheet" type="text/css" href="menu.css" media="screen">
    <title>Menu</title>
  </head>
  <body>
   <menu>
    <li>
     <a href="#">
       <span class="left_img"></span>
       <span class="middle_img">první položka</span>
       <span class="right_img"></span>
     </a>
    </li>
    <li>
     <a href="#">
       <span class="left_img"></span>
       <span class="middle_img">druhá položka</span>
       <span class="right_img"></span>
     </a>
    </li>
    <li>
     <a href="#">
      <span class="left_img"></span>
      <span class="middle_img">nějaká hodně dlouhá položka</span>
      <span class="right_img"></span>
     </a>
    </li>
   </menu>
  </body>
</html>

CSS je také poměrně transparetní:

body {
         background-color:rgb(255,255,204);
         margin:0;
         padding:0;
         line-height: normal;
}
menu
{
         clear:both;
         list-style-type: none;
         margin-top:4em;
}
menu li {
         float: left;
         border-bottom:1px solid #000;
}
menu li a{
         display: block;
         color: black;
}

.left_img {
         display: block;
         height: 25px;
         background: url(./img/left.gif) no-repeat 0 0;
         width:15px;
         float: left;
}
.middle_img {
         display: block;
         height: 25px;
         %height: 21px;
         background: url(./img/middle.gif) repeat-x 0 0;
         float: left;
         %padding-top: 4px;
}
.right_img {
         display: block;
         height: 25px;
         background: url(./img/right.gif) no-repeat 0 0;
         width:15px;
         float: left;
}
menu li a:hover{
         color: white;
         text-decoration: none;
}
menu li a:hover .middle_img{
         background-position: 0 -25px;
}

menu li a:hover .left_img{
         background-position: 0 -25px;
}
menu li a:hover .right_img{
         background-position: 0 -25px;
}

Ty dva „podtržítkové hacky“ jsou tam proto, že se mi nepodařilo přesvědčit IE aby respektovalo moje požadavky na padding-top.

Jak to celé funguje se můžete podívat zde

Otestováno v IE6, IE7, Firefox2, Safari pro Windows a Opera.

Známé problémy:

v IE6 při jistém nastavení cachovacího algoritmu prohlížeče zůstává „viset“ hover, když není položka vybraná.
v Opeře se nezobrazuje podtržení odkazu
jsou tam prázdné „spany“
řešení není otestováno na jiný než uvedený doctype

Pokud přijdete na další, nebo znáte řešení výše uvedených, napište do komentářů. Díky, pomůžete mi.

13 říjen 2007, 12:59 Autor:Aleš Dobrovolný