Růžový Pixel: JAK VYTVOŘIT ROZBALOVACÍ MENU│BLOGGER NÁVODY

AHOJ pod dlooouhé době :)

Dnes se podíváme na vytvoření rozbalovacího menu!

Díky vytvoření rozbalovacího menu na svém blogu, získáte rychlí přehled o vašich štítcích. Hodí se převážně pro blogy, které mají vícero štítku, avšak mnoho z nich spadá pod určité hlavní téma. Např. hlavní název rubriky bude OBLEČENÍ a pod ním najdete roztřídění do šatů, blůzek, kalhot atd..atd...

Poprvé to pro mě byla španělská vesnice. Dost dlouho mi trvalo než jsem našla ten správný návod, seskládala html kod a to NEJHORŠÍ správně upravila CSS. Na internetu naleznete desítky návodu na "horizontal drop down menu" a stovky možností jak upravit jeho vzhled. Já vám dnes postup předvedu podle mého. Tak jak to zvládám já a jak to jistě zvládnete i Vy :)

---
Nejprve chci MOC poděkovat tomuto člověku, který na youtube nahrál toto video. Jeho základní šablona mi při tvorbě té mé moc a moc pomohla a v podstatě se vám snažím vysvětlit jeho práci. Díky ♥
základní zdroj: rolldownmenu
---

- Veškeré vysvětlení, KAM a CO vložit, naleznete níže ve videu. V tomto článku jsou pouze základní HTML a návod na úpravu CSS :))

POSKLÁDÁNÍ MENU K poskládání menu budete potřebovat tento HTML kód který si vložíte na blog (postup je ve videu). Tento kód si poté upravíte. Můžete přidat i odebrat rubriky, jen se vždy snažte, abyste kopírovali základní html znaky (např. pod-rubrika začínala <li> a tak i končila a pod.) Místo # vždy vložte odkaz.

   <div id='menubar'>
    <ul id='menus'>
<li>
        <a href='#'>RUBRIKA1</a>
      </li>
<li>
        <a href='#'>RUBRIKA2</a>
         <ul>
<li><a href='#'>PODRUBRIKA1</a></li>
<li><a href='#'>PODRUBRIKA2</a></li>
<li><a href='#'>PODRUBRIKA3</a></li>
</ul>
<li>
        <a href='#'>RUBRIKA3</a>
      </li>
<li>
        <a href='#'>RUBRIKA4</a>
        <ul>
<li><a href='#'>PODRUBRIKA1</a></li>
<li><a href='#'>PODRUBRIKA2</a></li>
<li><a href='#'>PODRUBRIKA3</a></li>
</ul>
</li>
</ul>
</div>

ÚPRAVA VZHLEDU Tento CSS kód si nahrajte na blog také (postup je také ve videu). Já jsem toto CSS nastavila do základních barev, vy si jej však můžete jednoduše upravit. Pomoct by vám měly texty za ***

 /*-------- ZAČÁTEK ROZBALOVACÍHO MENU -------*/

#menubar {
    background: #000000; ***POZADÍ CELÉHO MENU***
    width: 840px;
    color: transparent;
        margin: 10px;
        padding-left: 105px; ***POSUNUTÍ TEXTU POKUD CHCETE VYCENTROVAT***
        position: relative: center;
        border-top: none;
        height:35px;

}

#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: none;
        border-right:none;
        height:35px;
display:inline;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #ffffff; ***BARVA TEXTU*** 
    display: block;
   font:normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
      text-decoration: none;
    padding: 10px;

        
}

#menus li a:hover, #menus li a:active {
    background: white;  /***POZADI PŘI NAJETI MYŠI***/
    color: black;
    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: 0px 0 0 0px;
}

#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: #000000; ***POZADÍ ROZBALENÉHO SLOUPCE***
    width: 120px;
    color: #FFFFFF; ***TEXT ROZBALENÉHO SLOUPCE***
    display: block;
    font:normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom: none;
}

#menus li li a:hover, #menusli li a:active {
    background: #C0C0C0; ***POZADÁ ROZBALENÉHO SLOUPCE PŘI NAJETÍ MYŠI***
    color: transparent;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
/*-------- KONEC ROZBALOVACÍHO MENU -------*/

VIDEO NÁVOD ZDE

Doufám, že jsem vám při tvoření rozbalovacího menu byla nápomocná a snad jsem vám ušetřila nějakou tu práci, se kterou jsem bojovala já. Abych připomněla. Nejsem nějaký znalec ani stvořitel webových stránek. Při spoustu návodech mi pomáhá strejda googl a tento web. Pouze se snažím své poznatky šířit dále. Beru to jako koníček a občas taky šlápnu vedle. Takže pokud by vám něco prostě nešlo, nebo jste si nevěděli rady, napište mi do komentářů :)

5 komentářů:

Susansfitlife2. května 2017 v 11:31
Ahoj, můžeš mi prosím poradit, dle tvého návodu jsem zkusila na blog dodat rozbalovací menu a kromě úpravy vzhledu jako takového mi skáče několik položek na řádek, což nevím jak mám upravit, předem díky

Zuzka

www.susansfitlife.blogspot.cz
OdpovědětVymazat
Odpovědi
Gapa Art & Design20. září 2017 v 11:22
Ahoj,
mám takový problém, že když chci najet a rozkliknout podrubriku, tak zmizí a schová se zpět pod rubriku. Jde to nějak opravit?
Předem děkuji, P.C.
OdpovědětVymazat
Odpovědi
Lenča10. června 2018 v 1:25
Ahoj, prosim te jak do takto udelaneho menu vlozim clanky? Dekuji moc
OdpovědětVymazat
Odpovědi
()21. března 2019 v 0:21
Bubu
OdpovědětVymazat
Odpovědi

Okomentovat

pátek 23. ledna 2015

JAK VYTVOŘIT ROZBALOVACÍ MENU│BLOGGER NÁVODY

5 komentářů: