Sunday Tips | Drop-Down Menu

Zdravím, drazí čtenáři! 
Do předchozího dílu Sunday Tips mi přišla žádost na Drop-Down (Víceúrovňové) menu. Abych se přiznala, taky jsem dlouho hledala. Hlavně jsem se snažila najít to nejjednodušší na pochopení, ale taky na provedení. Stejně tak jsem nechtěla nějaké předem dané, nýbrž takové menu, které byste si mohli sami upravit dle libosti. Tak jdeme na to!
Začneme třeba tím, co Drop-Down menu vůbec je? Jde o menu (karty, stránky...), které má více úrovní. Také tomu ráda říkám ,,rozklikovací menu". Většinou se nachází těsně pod headerem (záhlavím), nebo pak úplně nahoře na obrazovce. My si dnes ukážeme, jak ho přidáme pod header. (Možná v budoucnosti udělám aktualizovanou verzi)

PRVNÍ ČÁST
Přes kartu Rozvržení klikneme na přidat gadget v místě hned pod záhlavím. (Upozorňuji, že pokud byste dávali kódy na jiná místa, mohlo by se menu zobrazit jinak A pokud v této pozici už máte přidaný gadget Stránky, musíte ho odstranit.) Vybereme HTML/Java Script a do něho nakopírujeme následující text:

<div id='menubar'>
<ul id='menus'>
<li><a href='ODKAZ'>JMENOKATEGORIE1</a></li>
<li><a href='ODKAZ'>JMENOKATEGORIE2</a></li>
<li><a href='ODKAZ'>JMENOKATEGORIE3</a></li>
<li><a href='ODKAZ'>JMENOKATEGORIE4</a></li>
</ul></div>


Jde o náš základ, na který budeme ještě navazovat. Hlavní je, abyste věděli, kolik kategorií budete mít.  Místo modrého textu zadáte text hlavní kategorie a přidáte k němu odkaz na ni. Jedná se hlavně o kategorie, které nebudou mít žádnou jinou podkategorii. Když u nějaké kategorie budete chtít více úrovní, nechte odkaz nevyplněný. Pokud byste chtěli jiný počet kategorií, stačí daný řádek vymazat, nebo zkopírovat. Přesuneme se k podkategoriím. A budeme pracovat pouze s tímto kódem:

 <ul>
          <li><a href='ODKAZ'>JMENOPODKATEGORIE1</a></li>
          <li><a href='ODKAZ'>JMENOPODKATEGORIE2</a></li>
          <li><a href='ODKAZ'>JMENOPODKATEGORIE3</a></li>
        </ul>

Tento text budeme vkládat vždy do kategrie, u které budeme chtít rozkliknout dále. Celý kód vložíme před </li> v daném řádku kategorie. V tomto případě máme tři podkategorie. Pokud byste chtěli nějakou ubrat či přidat, stačí řádek prostě vymazat, a nebo přidat. V daném výsledku by Váš kompletní mohl vypdat třeba takto: 

<div id='menubar'>
<ul id='menus'>
<li><a href='ODKAZ'>JMENOKATEGORIE1</a>
 <ul>
          <li><a href='ODKAZ'>JMENOPODKATEGORIE1</a></li>
        </ul></li>
<li><a href='ODKAZ'>JMENOKATEGORIE2</a></li>
<li><a href='ODKAZ'>JMENOKATEGORIE3</a></li>
<li><a href='ODKAZ'>JMENOKATEGORIE4</a>
 <ul>
          <li><a href='ODKAZ'>JMENOPODKATEGORIE1</a></li>
          <li><a href='ODKAZ'>JMENOPODKATEGORIE2</a></li>
        </ul></li>
</ul></div>

Schválně teď zkuste Váš kód uložit a podívat se, jak to na blogu vypadá. Pokud je to takové trochu rozházené, nebojte se. Teď přicházíme s druhou částí, kde bychom všechno měli hezky poskládat do sebe a dle libosti upravit. Příklad, jak to vypadá u mě:



DRUHÁ ČÁST


A není o nic složitejší. Tenotkrát zabrouzdáme do karty ŠABLONA a klikneme na UPRAVIT HTML. V textu si pak pomocí Ctrl + F vyhledáme následující výraz:

 ]]></b:skin>

A PŘED něj vložíme celý tento odstavec. (Pokud by Vám to nic nenašlo, zkuste vyhledat jen b:skin a pak to vložit až před ten druhý.) Nebojte se, je toho trochu víc, ale žádnou neplechu to nenadělá:

/*———— Začátek Drop-Down Menu ———*/ 

#menubar {
    background-color: transparent;
    width: 840px;
    color: #424338;
        margin-XXX: 0px; /* Pokud byste chtěli menu posunout, zadejte na jakou stranu chcete               zvětšit okraj, aby Vám to hezky pasovalo. */
        padding: 0;
        position: relative;
        border-top:0px solid ##8C001A;
        height:35px;
        width: XXXpx; /*Místo křížků zadejte příslušnou šířku pro Vaše menu. */

#menus {
    margin: 0;
    padding: 0;

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:0px solid #1A6680;
        border-right:0px solid #1A6680;
        height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFFFFF; /* Změní barvu textu již navštívených odkazů */
    display: block;
   font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 5px;  
           /* Pokud nechcete mezery mezi kartamy, zadejte hodnotu 0 */
           /* A pokud byste chtěli jinou velikost, zaměňte ho místo 14 */ 
    padding: 9px 12px 10px 12px;
        text-decoration: none;

#menus li a:hover, #menus li a:active {
    background: #424338; /* Pozadí, když na kartu najedete myší. */
    color: #FFFFFF; /* Toto změní barvu textu */
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;       

#menus li {
    float: left;
    padding: 0;

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;

#menus li ul a {
    width: 140px;

#menus li ul ul {
    margin: -25px 0 0 160px;

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li 

li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;

#menus li:hover, #menus li.sfhover {
    position: static;

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #424338; /* Toto je pozadí kart v podkategoriích */
    width: 120px;
    color: #FFFFFF; /* Toto změní barvu textu */
    display: block;
    font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;  
               /* Zaměň číslo 14 podle toho, jestli chceš písmo zvětšit, zmenšit. */ 
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:0px solid #1A6680;

#menus li li a:hover, #menusli li a:active {
    background: #424338; /* Toto je pozadí podkategorií, když na ně ukážete myší */
    color: #FFFFFF; /* A toto změní barvu textu. */
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;

/*———— Konec Drop-Down Menu -------*/


A to by bylo všechno! Zase opakuji, že to není žádná věda, ale jen trochu náročnější na čas. A taky to chce, abyste si malinko pohráli s designem a následnou úpravou. Budu všem držet palce, ať se podaří vytvořit to nejlepší menu, a pokud by nastaly komplikace, stačí napsat e-mail nebo komentář. 
Maru

CONVERSATION

2 komentářů:

  1. Ahoj Maria. Podľa tvojho tutoriálu som si vytvorila Drop-Down menu ale teraz do tých kategórií neviem vložiť príspevky. Nevedela by si mi prosím poradiť?

    ReplyDelete
    Replies
    1. Ahoj:) pokud jsem to správně pochopila, tak chceš přiřadit jednotlivé příspěvky k daným kategoriím? Já to dělám tak, že do odkazu kategorie vložím vždycky ten odkaz, který se Ti ukáže, když klikneš na daný štítek, a vyjedou Ti příspěvky označené tím štítkem. (Ono se to špatně vysvětluje, ale snad jsem Ti pomohla:))

      Delete

Děkuji za každý komentář! :)