Pozdrav raja.
Odlucio sam da uradim jedan jednostavan tut.Radi o se primjeni slideToggle() jQuery funkcije.
Raditi cemo login bar kao na gamersu kada se logujete (kada kliknete na login button odredjeni dio "sklizne" te vam se otvori forma).
Evo kako to izgleda (nisam obratio posebnu paznju na dizajn):
Normal: http://prntscr.com/49x2dm
OnClick: http://prntscr.com/49x2pv
Kao sto sam rekao radimo sa jQuery JS Library, pa je potrebno isti includati u nas dokument, izmedju head tagova
Pored toga potrebno je kreirati i eksterni CSS fajl, te i njega includati.Ja sam ga nazvao stil.css
Kada smo uraditi pripremu, predjimo na samu bit.Izmedju body tagova treba nalijepiti ovo:
Zatim iza prije </body> treba zalijepiti jQuery dio:
I na kraju potrebno je sve to lijepo sloziti da lici na nesto, odnoso dodati CSS pravila:
Ako ima nekih nejasnoca oko strukture evo i SS iz Sublime Text editora:
index.html: http://prntscr.com/49x6nb
still.css: http://prntscr.com/49x73n , http://prntscr.com/49x7a3
Ako ima nesto da nije jasno slobodno pitajte
Odlucio sam da uradim jedan jednostavan tut.Radi o se primjeni slideToggle() jQuery funkcije.
Raditi cemo login bar kao na gamersu kada se logujete (kada kliknete na login button odredjeni dio "sklizne" te vam se otvori forma).
Evo kako to izgleda (nisam obratio posebnu paznju na dizajn):
Normal: http://prntscr.com/49x2dm
OnClick: http://prntscr.com/49x2pv
Kao sto sam rekao radimo sa jQuery JS Library, pa je potrebno isti includati u nas dokument, izmedju head tagova
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Pored toga potrebno je kreirati i eksterni CSS fajl, te i njega includati.Ja sam ga nazvao stil.css
<link rel="stylesheet" href="stil.css" />
Kada smo uraditi pripremu, predjimo na samu bit.Izmedju body tagova treba nalijepiti ovo:
<div id="border-top"></div><!--Linija od 7px na vrhu-->
<!--Pocetak polja gdje se nalazi forma, ovo polje je skriveno u css-u display:none-->
<div id="top-bar">
<div class="inner"><!-- inner klasa za centriranje diva-->
<input type="text" placeholder="Korisnicko ime" class="polje" />
<input type="password" placeholder="Vasa lozinka" class="polje" />
<input type="button" value="Prijava" class="button" />
</div>
</div><!--Kraj polja sa formom-->
<!--Dva buttona login i registracija-->
<div id="buttons">
<a href="#" id="login">Prijava</a>
<a href="#">Registracija</a>
</div><!--Kraj buttona-->
Zatim iza prije </body> treba zalijepiti jQuery dio:
<script>
$('#login') .click(function() {
$('#top-bar') .slideToggle();
});
</script>
I na kraju potrebno je sve to lijepo sloziti da lici na nesto, odnoso dodati CSS pravila:
.inner {
margin: 0 auto;
width: 960px;
}
#border-top {
background: #c0392b;
width: 100%;
height: 7px;
}
#top-bar {
width: 100%;
height: 50px;
background: #e74c3c;
display: none;
}
.polje {
width: 200px;
height: 30px;
margin-top: 10px;
padding-left: 5px;
border: 0;
background: #c0392b;
color: #fff;
font-style: italic;
}
.button {
background: #c0392b;
border: 1px solid #e74c3c;
height: 30px;
border-radius: 2px;
color: #fff;
padding: 0 4px 0 4px;
text-transform: uppercase;
font-size: 12px;
transition: all 0.4s ease-in-out;
}
.button:hover {
border: 1px solid #c0392b;
background: #e74c3c;
}
#buttons {
width: 300px;
float: right;
padding-top: 4px;
}
#buttons a {
background: #c0392b;
text-decoration: none;
color: #fff;
padding: 5px;
}Ako ima nekih nejasnoca oko strukture evo i SS iz Sublime Text editora:
index.html: http://prntscr.com/49x6nb
still.css: http://prntscr.com/49x73n , http://prntscr.com/49x7a3
Ako ima nesto da nije jasno slobodno pitajte
