Jan Linhart

Menu ve stylu select boxu

Podrobnosti

Zveřejněno 27. 5. 2012 17:18

Na několika projektech už jsem se setkal s požadavkem na nastylovaný select box s odkazy. Jak jitě víte, select box jako formulářový prvek nelze stylovat. Každý prohlížeč si ho vykresluje podle sebe. Dá se to obejít vytvořením vlastního select boxu. Například rovnou z menu Joomly.

Jednoduše se to dá udělat s JavaScriptovou knihovnou jQuery. Doporučuji jí importovat pomocí pluginu jako je jQuery Easy, který řeší i několikeré importování různých verzí (každé rozšíření si knihovnu chce načítat znovu) a konflikty s dalšími knihovnamy.

Klasický select box vypadá takto:

Položka 1Položka 2Položka 3

V jiném prohlížeči vypadá jinak. Když chcete, aby byl ve firemních barvách, s oblými rohy či se otevíral s nějakou animací, nedá se upravit. Navíc menu můžete ovládat z administrace Joomly, což je určitě výhoda.

Jako příklad použití se můžete podívat na můj oblíbený Partypoker. Mají tak vyřešená dvě menu. Jedním lze jít na jinou hru a druhým přepínat jazyky. Důvod proč použít takovéto menu je jasný - úspora místa. Uživatel se může soustředit na hlavní poslání webu a přitom má po ruce všechny možnosti, které může potřebovat. Jistě je to mnohem příjemnější řešení než všechny tyto odkazy vložit do horní lišty (to by uživatele jen mátlo) nebo do patičky (tam to nemusí objevit).

HTML kód

Joomla generuje menu takovýmto způsobem:

<div class="location_container ">
  <ul class="menu">
    <li id="item-119" class="deeper parent">
      <a href="/lokality">Lokality</a>
      <ul style="display: none; ">
        <li id="item-116">
          <a href="/lokality/praha">Praha</a>
        </li>
        <li id="item-117" class="deeper parent">
          <a href="/lokality/connecticut">Brno</a>
        </li>
        <li id="item-118" class="deeper parent">
          <a href="/lokality/plzen">Plzeň</a>
        </li>
        <li id="item-141">
          <a href="/lokality/ostrava">Ostrava</a>
        </li>
        <li id="item-142" class="deeper parent">
          <a href="/lokality/ceske-budejovice">České Budějovice</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

 Toto menu se skládá z jedné hlavní položky menu "Lokality" a pěti podpoložek "Praha", "Brno", "Plzeň", "Ostrava" a "České Budějovice". Je umístěné v divu s css třídou location_container.

jQuery

Tady je několik řádků JavaScriptu. S pomocí jQuery knihovny je to opravdu jednoduché.

jQuery(document).ready(function(){
  jQuery(".location_container ul.menu li.parent").click(function() {
    if(jQuery(this).children("ul").css("display") == "none"){
      jQuery(this).children("ul").slideDown("fast");
    } else {
      jQuery(this).children("ul").slideUp("fast");
    }
  });
});

CSS

Css styly jsou nutností nejen pro grafickou úpravu. Starají se také o rozložení.

.location_container ul {
	position: relative;
	list-style: none;
	background: #ccc;
	margin: 0;
	padding: 8px;
	z-index: 999;
        width: 200px;
        cursor: pointer;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
}
.location_container ul.menu li ul {
	left: 0px;
	width: 146px;
	margin: 8px 0 0 0;
	display: none;
	background: white;
	border: 1px solid #b4b4b4;
	position: absolute;
	border-top: white;
	z-index: 9999;
        border-top-left-radius: 0px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
}
.location_container ul.menu li ul li {
	padding: 5px 5px 5px 15px;
	border-top: 1px solid #dcdcdc
}
.location_container a {
	color: #000;
        font-size: 18px;
        font-weight: bold;
        line-height: 22px;
}

Ukázka hotového řešení

 Následuje jednoduchá ukázka jak to funguje v akci. Neberte to jako finální řešení. Musí se tam přidat minimálně šipička, aby uživatel věděl co to udělá až na to klikne.

(klikněte na šedou plochu)