Tutoriál (4) - jak na rolovací menu (stránky)

Ahoj,
v dnešním tutoriálu se podíváme na menu se stránkami. Všechny kódy najdete zde ve článku i s menším vysvětlením, ale doporučuji stejně shlédnout video :D Doufám, že se Vám to podaří :)

V html kódech blogu si najdete slovo <header>. Asi po 11 řádcích je to ukončené slovem </b:section> - POD toto slovo umístíte následující kód:

<!-- Začiatok - Navigačné Menu  -->
<nav>
                  <ul>
                    <li>
                      <a expr:href='data:blog.homepageUrl'>
                        Home
                      </a>
                    </li>
                    <li>
                      <a class='sf-with-ul' href='#'>
                        Menu 1
                        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2itYsQ7I-XH_al3vg_UWxoctFSU6xoDevGpzltxbIZW9Y6xkHa5nBuV0RByxOYqTbzssGFpwLlKXiFgXeC2zz3bT0hPdc7tgNUh5apOfEiWhYducZgA_W8eU5ml2QbCOPlqSjS8j-2ul/s5/menu_down.gif' style='position: absolute; top: 18px; right: 8px;'/>
                      </a>
                      <ul>
                        <li>
                          <a href='ZDE bude adresa (odkaz)'>
                            1. podkategorie
                          </a>
                        </li>
                        <li>
                          <a href='ZDE bude adresa (odkaz)'>

                            2. podkategorie
                          </a>
                        </li>
                        <li>
                          <a href='ZDE bude adresa (odkaz)'>

                           3. podkategória
                          </a>
                        </li>
                        <li>
                          <a href='ZDE bude adresa (odkaz)'>

                            4. podkategorie
                          </a>
                        </li>
                     
                      </ul>
                    </li>
                    <li>
                      <a href='ZDE bude adresa (odkaz)'>

                        Menu 2
                      </a>
                    </li>
                    <li>
                     <a href='ZDE bude adresa (odkaz)'>

                        Menu 3
                      </a>
                    </li>
                  </ul>
</nav>

      <!-- Koniec - Navigačné Menu  -->

Místo slov ZDE bude adresa (odkaz) vložíte odkaz, kam se chcete po kliknutí dostat. Nevím jestli jsem to ve videu dostatečně vysvětlila, ale musíte si nastavit, že nechcete zobrazovat stránky (nebudete je mít v horní liště ani z boku). Ty stránky pořád budou existovat, jen se nebudou zobrazovat v té liště. Zkopírujete si jen adresu té stránky a vložíte jí sem. Slova "podkategorie a menu" nahraďte svými názvy, podle toho, jak chcete aby se stránky jmenovali.

Když popojedete kousek nad předtím vyhledané slovo header, tak tam najdete slovo <b:skin>, vedle kterého najdete takovou šipku (vše vysvětlené ve videu). Tu rozkliknete a objeví se Vám tam spousta modrého textu. Pojedete až na konec toho textu, který je zakončen slovem        ]]></b:skin>. NAD toto slovo umístíte následující kód:

/* Css pre navigačné menu
-------------------------------*/

nav {
position: relative;
background-color:#000; /* BARVA Lišty*/
width: 980px; /* nastavení šírky */
display: inline-block;
padding: 0 19px;
margin-top: -15px;
clear: both;
line-height: 1em;
}

nav ul {
list-style: none;
}

nav a {
display: block;
padding: 14px;
color: #fff; /* BARVA PÍSMA */
}

nav a:hover {
text-decoration: underline;
color: #fff; /* BARVA PÍSMA */
}

nav ul ul a {
display: block;
padding: 14px;
position: relative;
}

nav li {
float: left;
position: relative;
z-index: 100;
}

nav ul ul {
position: absolute;
z-index: 120;
width: 200px;
background: #000; /* černá barva "rolovací lišty"*/
display: none;
z-index: 200;
}

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
color:#fff; /* BARVA PÍSMA */
}

nav ul {
color: #fff; /* BARVA PÍSMA */
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}

nav ul:after {
content: ""; clear: both; display: block;
}

nav a:link {
text-decoration:none;
color: #fff; /* BARVA PÍSMA */
}

nav a:visited {
text-decoration:none;
color: #fff; /* BARVA PÍSMA */
}

nav a:hover {
text-decoration:underline;

Místo barev, které jsou uvedené před slovy /* BARVA PÍSMA */ si můžete sami zvolit barvu. Na stránce http://www.colourlovers.com/palettes můžete najít kódy barev. Kód vložíte za dvojitý křížek. Můžete si taky nastavit šířku, podle toho jak máte blok široký. Potom nezapomeňte úpravy uložit a máte to :D