Jak na vlastní vzhled odrážek seznamů?

Základní vzhled seznamů/listů je ve většině webů příliš strohý a je dobré si dané "odrážky" dostylovat ať již barevností, či dokonce vlastním vzhledem odrážky. Několik způsobů jak toho docílit se dočtete v článku.

1) Stylování tagu "ul" pomocí vlastnosti "list-style-image"

ul{
padding-left: 26px;
list-style-image:url("../../img/ic-odrazka.png")
}

2) Stylování tagu "li" pomocí atributu "background-image"

ul{
  padding-left: 0px;
}
li{
  padding-left: 26px;
  background-position: left 4px;
  background-repeat: no-repeat;
  background-image: url("../../img/ic-odrazka.png");
}

Obě řešení fungují, ale nastane u nich problém při víceúrovňových seznamech jako například:

  
one
  
two
  

    

      
one
      
two
      
one1
      
two2
    
  
  
next

Zde se stane, že u prvního řádku vnořeného seznamu se nám zobrazí dvě odrážky vedle sebe. Proč? První odrážka je z hlavního seznamu respektive jeho 3.řádku a druhá odrážka je z vnořeného seznamu respektive jeho prvního řádku.
Jak tento problém vyřešit? Jsou 2 cesty (obě vychází z výše zmíněného stylovní tagu li pomocí "background-image"), kde každá má své pro a proti.

1) úprava HTML

//CSS cast
ul {
  list-style: none;
}
ul li > span {
  display: block;
  padding-left: 26px;
  list-style-type: none;
  background-position: left 4px;
  background-repeat: no-repeat;
  background-image: url("../../img/ic-odrazka.png");
}

//HTML cast

  
one
  
two
  

    

      
one
      
two
      
one1
      
two2
    
  
  
next

Pro:
- Nepotřebujete Javascript
Proti:
- Pokud máte u webu administraci, tak bez použití Javascriptu nedokážete zajistit, že Vám uživatelé budou vkládat do každého tagu "li" tag "span".


2) Využití jQuery

//CSS cast
   ul{
      padding-left: 0px;
    }
    li{
      padding-left: 26px;
      list-style-type: none;
      background-position: left 4px;
      background-repeat: no-repeat;
      background-image: url("../../img/ic-odrazka.png");
    }
li ul li{ /*druha uroven seznami*/
      background-image: url("../../img/ic-odrazka-2.png");
}
li ul li ul li{ /*treti uroven seznami*/
      background-image: url("../../img/ic-odrazka-3.png");
}
li.has-list {
  background: none;
}

//jQuery cast
$(function() {
  $('ul li:has("ul")').addClass('has-list');
});

//HTML cast

  
one
  
two
  

    

      
one
      
two
      
one1
      
two2
    
  
  
next

Pro:
- Dynamické řešení, které funguje vždy.
Proti:
- Než zareaguje Javascript tak lze pár milisekund vidět 2 obrázky u sebe.
- Použití Javascriptu.

Ukázka ralizace na JSFiddle zde

<< zpět