Drop Down Navigation | Code Your Blog

nedeľa 10. júla 2016


Ahoj!
Dnes to bude ďalší článok s kódmi; konkrétne na vytvorenie rozbaľovacieho menu v úvode stránky - návod, o ktorý prosila Sasha, no určite pomôže viacerým ♡.
Hello!
It will be another post with codes today; more specifficly for creating drop down navigation in  site header - tutorial for which Sasha asked for, but I'm sure it'll help more of you .

Creating Drop Down Navigation
01. Prihláste sa na svoj blog, v ľavom menu zvoľte Rozloženie a do časti Hlavička pridajte modul gadget HTML/Javascript.
02. Ako názov zadajte:
01. Log into your blog, in menu on the left side choose "Layout" and into part "Header" add modul gadget "HTML/Javascript".
02. As a title add:

<!>

03. Do obsahu vložte:03. As a content add:

<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='adresa menovky // link to label'>LINK 1</a></li>
<li><a href='adresa menovky // link to label'>LINK 2</a></li>
<li><a href='#'>LINK 3</a>
<ul>
<li><a href='adresa podmenovky // link to sublabel'>SUBLINK 3A</a></li>
<li><a href='adresa podmenovky // link to sublabel'>SUBLINK 3B</a></li>
<li><a href='adresa podmenovky // link to sublabel'>SUBLINK 3C</a></li>
</ul>
</li>
<li><a href='adresa menovky // link to label'>LINK 4</a></li>
<li><a href='#'>LINK 5</a>
<ul>
<li><a href='adresa podmenovky // link to sublabel'>SUBLINK 5A</a></li>
<li><a href='adresa podmenovky // link to sublabel'>SUBLINK 5B</a></li>
</ul>
</li>
</ul>
</div>
</div>
Pozor: Červené časti zmeňte na vlastné adresy a text.Warning: Red parts change to your links and texts.

04. Ak chcete pridať ďalšie kategórie, vložte:04. If you want to add more caregories add:

<li><a href='adresa menovky // link to label'>LINK X</a></li>

Ak chcete pridať ďalšie podkategórie, vložte:If you want to add more sub-caregories add:

<li><a href='#'>LINK Y</a>
<ul>
<li><a href='adresa podmenovky // link to sublabel'>SUBLINK YA</a></li>
</li>
</ul>

05. Modul gadget uložte a premiestnite na požadované miesto.05. Save your modul gadget and move it to your desired place.

Styling
01. V ľavom menu na Bloggeri zvoľte Šablóna a kliknite na Upraviť kód HTML.
02. Kliknite dovnútra okna s kódmi, stlačte CTRL + F a do vyhľadávača zadajte:
01. In left menu on Blogger choose "Template" and click on "Edit HTML".
02. Click inside the box with all codes press CTRL + F and into searchbar add:

]]></b:skin>

03. Pred tento kód vložte:03. Above this code add:

#NavMenu {
background-color: #ffffff; /* farba pozadia */
width: 100%; /* šírka celého menu */
height: 40px; /* výška menu */
position: relative; margin: 0 auto; padding: 0;
border: 0px solid black; /* rámček okolo menu */
}

#NavMenuleft {
width: 800px; /* šírka menu */
float: none; margin: 0 auto; padding: 0; }

#nav { margin: 0 auto; padding: 0; border: 0px solid black;  }
#nav ul { float: none; list-style: none; margin: 0; padding: 0; overflow: visible; }

#nav li a, #nav li a:link, #nav li a:visited {
color: #ff0000; /* farba odkazu */
display: block; margin: 0;
padding: 10px 15px 10px; /* medzery medzi odkazmi */
}

#nav li a:hover, #nav li a:active {
color: #ffff00; /* farba odkazu pri ukázaní myšou */
margin: 0;
padding: 10px 15px 10px; /* medzery medzi odkazmi */
text-decoration: none; }

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;  /* farba pozadia podkategórií */
width: 150px;
color: #000000; /* farba textu podkategórií */
float: none; margin: 0;
padding: 7px 10px; /* okraje podkategórií */
}

#nav li li a:hover, #nav li li a:active {
background: #ffffff; /* farba pozadia podkategórií pri ukázaní myšou */
color: #ffff00; /* farba textu podkategórií pri ukázaní myšou */
padding: 7px 10px; }

#nav li {float: none; display: inline-block; list-style: none; margin: 0; padding: 0; border: 0px solid black; }
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;} 
Červené môžete zmeniť, modrou sú moje poznámky.Everything in red you can change, in blue are my notes.

04. Šablónu uložte a hotovo!04. Save the template and done!

Je to trochu náročnejší kód i postup; najmä pre začiatočníkov - preto ak si nebudete vedieť dať rady alebo budete potrebovať pomôcť, napíšte mi na
zakarovska.b@gmail.com
alebo cez akúkoľvek sociálnu sieť - kontakt je v menu.
It's a bit more difficult code and procest; especially for beginners - so if you won't know what to do or you will need some help, contact me on:
zakarovska.b@gmail.com
or via any social media - contact is in menu.

with all love,

4 komentáre

  1. Po kliknutí na Categories mám na blogu len takú jednoduchú improvizáciu, takže by sa patrilo spraviť niečo takéto. Neviem ale, kedy a či sa do toho pustím, lebo aj keď tu mám presne vysvetlený každý krok, v takýchto veciach si vôbec neverím. :)
    DominicaLand

    OdpovedaťOdstrániť
  2. To je skvělý návod! :) Rozbalovací menu se mi moc líbí, sama jsem ho také měla v plánu nějak vytvořit, ale nakonec jsem si s designem poradila jinak a jsem spokojená i tak :)

    Beauty News | Another Dominika

    OdpovedaťOdstrániť

Latest Instagrams

© A STYLISH BEE. Design by FCD.