[CSS] Vertikalni Meni

Ako želite da napravite neki jednostavan vertikalni Meni sa linkovima, slikama ili običnim tekstom, možete to uraditi sa običnim HTML kodom i malo CSS-om.

HTML će nam poslužiti da napravimo “spisak” pomoću <li> a CSS će sve to “našminkati” i postaviti Meni na željeno mesto.

Predlažem vam da za početak preuzmete Notepad++ gde ćete pisati Kodove. Možete ga preuzeti sa sledećeg linka http://notepad-plus-plus.org/download/v6.1.4.html

Gotov Kod možete preuzeti sa OVOG linka.

<style type=”text/css”>
.test{
position:fixed; /*Meni ce ostati na mestu i kada scroll-ujete stranicu*/
width:36px; /*sirina*/
height:300px; /*duzina*/
bottom:0px; 
right:0px; /*bice zalepljen na vrhu ekrana*/
top:0px; /*bice zalepljen za desnu ivicu ekrana*/
}
.test ul {
margin-top:100px; /*odstojanje od vrha ekrana*/
padding:2; 
}

.test li {list-style: none;} /*izbacuje crne tackice pored teksta*/
</style>

<div class=’test’>
<ul>
<li>Tekst1</li>
<li>Tekst2</li>
<li>Tekst3</li>
<li>Tekst4</li>
</ul>
</div>

Umesto <li>Tekst</li> možete staviti i tekst i sliku i link.

Sačuvajte kao ime.html i otvorite. Ako vam se ne svidja kako izgleda, možete menjati poziciju, veličinu itd. u CSS delu. Više o CSS-u na OVOM linku.

Kako ovo sve izgleda, možete videti sa desne strane bloga. Samo sam ja ubacio slike umesto teksta i linkovao sam ih.

Komentariši

[CSS] Vertikalni Meni

Autor: Stefan Marjanov Potrebno vreme za čitanje: 1 min