HTML CSS Javascript photoshop pamokos

lietuviskos

top

Sekite mus Facebook'e

Sekite mus Facebook'e

Vartotojo meniu

Forumo naujausi

Google paieška

Loading

Meniu pvz nr 1 PDF Spausdinti
Autorius: Primatas   
Data: Antradienis, Balandžio 21, 2009

Kaip padaryti gražų meniu naudojantis tik CSS. Pavyzdys nr. 1

Tikslas

Norime padaryti tokį meniu:

meniu

paveiksliukus kūrė: marvel

Norime, kad vartotojui užėjus su pele ant meniu punkto, jis taptų "apšviestas".

Priemonės

Pirmiausia susikarpome meniu punktų paveiksliukus su kokia nors dizaino kūrimo programa, pvz.: Adobe Photoshop.

Turime pasidaryti tokio tipo paveikslėlius kiekvienam meniu punktui:

1_1 1_2

2_1 2_2

Kiekvienam punktui po du paveikslėlius.

Vienas, kai pelė nėra ant jo užėjusi.

Vienas, kurį rodysime, kai vartotojas užeis ant meniu punkto su pele.

Kodas

HTML viršus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>meniu</title>
<style type="text/css">

CSS stiliai:

div {
 background-repeat:no-repeat;
 background-position:top left;
}

.meniu {
 width:80px; height:103px;
 margin:0px; padding:0px;
 display:block;
 float:left;
}

div#pirmas {
 background-image:url('/2_1.png');
}

div#antras {
 background-image:url('/3_1.png');
}

div#trecias {
 background-image:url('/4_1.png');
}
/*/////////////////////////////////////*/
div#pirmas:hover {
 background-image:url('/2_2.png');
}

div#antras:hover {
 background-image:url('/3_2.png');
}

div#trecias:hover {
 background-image:url('/4_2.png');
}

HTML turinys ir apačia. 
</style>
</head>

<body>
<div id="kontikas">
 <a href="#"><div class="meniu" id="pirmas"></div></a>
 <a href="#"><div class="meniu" id="antras"></div></a>
 <a href="#"><div class="meniu" id="trecias"></div></a>
</div>
</body>
</html>

Pavyzdys redaktoriuje "Pabandyk pats"

žiūrėti

Komentarai
Paieška
unical   |2010-03-25 02:38:19
html turinys ir apacia:
div id="kontikas"
turetu buti:
div
id="meniu"
nes kaip tik dabar dariau pagal aprasyma
ir neveike, kol
nepakeiciau.
unical   |2010-03-25 02:37:20
html turinys ir apacia:

turetu buti:

nes kaip tik dabar dariau pagal aprasyma
ir neveike, kol nepakeiciau.
vilius   |2009-04-22 00:21:06
avatar Gera pamokele patiko
Tik registruoti vartotojai gali rašyti komentarus!

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."
 

bottom
top

Nuolaida serveriai.lt

hostingas su 20% nuolaida

Naujausi

Skaitomiausi

Nuolaida serveriai.lt

hostingas su 20% nuolaida

bottom

Dizainą sukūrė: Neshas ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- Privertė veikti: Primatas
parašyti administracijai
Manualai.lt 2008-2009