Draganov blog - AXXT

CSS rollover meni

Postovao Dragan, kategorija: Programiranje, css , dana: 11-04-2007

CSS Menu - mali, brz, lak za uptrebu, dobar za SEO

Ovo je moja omiljena tehnika pravljenja CSS menija. I principu to je kombinacija par CSS tehnika (image replacement, css list menus..).
Pokazalo se kao sasvim ok tehnika, apsolutno isto se prikazuje u FF, IE i Operi i ima sasvim normalan HTML ispod haube, tako da ce Google i ostali pretrazivaci sasvim korektno indeksirati vas sadrzaj - a to je valjda najvaznije.

Primer

Uputstvo za upotrebu

1) Napraviti pozadinsku sliku

CSS Menu background
Paznja ovo je jedna slika, a ne dve.
Ako je vas meni 400px sa 50px (kao u ovom primeru) pozadinska slika treba da bude 400px by 100px. Gornja polovina je za normalno stanje, a donja za rollover.

2) HTML kod

<div id=“main-nav”>
	<ul>
		<li><a href=“#” class=“home”><span>Home</span></a></li>
		<li><a href=“#” class=“about”><span>About us</span></a></li>
		<li><a href=“#” class=“faq”><span>F.A.Q.</span></a></li>
		<li><a href=“#” class=“contact”><span>Contact</span></a></li>
	</ul>
</div>

3) Ubaciti CSS

Sve sto ostaje je ubaciti ovaj CSS, i to je to - uzivajte u vasem CSS meniju.

8 Responses to 'CSS rollover meni'

Subscribe to comments with RSS or TrackBack to 'CSS rollover meni'.

  1. Eniac said,

    on april 11th, 2007 at 13:54

    Hm, a koji je razlog koriscenja jedne slike a ne 8? Ne verujem da je neka velika razlika u tezini…

    Btw, ćapio sam feed :)

  2. Dragan said,

    on april 11th, 2007 at 14:02

    Nema razlike u tezini, ali je poenta u brzini :) . Ovako kad se ucita ova jedna slika - to je to. Ako koristis 8 mailh slicica prvo ti se ucitaju 4 komada za normalno stanje, pa tek kad predjes misem on povlaci one slicice za a:hover.
    E sad, mozes ti da uzmes i sa javascriptom da uradis precaching tih slika.. al to nije poenta.

  3. Dragan Babić said,

    on april 11th, 2007 at 14:05

    Takođe smanjenje http zahteva koji se šalju serveru. Samim tim se “ubrzava sajt” kako to laici vole da kažu. :)

  4. Eniac said,

    on april 11th, 2007 at 16:00

    Hvala hvala, svakoga dana u svakom pogledu sve vise i vise napredujem :)

  5. Eniac said,

    on april 11th, 2007 at 23:42

    http://us.i1.yimg.com/us.yimg.com/i/us/pim/pimstrip_01.gif

    izvalio sam ranije da yahoo isto to radi i bas se pitao zasto… u svakom slucaju evo gore primera kako to oni rade

  6. dusan said,

    on mart 24th, 2008 at 01:22

    ja ne mogu da skontam ovo… sta je ta pozadadinska slika? moze li mi neko malo pojasniti kako se ovo radi… :]

  7. dusan said,

    on mart 25th, 2008 at 20:51

    hoce li mi neko pojasniti ovo molim vas…

  8. Dragan said,

    on mart 25th, 2008 at 23:37

    Pa tesko je pojasniti, sve je prilichno dobro objasnjeno, a i ne vidim sta te buni?

    pozadinska slika znachi da se ta slika koristi kao pozadina tog elementa a sve to se setuje u CSS fajlu koji je prilozen.

    evo i same slike

    Ako ti ovo i dalje nije jasno, probaj da nadjes neku literaturu za CSS, probaj takodje da pogledas na dizajnzona.com i devprotalk.com tamo ima dosta primera i tema o CSS

Vas komentar