{"id":6870,"date":"2026-08-01T13:19:04","date_gmt":"2026-08-01T11:19:04","guid":{"rendered":"https:\/\/branike.com\/prirucka\/menu-a-navigacia\/"},"modified":"2026-08-01T13:19:04","modified_gmt":"2026-08-01T11:19:04","slug":"menu-a-navigacia","status":"publish","type":"kb_article","link":"https:\/\/branike.com\/prirucka\/menu-a-navigacia\/","title":{"rendered":"Menu a navig\u00e1cia: mega panel, hamburger a rozcestn\u00edk"},"content":{"rendered":"<p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Menu je prv\u00e1 vec, ktor\u00fa n\u00e1v\u0161tevn\u00edk na webe h\u013ead\u00e1 \u2014 a prv\u00e1, ktor\u00e1 sa rozsype, ke\u010f m\u00e1te polo\u017eiek prive\u013ea. Tento \u010dl\u00e1nok prech\u00e1dza tri sp\u00f4soby, ako to vyrie\u0161i\u0165: <strong>mega panel<\/strong> pod polo\u017ekou menu, <strong>hamburger aj na po\u010d\u00edta\u010di<\/strong> a <strong>rozcestn\u00edk<\/strong>. Ka\u017ed\u00fd sa hod\u00ed inam a daj\u00fa sa kombinova\u0165.<\/p><h2 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:26px;font-weight:800;line-height:1.25;margin-top:32px;margin-bottom:10px\">Kedy menu prestane sta\u010di\u0165<\/h2><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Jednost\u013apcov\u00e9 rozba\u013eovacie menu m\u00e1 tvrd\u00fd strop: pri be\u017enom notebooku (1512 \u00d7 795) sa do\u0148 zmest\u00ed zhruba <strong>dvan\u00e1s\u0165 polo\u017eiek<\/strong>. Trin\u00e1sta a \u010fal\u0161ie s\u00fa pod okrajom obrazovky \u2014 a n\u00e1v\u0161tevn\u00edk na po\u010d\u00edta\u010di ich <em>neuvid\u00ed v\u00f4bec<\/em>, lebo rozba\u013eovacie menu sa neroluje. Nie je to teoretick\u00e1 hranica; presne toto sme namerali na vlastnom webe, ke\u010f ponuka nar\u00e1stla na 24 polo\u017eiek.<\/p><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">S\u00fa na to tri odpovede a nevylu\u010duj\u00fa sa:<\/p><ul class=\"wp-block-list\" style=\"color:#4B5563;line-height:1.7\"><li><strong>Mega panel<\/strong> \u2014 pod jednu polo\u017eku menu sa vlo\u017e\u00ed \u0161irok\u00fd panel, kde je miesto na st\u013apce, popisy a ikony.<\/li><li><strong>Hamburger aj na po\u010d\u00edta\u010di<\/strong> \u2014 menu sa cel\u00e9 schov\u00e1 za jedno tla\u010didlo. Hlavi\u010dka ostane pokojn\u00e1, ponuka sa otvor\u00ed a\u017e na vy\u017eiadanie.<\/li><li><strong>Rozcestn\u00edk<\/strong> \u2014 samostatn\u00e1 str\u00e1nka s preh\u013eadom. Unesie popisy, filtrovanie aj vyh\u013ead\u00e1vanie, \u010do menu neunesie nikdy.<\/li><\/ul><h2 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:26px;font-weight:800;line-height:1.25;margin-top:32px;margin-bottom:10px\">Mega panel \u2014 \u0161irok\u00e1 ponuka pod jednou polo\u017ekou<\/h2><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Mega panel je v <strong>Branike Blocks<\/strong> a funguje s klasick\u00fdm menom vo WordPresse, teda <strong>v dne\u0161nej t\u00e9me aj v Branike t\u00e9me<\/strong>. Podstatn\u00e9 je, \u017ee panel <strong>nie je nov\u00e1 vec, ktor\u00fa sa treba u\u010di\u0165<\/strong>: je to be\u017en\u00fd vzor, postaven\u00fd z blokov, ktor\u00e9 u\u017e pozn\u00e1te.<\/p><h3 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:19px;font-weight:700;line-height:1.35;margin-top:22px;margin-bottom:6px\">Ako na to \u2014 tri kroky<\/h3><ol class=\"wp-block-list\" style=\"color:#4B5563;line-height:1.7\"><li><strong>Vzory \u2192 prida\u0165 nov\u00fd.<\/strong> Postavte panel z be\u017en\u00fdch blokov: st\u013apce, ikonov\u00e9 boxy, v\u00fdpis, \u010do potrebujete. Ulo\u017ete.<\/li><li><strong>Vzh\u013ead \u2192 Menu<\/strong>, kliknite na polo\u017eku, pod ktorou m\u00e1 panel visie\u0165. Pribudla tam vo\u013eba <strong>Mega panel (Branike)<\/strong> \u2014 vyberte svoj vzor.<\/li><li><strong>\u0160\u00edrka panela:<\/strong> pod\u013ea obsahu, \u0161irok\u00fd (max. 1200 px), alebo cez cel\u00fa \u0161\u00edrku obrazovky. Ulo\u017ete menu. Hotovo.<\/li><\/ol><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Vo\u013eba sa pon\u00faka len pri polo\u017ek\u00e1ch <strong>najvy\u0161\u0161ej \u00farovne<\/strong>. Panel pod podpolo\u017ekou by nikto nena\u0161iel, tak\u017ee tam nie je.<\/p><h3 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:19px;font-weight:700;line-height:1.35;margin-top:22px;margin-bottom:6px\">Ako sa panel spr\u00e1va<\/h3><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Na po\u010d\u00edta\u010di sa otv\u00e1ra prejden\u00edm my\u0161ou s kr\u00e1tkym oneskoren\u00edm, aby sa neotv\u00e1ral pri ka\u017edom prejden\u00ed kurzora cez menu. Na dotykov\u00fdch zariadeniach a kl\u00e1vesnicou ho otv\u00e1ra tla\u010didlo ved\u013ea odkazu \u2014 <strong>samotn\u00fd odkaz ost\u00e1va odkazom<\/strong> a d\u00e1 sa na\u0148 norm\u00e1lne klikn\u00fa\u0165. <strong>Esc<\/strong> panel zatvor\u00ed a vr\u00e1ti fokus na tla\u010didlo, odchod tabul\u00e1torom mimo polo\u017eky ho zatvor\u00ed tie\u017e.<\/p><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">\ud83d\udfe2 Na mobile sa panel <strong>nezobrazuje ako \u0161irok\u00fd panel<\/strong>, ale ako be\u017en\u00e1 rozba\u013eovacia sekcia v hamburgeri. Vodorovn\u00fd panel na 390 px by ned\u00e1val zmysel.<\/p><h2 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:26px;font-weight:800;line-height:1.25;margin-top:32px;margin-bottom:10px\">Hamburger aj na po\u010d\u00edta\u010di<\/h2><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Toto nastavenie je v <strong>Branike t\u00e9me<\/strong> (Vzh\u013ead \u2192 Branike \u2192 Hlavi\u010dka). Hod\u00ed sa, ke\u010f chcete pokojn\u00fa, minimalistick\u00fa hlavi\u010dku \u2014 logo, p\u00e1r ikon a jedno tla\u010didlo \u2014 alebo ke\u010f je menu jednoducho dlh\u00e9.<\/p><h3 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:19px;font-weight:700;line-height:1.35;margin-top:22px;margin-bottom:6px\">Kedy zbali\u0165 menu do hamburgera<\/h3><ul class=\"wp-block-list\" style=\"color:#4B5563;line-height:1.7\"><li><strong>Automaticky<\/strong> (predvolen\u00e9) \u2014 hlavi\u010dka sa zbal\u00ed, a\u017e ke\u010f jej d\u00f4jde miesto. \u0160\u00edrku zlomu si viete nastavi\u0165, pr\u00edpadne ju t\u00e9ma odhadne z po\u010dtu polo\u017eiek.<\/li><li><strong>V\u017edy<\/strong> \u2014 hamburger pri ka\u017edej \u0161\u00edrke, aj na \u0161irokom monitore.<\/li><li><strong>Nikdy<\/strong> \u2014 nech\u00e1te to na WordPresse, ktor\u00fd zba\u013euje pri 600 px.<\/li><\/ul><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">\ud83d\udd34 Nastavenie <em>\u0161\u00edrky zlomu<\/em> plat\u00ed <strong>len v automatickom re\u017eime<\/strong>. V re\u017eime \u201ev\u017edy&#8220; je zbyto\u010dn\u00e9 \u2014 a pr\u00e1ve preto je to samostatn\u00e1 vo\u013eba a nie iba v\u00e4\u010d\u0161ie \u010d\u00edslo v poli \u0161\u00edrky.<\/p><h3 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:19px;font-weight:700;line-height:1.35;margin-top:22px;margin-bottom:6px\">Ako vyzer\u00e1 rozbalen\u00e9 menu<\/h3><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Na v\u00fdber s\u00fa dve podoby. <strong>Cel\u00e1 obrazovka<\/strong> je predvolen\u00e9 spr\u00e1vanie WordPressu \u2014 menu prekryje okno. <strong>Bo\u010dn\u00fd panel sprava<\/strong> sa vysunie a zaberie \u010das\u0165 \u0161\u00edrky, tak\u017ee str\u00e1nka za n\u00edm ostane vidie\u0165; jeho \u0161\u00edrku si nastav\u00edte v rozmedz\u00ed 280 a\u017e 640 px (predvolene 420).<\/p><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Panel nikdy nezaberie viac ne\u017e 92 % okna, tak\u017ee ani na malom notebooku neprekryje str\u00e1nku \u00faplne. Na telef\u00f3noch vyzeraj\u00fa obe podoby rovnako \u2014 \u00fazky panel by aj tak zabral cel\u00fa \u0161\u00edrku, tak sa pod 600 px nepou\u017e\u00edva.<\/p><h2 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:26px;font-weight:800;line-height:1.25;margin-top:32px;margin-bottom:10px\">Rozcestn\u00edk ako tretia cesta<\/h2><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">Ke\u010f m\u00e1te produktov alebo slu\u017eieb naozaj ve\u013ea, samostatn\u00e1 preh\u013eadov\u00e1 str\u00e1nka je \u010dasto lep\u0161ia ne\u017e ak\u00e9ko\u013evek menu. Unesie <strong>popis ku ka\u017edej polo\u017eke<\/strong>, rozdelenie do oblast\u00ed aj vyh\u013ead\u00e1vanie \u2014 a hlavne ju n\u00e1jde vyh\u013ead\u00e1va\u010d, \u010do o rozba\u013eovacom menu neplat\u00ed. Menu potom sta\u010d\u00ed kr\u00e1tke: \u0161tyri a\u017e p\u00e4\u0165 polo\u017eiek a jedna z nich vedie na rozcestn\u00edk.<\/p><p class=\"wp-block-branike-text\" style=\"color:#4B5563;line-height:1.7\">\ud83d\udfe2 S mega panelom sa to <strong>nebije<\/strong>. Naopak \u2014 panel b\u00fdva skr\u00e1tenou verziou rozcestn\u00edka a odkaz \u201ezobrazi\u0165 v\u0161etko&#8220; v jeho p\u00e4ti\u010dke vedie pr\u00e1ve na\u0148.<\/p><h2 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:26px;font-weight:800;line-height:1.25;margin-top:32px;margin-bottom:10px\">Pr\u00edstupnos\u0165 a r\u00fdchlos\u0165<\/h2><ul class=\"wp-block-list\" style=\"color:#4B5563;line-height:1.7\"><li>Panel aj hamburger sa ovl\u00e1daj\u00fa <strong>kl\u00e1vesnicou<\/strong>, maj\u00fa vidite\u013en\u00fd fokus a <strong>Esc<\/strong> ich zatvor\u00ed.<\/li><li>Tla\u010didlo, ktor\u00e9 panel otv\u00e1ra, je <strong>samostatn\u00e9<\/strong> ved\u013ea odkazu \u2014 nie je do odkazu vlo\u017een\u00e9. Tla\u010didlo vo vn\u00fatri odkazu je neplatn\u00e9 HTML a \u010d\u00edta\u010dky ho ohl\u00e1sia zle.<\/li><li>Obsah panela je v str\u00e1nke <strong>od za\u010diatku<\/strong>, ni\u010d sa nedo\u0165ahuje. Panel je mimo toku a skryt\u00fd, tak\u017ee <strong>nepos\u00fava obsah<\/strong> a nezhor\u0161\u00ed CLS.<\/li><li>Animuje sa iba pohyb a prieh\u013eadnos\u0165, nie rozmery \u2014 nesp\u00f4sobuje to prepo\u010d\u00edtavanie rozlo\u017eenia str\u00e1nky.<\/li><li>Kto m\u00e1 v syst\u00e9me zapnut\u00e9 obmedzenie pohybu, dostane prepnutie <strong>bez anim\u00e1cie<\/strong>.<\/li><\/ul><h2 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:26px;font-weight:800;line-height:1.25;margin-top:32px;margin-bottom:10px\">Na \u010do si da\u0165 pozor<\/h2><ul class=\"wp-block-list\" style=\"color:#4B5563;line-height:1.7\"><li><strong>Panel je vzor \u2014 a vzor sa d\u00e1 zmaza\u0165.<\/strong> Ak ho zma\u017eete, polo\u017eka menu ostane oby\u010dajn\u00fdm odkazom a v administr\u00e1cii pri nej uvid\u00edte upozornenie. Nie je to tich\u00e1 chyba, ale v\u0161\u00edmajte si ju.<\/li><li><strong>Ned\u00e1vajte do panela v\u0161etko.<\/strong> \u0160irok\u00fd panel pln\u00fd odkazov je rovnak\u00fd probl\u00e9m ako dlh\u00e9 menu, len nale\u017eato. Rozde\u013ete ho do oblast\u00ed a k polo\u017ek\u00e1m dajte jednu vetu.<\/li><li><strong>Obr\u00e1zky v paneli maj\u00fa ma\u0165 rozmery.<\/strong> Bez nich sa panel pri otvoren\u00ed \u201ezo\u0161klbne&#8220;.<\/li><li><strong>Skontrolujte kol\u00edziu v rohu.<\/strong> Ak m\u00e1te vpravo dole s\u00fahlasov\u00fa li\u0161tu alebo chat, bo\u010dn\u00fd panel a pl\u00e1vaj\u00face prvky si m\u00f4\u017eu prek\u00e1\u017ea\u0165.<\/li><li><strong>Re\u017eim \u201ev\u017edy&#8220; otestujte na \u0161irokom monitore.<\/strong> Hlavi\u010dka s jedn\u00fdm tla\u010didlom vyzer\u00e1 inak ne\u017e t\u00e1 s menu \u2014 je to z\u00e1mer, ale mali by ste to vidie\u0165 sk\u00f4r ne\u017e n\u00e1v\u0161tevn\u00edk.<\/li><li><strong>Polo\u017eka s panelom nech vedie na skuto\u010dn\u00fa str\u00e1nku.<\/strong> Kto klikne rovno na \u0148u (alebo nem\u00e1 JavaScript), mus\u00ed niekam pr\u00eds\u0165.<\/li><\/ul><h2 class=\"wp-block-branike-heading\" style=\"color:var(--wp--preset--color--contrast, #1F2937);font-size:26px;font-weight:800;line-height:1.25;margin-top:32px;margin-bottom:10px\">\u010ealej<\/h2><ul class=\"wp-block-list\" style=\"color:#4B5563;line-height:1.7\"><li><a href=\"\/prirucka\/sprievodca-blocks\/\">Kompletn\u00fd sprievodca: Branike Blocks<\/a><\/li><li><a href=\"\/prirucka\/dizajn-prehlad\/\">Dizajn: t\u00e9ma rob\u00ed r\u00e1m, bloky robia obsah<\/a><\/li><li><a href=\"\/prirucka\/ako-upravit-vzhlad\/\">Ako upravi\u0165 vzh\u013ead webu<\/a><\/li><li><a href=\"\/branike-blocks-prepracovane-bloky-pre-gutemberg\/\">Branike Blocks \u2014 \u010do plugin vie<\/a><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>Ke\u010f sa do menu prestane zmesti\u0165 ponuka: \u0161irok\u00fd mega panel pod polo\u017ekou, hamburger aj na po\u010d\u00edta\u010di s bo\u010dn\u00fdm panelom, alebo samostatn\u00fd rozcestn\u00edk. Kedy pou\u017ei\u0165 ktor\u00fd.<\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","meta":{"_bkb_access":"public","_bkb_min_tier":"basic","_bkb_teaser":"","_bkb_featured":false,"_bt_container":"","_bt_sidebar":"","_bt_show_title":"","footnotes":"","_bseo_title":"","_bseo_description":"","_bseo_noindex":"","_bseo_nofollow":"","_bseo_canonical":"","_bseo_og_title":"","_bseo_og_description":"","_bseo_og_image_id":0,"_bseo_og_image_url":"","_bseo_focus_keyword":""},"kb_category":[36],"kb_tag":[],"class_list":["post-6870","kb_article","type-kb_article","status-publish","hentry","kb_category-dizajn"],"_links":{"self":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article"}],"about":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/types\/kb_article"}],"author":[{"embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_article\/6870\/revisions"}],"wp:attachment":[{"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/media?parent=6870"}],"wp:term":[{"taxonomy":"kb_category","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_category?post=6870"},{"taxonomy":"kb_tag","embeddable":true,"href":"https:\/\/branike.com\/wp-json\/wp\/v2\/kb_tag?post=6870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}