Kako da napravim padajući izbornik

Web dizajn i grafika
1

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!

2 
<!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>
3

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

    • 4

    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.)
    5

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

    6

    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.

    7

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

  • staviš

    ,

    • 8

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

    9

    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

    10

    Ne prolazi zato jer

    11

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

    12

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

    13

    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:

    14

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

    15

    [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.

    16

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

    17

    Š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.

    18

    Evo ti primjer: Edit this Fiddle - jsFiddle

    19

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

    Mozda ti pomogne Kako napraviti DropDown navigaciju/meni - YouTube

    20

    [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: