Kako napraviti horizontalni HTML izbornik?

Dobra web stranica mora imati prikladan navigacijski sustav. Izbornik je jedna od opcija za odabir željene akcije. Ne toliko orijentacija stavki izbornika u prostoru, koliko ih je lako koristiti. Dobar dizajn logike upravljanja i njegov kontinuitet kroz sve elemente dijaloga čini mjesto kompaktnim i udobnim dobavljačem potrebne funkcionalnosti.

Izbornik: uobičajeno i ugodno

Kako navigirati web-resursom - teorijsko pitanje. Kako napraviti izbornik za stranicu? HTML u horizontalnom ili vertikalnom? Kako upravljati ponašanjem posjetitelja na svakoj stranici i dati mu pravi izgled?
Uobičajen i udoban izbornik - relevantan je i tražen. Posjetitelj nije zainteresiran za teoriju. Posjetitelju je potrebno njegovo rješenje za stvarne probleme. Tipično, HTML dokument i horizontalni izbornik nalaze se na prvoj stranici web-lokacije i ciljaju posjetitelja na sustavno prikazivanje usluga, proizvoda ili dijelova web-lokacije, vlasnika, vijesti, kontakata.


Orijentacija u prostoru - nije glavna, već uobičajenija, horizontalna sistematizacija predloženog funkcionalnog. Čitanje s lijeva na desno i odozgo prema dolje općenito je prihvaćeno ne samo na stranicama ruskog jezika.

Definitivno točne stranice i njihovi izbornici

Slika prikazuje jedinstveno ispravne stranice. Njihovi izbornici mogu se smatrati modelima dizajna, logike i funkcionalnosti. Međutim, mišljenje lidera nije tako čvrsto, ponekad postoje iznimke. Stranice se mogu vidjeti kao primjer:
  • međunarodnu razmjenu Forexa;
  • Svjetska zdravstvena organizacija;
  • financijskog sustava Rusije;
  • poduzeće za naftu i plin.
  • Ali količina novca ili društveni značaj nije kriterij kvalitete web razvoja. Svaki izbornik je rad pojedinog programera i mišljenje tima programera popularnog sustava za upravljanje web stranicama (CMS) koji se koristi u razvoju web-resursa. Predlošci najboljih CMS-a nikada ne voze pravi život. Primjena Internet tehnologija uvijek određuje u svakom slučaju nužnost izvođenja teorijskog i praktičnog rada na stvaranju udobnog izbornika.


    Klasični višenamjenski primjer

    Kao što možete vidjeti na slici ispod broja 1, ovdje se nalaze četiri različita izbornika. Početna stranica: Prvo, film, zatim HTML dokument. Horizontalno sve, ali svaki se izbornik izvršava s različitim omjerima HTML oznaka, opterećenja na korištenje CSS-a i javascripta. Glavni izbornik (1.1) odnosi se na posjetitelja (privatnu ili pravnu osobu, financijsku instituciju ili investitor). Donja (1.4) ovisi o svima ostalima, a ovdje ne prevladava HTML i JavaScript AJAX, koji dinamički oblikuju željenu opciju HTML oznake. Srednji izbornici sadrže funkcionalnost tvrtke, ovisno o posjetitelju, mišljenje vlasnika i njegove interese.

    Jednostavna dinamička navigacija

    Primjer iz Googlea (na slici 2) je klasična jednostavnost izbornika za prebacivanje. Na početku pretraživanja jedno je, u procesu traženja, potpuno je drugačije. Nema horizontalnog padajućeg izbornika HTML, CSS ima minimalnu ulogu. Ovdje je važnotočka prebacivanja opcija za konačni uzorak i izbornik je konfiguriran za ovaj zadatak.
    Googleov konkurent, Yandex (slika 3) gradi svoj izbornik odmah. Štoviše, stranica za pretraživanje je odmah popunjena dodatnom funkcionalnošću i nudi posjetitelju ne samo funkciju pretraživanja. Yandex odmah nudi:
  • pretraživanje;
  • novac;
  • mail i drugi.
  • Sve funkcije u čistom HTML-u. Horizontalni izbornici za svaku funkcionalnost. Karakteristična značajka Googlea i Yandexa su postavke koje se izvršavaju automatski, ali ih posjetitelj može promijeniti pomoću horizontalno orijentiranih značajki.

    Stvarna statička i opća praksa

    Najnoviji primjer (pod brojem 4) - za programere na Office XML platformi. Dokumenti formata "*. * X" su popularni, popularni, a web-lokacija koja nudi standardni opis koristi čisti HTML. Horizontalni izbornik sadrži linkove na glavne odjeljke:
  • docx;
  • xlsx;
  • pptx.
  • Na Internetu postoje mnoge druge manje popularne stranice. Uvijek možete pronaći pouzdanu modernu želju za maksimalnom jednostavnošću i funkcionalnošću. Prošlo je vrijeme kada je programer i dizajner trošili vrijeme na prekrasne padajuće gumbe, animacije i druge efekte.
    Današnji prekrasni horizontalni izbornik: HTML, CSS i javascript - ova jednostavnost, udobnost i funkcionalnost za posjetitelja.

    Izbornik: slijeva nadesno i od vrha do dna ili

    Različite zemlje čitaju drugačije. Mogućnost premještanja s lijeva na desno i odozgo prema dolje je knjiga, članak, slogan ili reklamna knjižica, ali ne i stranica. Mudro je usredotočiti se na takvu organizaciju dijaloga, aliriječ je o web prezentaciji informacija koja definira logiku dijaloga s posjetiteljem.
    Tradicionalni HTML dokument: horizontalni izbornik s padajućim pod-točkama za svaku stavku. Ne samo popis referenci (stavki), nego i liste popisa. Kada stranica pruža desetke usluga (roba), te u svakoj poziciji može biti više od desetak linija, to postaje problem i izbornika i njegovih pod-stavki. Obično je problem velikog broja stavki i pod-stavki izbornika određen pomicanjem. Međutim, svako područje primjene uključuje sistematizaciju informacija. Nesporno je da postoji takav problem u web programiranju koji ne bi dopustio ograničenje od tri do četiri do sedam - devet točaka. Taj se iznos nalazi na HTML stranici, horizontalni izbornik je kompaktan i prikladan. Ako kombiniramo ideju sistematizacije informacija i pomicanja kroz hijerarhiju kategorija, možemo ostvariti veliku ideju kretanja ne po stavkama izbornika, već po kategorijama informacijskog sustava koje kreiramo.
    Zapravo, mjesto je sustavno prikazivanje informacija, a struktura ovog prikaza je kategorija, tj. Izbornik.

    Organizacija izbornika: popisi, tablice i djevice

    HTML u horizontalnom izborniku ne dodjeljuje nikakvu posebnu sintaksu. Možete koristiti uobičajene divove (div, span), tablice (tablice, tr, td) i popise (ul, li). Potonji se smatra najtočnijim, ali često postoje konstrukcije u kojima je sve pomiješano: jedna stavka izbornika može biti stol, u svakoj ćeliji postoji nekoliko djevica i popis za opisivanje jedinica.

    Sintaksa HTML /CSS-a pri stvaranju stavke izbornika, ako se temelji na nekoliko čuda (to jest, slika dizajna), postaje teška. Ne možete koristiti vektor izbornika ili njegovu stavku: ne postoji veza između sadržaja izbornika i logike vektora (istezanje, kompresija ili druga proporcionalna promjena veličine). Ostaje da se koristi raster, a ovo je nekoliko HTML-ova. Horizontalni izbornik (glavni), kao i:
  • za pametni telefon - njegov;
  • uvećan - za veliki zaslon;
  • kontrast - kada je monitor već star;
  • za slabovidne i druge opcije. Ovo objašnjenje je u suštini da nije toliko važno orijentirati se u prostoru HTML konstrukata koristeći CSS pravila, kao izraz značenja stavke izbornika kroz funkcionalnost javascripta. Ideja: sadržaj izbornika i njegovih stavki određuje kako napraviti horizontalni izbornik u HTML-u, a ne kruti dizajn optimalne kombinacije ul, li, div, tablica, itd. Uvijek važan sadržaj, a ne kruti dizajn. Smisao se uvijek može delegirati s poslužitelja putem AJAX preglednika, gdje će ga javascript funkcija rasporediti u željenu HTML oznaku i dodati joj CSS, što će odrediti lokaciju, veličinu i boju izbornika (stavku izbornika).

    Virtualni horizontalni izbornik (HTML, CSS, JS)

    Google je neosporan vođa u pretraživanju i ne samo. Ideja o dinamičnoj promjeni izbornika došla je davno, ali implementacija Googlea - najjednostavnija u jasnoj interpretaciji. Ovdje nema solidnog CSS-a, javascript nije izražen, ali je pretraživanje kroz klasični "chat" posljedica ne samo lovora vođe, već i stvarnog izvršenja.
    Idite na horizontalni izbornikHTML oznake iz jednog smisla u sadržaj, potaknute rezultatima pretraživanja - dobro je rješenje. Najvjerojatnije su Googleovi programeri značili sasvim različite stvari, ali je prosječni posjetitelj bio naviknut na njegovo razumijevanje logike pretraživanja, koncept udobnosti i upravljanje tražilicama. Navika je bila uobičajena, a daleko od prve generacije tražitelja informacija koristi je. Obrazovanje navika posjetitelja je radno intenzivan proces, ali kada je to uspjelo, oni to koriste i ne nude radikalno nove doktrine. Nije moguće prekršiti pravila i stvoriti vještine.
    ​​Ako programer HTML /CSS /JS promijeni tehniku ​​stvaranja horizontalnog izbornika na logici smislenog izbornika, obogaćen elementima stvarnosti, njegova web stranica može primiti drugu publiku posjetitelja i potpuno različit rang među sličnim.
  • Povezane publikacije