Autor Zpráva
Jirka IOI
Profil
Zdravím pracuji na jedné stránce a potřeboval bych na ní umístit historii procházení menu tak, aby se zobrazovala. Našel jsem, že existují tzv. location breadcrums kde se zobrazuji jednotlivé kapitoly, ale už jsem nenašel jak to vytvořit, respektive se mi to absolutně nedaří. Proto jsem chtěl touto cestou požádat o radu.

Pro představu posílám část kódu, předem díky za jakoukoliv odpověď.


<!DOCTYPE html>
<html lang="cs">
<head>
    <meta http-equiv="Content-Type" content="text/html, charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="main.css" type="text/css" />

    <script src="funkce.js" type="application/javascript"></script>

    <title>XXXXXXXX</title>

</head>
<body>
    <header>
        <h1>XXXXXX<i></i></h1>
    </header>

<nav>

    <Breadcrumbs>

            tady nevím jak napsat :(  .............................................

    </Breadcrumbs>

</nav>

    <main>
        <nav class="menu">

      <div class="menu__item" id="uvod">
                <a href="#uvod" onclick="load_uvod()" class="item__name">Úvod</a>

      </div>

            <div class="menu__item" id="pojmy">
                <a href="#pojmy" class="item__name">Základní pojmy</a>
                <div class="item__sub-menu">
                    <a href="#"  onclick="load_antena()" class="sub-menu__item">Anténa</a>
                    <a href="#"  onclick="load_zisk()" class="sub-menu__item">Zisk</a>
                    <a href="#"  onclick="load_smerova()" class="sub-menu__item">Směrová charakteristika</a>
                    <a href="#"  onclick="load_cinitel()" class="sub-menu__item">Činitel směrovosti</a>
                    <a href="#"  onclick="load_impedance()" class="sub-menu__item">Impedance</a>
                                        <a href="#"  onclick="load_faktor()" class="sub-menu__item">Anténní faktor</a>
                                        <a href="#"  onclick="load_vlnovody()" class="sub-menu__item">Vlnovody</a>
                                        <a href="#"  onclick="load_napajece()" class="sub-menu__item">Napáječe</a>
                                        <a href="#"  onclick="load_vlny()" class="sub-menu__item">Vlny</a>
                    <a href="#"  onclick="load_polarizace()" class="sub-menu__item">Polarizace</a>
                    <a href="#"  onclick="load_psv()" class="sub-menu__item">Poměr stojatých vln</a>
                    <a href="#"  onclick="load_pasma()" class="sub-menu__item">Kmitočtová pásma</a>
                </div>
            </div>
lionel messi
Profil
Jirka IOI:

Pokiaľ ide o HTML, tak v rámci <nav> môžeš mať pokojne trebárs <ul> a položky navigácie ako <li>, všetko naštýluješ aj v CSS.
Jirka IOI
Profil
lionel messi:
to ano ale prostě mi uniká jak to napsat tak aby vše reagovalo a zobrazovala se jen aktuální cesta souborů s lokací kde se právě ve webové stránce nacházím :(


lionel messi:
www.youtube.com/watch?v=SmfWj9G88ew neco v tomto stylu ale jednoduche css nebo javascript jQuery absolutne nepobiram
Kajman
Profil
Musíte si nějak zadefinovat strom navigace. A podle toho to vyskládat. Buď si ji zadefinujete přímo jako objekt v javascriptu, nebo ho můžete vygenerovat dle html části menu, pokud bude u položek menu nějaký jedinečný identifikátor a pak to vyzobat při načtení stránky podle html zanoření. Lze to zapsat různě, např. si uděláte takovýto strom.
var strom = {
  'pojmy'  : { 'label':'Základní pojmy'},
  'antena' : { 'label':'Anténa', 'parent':'pojmy'},  
  'impedance' : { 'label':'Impedance', 'parent':'pojmy'},  
  'antenni_faktor' : { 'label':'Anténní faktor', 'parent':'impedance'}
}

(V současném html si nejsem jistý, jestli Anténní faktor má cestu
Home > Základní pojmy > Impedance > Anténní faktor - použito v příkladě
nebo jen
Home > Základní pojmy > Anténní faktor
)

Když pak změníte stránku nějakou load_.... funkcí, tak si přegenerujete obsah drobečkové navigace tak, že najdete ve stromě aktuální položku, vezmete odpovídající odkaz a onclick. A rekurzivně se podíváte na parent ve stromě a postupně to takto budete přidávat před to. S tím, že ta první hledaná položka (poslední v cestě) se většinou nedělá klikací.

drobky javascriptem - živá ukázka

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0