Kako da napravim padajući izbornik

Pozdrav ljudi,

radim si web stranicu, uzeo sam već gotovi predložak, ali imam nekih problema kod izmjena. Ima li netko ideju kako da na linku Cjenik na stranici Online Centar - O nama napravim padajući izbornik sa ta 4 linka?

Bio bih Vam jako zahvalan na pomoći!

<!DOCTYPE html>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<style>
			li {list-style:none}
			.sublink {display:none}
		</style>	
	</head>
<body>
	<nav>
		<ul>
			<li class="link"><a href="">Link</a></li>
			<li class="sublink"><a href="">Sublinks</a></li>
			<li class="sublink"><a href="">Sublinks</a></li>
			<li class="sublink"><a href="">Sublinks</a></li>
		</ul>
	</nav>
		<script>
			$(".link, .sublink").mouseover(function() {
				$(".sublink").css("display", "block");		
			});
			$(".link, .sublink").mouseout(function() {
				$(".sublink").css("display", "none");
			});
		</script>
</body>
</html>

Pozdrav. Cisti CSS dropdown na jednostavan nacin.

<ul>
  <li>Link</li>
  <li>Cjenik
    <ul>
        <li>Link</li>
        <li>Link</li>
    <ul>
  </li>
</ul>

to je struktrura, a sada preko CSS-a stavis da je:

ul li ul {
display: none;
}

ul li:hover ul {
display: block
… i ostalo ovdje
}

to je u bazi to i jednostavno, mozes i klase dodavat na prve

  • pa preko njih :hover state-a da se pokazuje drugi
      koji je sakriven. Ne zelim ti davati gotovo rjesenje nego sam upute kako da to rjesis jer ces tako najbolje nauciti.

      GL

  • To je i pogrešno. Ne bi trebao

      imati unutar
    • .
      W3C validator:
      Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

    [quote=“33diz”]To je i pogrešno. Ne bi trebao

    Istina, ali iz iskustva i razgovora s mnogim kolegama nema potrebe za brigom jer radi cross browser i do sada nisam imao problema. Cak i framework-ovi poput Bootstrap-a koriste istu sintaksu a jako su zastupnjeni i koristeni u webu pa ne vidim problem u koristenju.

    Zašto ne? To je posve dozvoljeno, radi u svim browserima, nema veze jel ti unutar

  • staviš

    ,

  • A zašto onda validator izbacuje grešku baš na taj dio :hmmmmmm:

    Ne znam koji ti validator kosristiš, ali ovo:

    <!doctype html>
    <html>
        <head>
            <title>Test</title>
            </head>
        <body>
            <ul>
                <li>prvi</li>
                <li>drugi<li>
                <li>
                    <ul>
                        <li>ja sam pod</li>
                        <li>i ja isto</li>
                    </ul>
                </li>
            </ul>
        </body>
    </html>
    

    sasvim lijepo prolazi validaciju, a i ovo:

    <!doctype html>
    <html>
        <head>
            <title>Test</title>
            </head>
        <body>
            <ul>
                <li>prvi</li>
                <li>drugi<li>
                <li>
                    <h1>Nova podlista</h1>
                    <ul>
                        <li>ja sam pod</li>
                        <li>i ja isto</li>
                    </ul>
                </li>
            </ul>
        </body>
    </html>
    

    isto tako

    Ne prolazi zato jer

    [quote=“33diz”]Ne prolazi zato jer

    Hvala Vam svima na pomoći, probat ću to sutra riješiti pa vam javim jesam li uspio.

    Imam problem… pokušao sam s ovime gore, ali mi sublinkove ne stavlja u padajući izbornik kad dođem na link, nego mi doda još te linkove sa strane kao da su zasebni a ne podlinkovi cjenika :frowning:
    Sorry, nisam stručnjak u ovome, samouk sam, pa štekam na puno mjesta…
    Bi li mi to netko od vas dragih ljudi to možda pokušao složiti da radi? :slight_smile:

    evo ti još jedan tutorail : Big Menus, Small Screens: Responsive, Multi-Level Navigation | Webdesigntuts+ :slight_smile:

    [quote=“OnlineCentar”]
    Bi li mi to netko od vas dragih ljudi to možda pokušao složiti da radi? :-)[/quote]
    Teško.
    Zapravo - besplatno - teško.

    Ovdje ćeš uvijek dobiti mišljenja i kritike, savjete, tutorijale pa i primjere.
    Ako si napravio nešto, a ne radi, netko će pogledati i uputiti te gdje je greška.
    To sve vrijedi ako želiš naučiti - pomoći će ti se.

    Ali da ti sve napravimo umjesto tebe, bez da platiš znanje i vrijeme, teško.

    A znam… ma ne tražim ja da mi to netko doslovno složi, neko s jako konkretnim uputama :-)))

    Što si napravio do sada ?

    Koliko se meni čini, ovako napamet, CSS za izbornik imaš, a za podizbornik nemaš, zato se čini da su ti linkovi sa strane, a ne podlinkovi cjenika.

    Evo ti primjer: Edit this Fiddle - jsFiddle

    Ovaj video tut sam odradio iz dosade a i testirao sam jedan program :slight_smile:

    Mozda ti pomogne Kako napraviti DropDown navigaciju/meni - YouTube

    [quote=“dev_masta”]Što si napravio do sada ?

    Koliko se meni čini, ovako napamet, CSS za izbornik imaš, a za podizbornik nemaš, zato se čini da su ti linkovi sa strane, a ne podlinkovi cjenika.[/quote]

    Pa pokušao sam ono gore što je ekipa napisala na početku… ali kao što rekoh, nisam baš najvještiji u tome, samouk :frowning:


    Copyright © 2022 WM Forum - AboutContact