středa 28. srpna 2013

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ří :)

video

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://lh3.googleusercontent.com/-nzc8gUpqp5Q/UXfC94uJXWI/AAAAAAAADv0/eXwEcIrje-o/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 

2 komentáře:

  1. Tento komentář byl odstraněn autorem.

    OdpovědětVymazat
  2. čav, vďaka za zaujímavý tip. Žiaľ to video je nezaostrené, takže skoro vôbec nieje vidieť, čo tam vlastne robíš. Pls, nedá sa takéto rolovacie menu spraviť aj na vertikálnej lište? Ide mi o to, že ja mám blog, kde je už naozaj veľké množstvo položiek menu (hradiska.sk) a tam by som práve potreboval aby sa podpoložky menu rozvinuli pod seba. Pozri si najmä ten pravý stĺpec môjho menička, kde je zoznam hradísk. Potreboval by som aby tam boli iba tie položky "1. Kniežacie sídla - Najvýznamnejšie slovanské hradiská (predmestské aglomerácie)" "2. Mocenské centrá, sídla veľmožov, centrá remesiel a obchodu", "3. Hradiská so strážnou, hospodárskou vojenskou funkciou" atď. atď. A po kliknutí, resp. po nastavení myšky na ten názov, aby sa pod seba rozrolovali všetky hradiská čo k nemu patria. V zásade by to mal byť obdobný postup ako si opísala. Len ako dosiahnuť, aby menu bolo pod sebou a nie horizontálne? Nevieš mi aj v tomto poradiť? Veľký dík !!!

    OdpovědětVymazat