Nedávno jsem řešil takový problém. Dělal jsem jednostránkový web. Takový jednostránkový web (anglicky se mu říká single page website) je web, na kterém jsou všechny informace na jediné stránce a když klikáte na jednotlivé odkazy v navigačním menu, tak se posouváte níže dolů po stránce. Udělat takový web je snadné. Prostě si nakódujete jedinou stránku, do ní vložíte obsah a na zvolené místo v horní části webu si umístíte menu. Z menu ovšem neodkazujete na další postránky webu, protože je web jednostránkový, nýbrž odkazujete na některé prvky v obsahu (typicky to může být třeba nadpis nebo div). Říká se tomu kotvy nebo také anchor odkazy a lze to realizovat i ve většině wysiwyg editorů. Důležité je, aby se shodoval název kotvy s id prvku na který odkazujete. Před název kotvy do menu vložíte křížek #nazev-odkazu. Do tagu nadpisu vložíte id=“nazev odkazu“
Menu může vypadat třeba takto:
A obsah stránky bude vypadat třeba takhle:
………. obsah sekce ……….
………. obsah sekce ……….
………. obsah sekce ……….
………. obsah sekce ……….
Jediný problém se objeví, když potřeba, aby se vám v navigaci barveně podbarvil odkaz kategorie, ve které právě jste. Jde to ale vyřešit jednoduše pomocí JavaScriptu.
Stačí, když si vložíte mezi tagy head a /head níže uvedený JavaScript.
A teď už stačí jenom právě navštívenému odkazu nějakou vlastnost v CSS. V uvedeném scriptu je použití třída .active
A je to! Aktivní odkaz právě navštívené stránky bude červený. JavaScript jsem převzal ze skvělého webu http://jsfiddle.net Najdete tam podrobnější popis problematiky.