Autor Zpráva
T.Nej
Profil *
Narazil jsem na takový velmi zvláštní problém a zajímalo by mě jaké řešení byste navrhovali, protože jsem žádné dobré nevymyslel a ani nenašel.
Chci udělat horizontální menu s "hoverem". V tom by problém nebyl, ale vzhledem ke specifickému tvaru a vzhledu menu (viz obrázek) se mi nedaří nalézt způsob jak to vyřešit.



Napadlo mě takové řešení:
<style type="text/css">
.main-menu{
   background-image: url("menu-1.jpg");
   background-repeat: no-repeat;
   width: 800px;
   height: 27px;
}
.main-menu-cell{
   width: 537px;
   height: 27px;
   margin-left: 131px;
   position: relative;
}
.main-menu-cell li {
   list-style-type: none;
   display: inline;
}
.main-menu-cell-1 {
   width: 182px;
   height: 27px;
   top:0px;
   left:0px;
   position: absolute;
}
.main-menu-cell-2 {
   width: 173px;
   height: 27px;
   top:0px;
   left:182px;
   position: absolute;
}
.main-menu-cell-3 {
   width: 182px;
   height: 27px;
   top:0px;
   left:355px;
   position: absolute;
}
</style>
<div class="main-menu">
   <div class="main-menu-cell">
      <a href="...." title="Úvod">
         <li>
            <div class="main-menu-cell-1"></div>
         </li>
      </a>
      <a href="...." title="O mně">
         <li>
            <div class="main-menu-cell-2"></div>
         </li>
      </a>
      <a href="...." title="Projekty">
         <li>
            <div class="main-menu-cell-3"></div>
         </li>
      </a>
   </div>
</div>


Menu by se mělo také při pohybu myší po jednotlivých položkách menu načítat s jiným pozadím (viz ten obrázek - 3 varianty pro 3 položky), ale nevím jak toho docílit.
A to že tlačítka(tedy "divy") by měly jen čtvercový tvar mi nevadí.
PS: Doufám že jsem to napsal srozumitelně a vím, že ten kód není příliš validní (uvnitř <a> je <div>).

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: