ugrás a tartalomhoz

Javascript menü képekkel

tashubanya · 2009. Nov. 6. (P), 01.21
Sziasztok!

Már kész is lennék az újra gyártott honlapommal, de bajban vagyok. Egy aljas módon lenyúlt js menüvel szerettem volna megoldani az eredeti oldalam flashelt menüjét lásd itt. De időközben rájöttem, hogy az én képeimet ez nem "kinyitja" és "összecsukja", hanem nyújtja :s Illetve sajnos a mozilla és az explorer örök harcának köszönhetően hol az egyik, hol a másik nem szereti...
Jelenleg itt tartok .
Mivel javascripthez nem igazán értek autodidakta lévén, ezért ha van esetleg javaslat, hogy honnan szerezhetnék be egy olyan menüt, ami nekem kell, vagy valaki megoldja nekem, hogy 2 sor átírásával(?) úgy működjön, ahogy szeretném, azt nagyon megköszönném!

Előre is!
‹ Div probléma javascript input üres-e? ›
 ■
1

Csak CSS

Joó Ádám · 2009. Nov. 6. (P), 09.26
Ehhez mit szólsz?: http://jooadam.hu/molnar-dora

Csak szemantikus HTML és CSS.

<ul id="navigation">
	<li><a href="rolam.html" id="about"><span>Rólam</span></a></li>
	<li><a href="galeria.html" id="gallery"><span>Galéria</span></a></li>
	<li><a href="fotokonyv.html" id="book"><span>Fotókönyv</span></a></li>
	<li><a href="kapcsolat.html" id="contact"><span>Kapcsolat</span></a></li>
</ul>


#navigation {
	margin: 0px;
	padding: 0px;
}

#navigation li {
	float: left;
	list-style-type: none;
}

#navigation li a {
	background-repeat: no-repeat;
	border-left: 10px solid black;
	display: block;
	height: 422px;
	width: 110px;
}

#navigation:hover li a {
	width: 50px;
}

#navigation li a:hover {
	width: 358px;
}

#navigation li a span {
	display: none;
}

#about a {
	background-image: url("images/about.jpg");
}

#gallery a {
	background-image: url("images/gallery.jpg");
}

#book a {
	background-image: url("images/book.jpg");
}

#contact a{
	background-image: url("images/contact.jpg");
}
Tudom, a képekből összecsukva nem az a szelet látszik, ami a flashes változatban; ez könnyen orvosolható, ha alapállapotban vízszintesen eltolod őket background-position-nel, kinyitáskor pedig ezt nullára állítod, a li elemeknek pedig beállítod a menüpontok feliratát egy átlátszó PNG-n fix háttérként (én azért nem toltam el őket, mert akkor kicsúszna a felirat, a képek forrása pedig nincs meg, hogy megcsináljam).

Ha pedig hiányolod a csúszás effektet, akkor írj hozzá JavaScriptet magad – szánj rá egy órát mondjuk a jQuery-re, azzal nem lesz nehéz.

És süthetsz nekem valami finomat, amiért közel 24 óra uptime után, munka helyett megoldottam neked :)
2

köszönet

tashubanya · 2009. Nov. 6. (P), 12.01
Szia!

Köszönöm szépen!!!!!!! Úgyis azt szerettem volna, ha az eredeti flash menü köszön vissza valahogy (L)
Hatalmas tábla kekszes Milka jó lesz?
Csak küldd el a címed és postázom :D
3

valami nem klappol

tashubanya · 2009. Nov. 6. (P), 22.13
Azt hiszem túl hamar ittam a medve bőrére, lehet, hogy ez is kifog rajtam :S
Most éppen ez a helyzet Ha azt másolom be az oldalba és a css-be, amit írtál, az sem látszik nálam :S
Magamat ismerve a hiba valószínűleg egy karakternyi :D
4

Az oldalról másold

Joó Ádám · 2009. Nov. 6. (P), 22.20
A HTML, amit bemásoltam, később változott, a CSS pedig már ahhoz tartozik. Az id-k most már a li elemekre kerültek. Használd a hivatkozott oldalról a kódot.
5

Megy a csoki

tashubanya · 2009. Nov. 6. (P), 22.50
Ezt egy év múlva sem vettem volna észre!
Köszönöm szépen újra, most már büszkén.
Iszok is egy sört a medve bőrére :D