Bootstrap navbar

In this example below you will see how to do a Bootstrap navbar with some HTML / CSS and Javascript

Prototyping accessible navigation.

Thumbnail
This awesome code was written by chilpura, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chilpura ©
  • HTML
  • CSS
  • JavaScript
    <nav class="navbar navbar-custom navbar-static-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Koti</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lukio <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="https://opintopolku.fi/wp/fi/lukio-2/opinnot-lukiossa/" >Opinnot lukiossa</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/lukio-2/nain-haet-ammatillisen-koulutuksen-ja-lukiokoulutuksen-yhteishaussa/" >Näin haet yhteishaussa</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/lukio-2/lukiokoulutuksen-valintaperusteet/" >Miten opiskelijat valitaan lukioon?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/lukio-2/ylioppilastutkinto/" >Ylioppilastutkinto</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/lukio-2/erityislukiot-2/" >Erityislukiot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/lukio-2/kansainvalinen-lukiokoulutus/" >Kansainvälinen lukiokoulutus</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/lukio-2/opiskelu-etalukiossa/" >Etälukio</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/lukio-2/vaihto-oppilaaksi/" >Vaihto-oppilaaksi</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ammatillinen koulutus <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/erityista-tukea-ammatillisen-perustutkinnon-suorittamiseen/" >Erityisen tuen tarve</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/mita-ammatillisessa-voi-opiskella/" >Mitä ammatillisessa voi opiskella?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/ammatillinen-perustutkinto-antaa-laajan-ammattitaidon/" >Ammatillinen perustutkinto</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/ammatillinen-perustutkinto-mista-opinnot-koostuvat/" >Mistä opinnot koostuvat?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/useampi-tutkinto-samanaikaisesti/" >Kaksoistutkinto</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/mika-on-ammattistartti/" >Mikä on Ammattistartti?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/talouskoulusta-evaita-arjen-hyvinvointiin/" >Talouskoulu</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/nain-haet-ammatillisen-ja-lukiokoulutuksen-yhteishaussa/" >Näin haet yhteishaussa</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/miten-opiskelijat-valitaan-yhteishaussa/" >Valintaperusteet</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammatillinen-koulutus/hakijan-terveystila/" >Hakijan terveystila</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ammattikorkeakoulu <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/ammattikorkeakouluopintojen-rakenne/" >Ammattikorkeakouluopintojen rakenne</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/mita-amkssa-voi-opiskella/" >Mitä AMK:ssa voi opiskella?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/nuorten-amk-tutkinnot/" >Nuorten AMK-tutkinnot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/nuorten-vieraskieliset-amk-tutkinnot/" >Nuorten vieraskieliset AMK-tutkinnot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/aikuisten-amk-tutkinnot/" >Aikuisten AMK-tutkinnot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/ylemmat-amk-tutkinnot/" >Ylemmät AMK-tutkinnot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/taydennyshaku/" >Täydennyshaku</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/ammattikorkeakoulujen-hakutoimistot-ja-hakijapalvelut/" >Ammattikorkeakoulujen hakijapalvelut</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/ammatilliset-opettajakorkeakoulut/" >Ammatilliset opettajakorkeakoulut</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/avoin-ammattikorkeakoulu/" >Avoin ammattikorkeakoulu</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/ammattikorkeakoulu/ammattikorkeakoulujen-taydennyskoulutus/" >Ammattikorkeakoulujen täydennyskoulutus</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Yliopisto <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/yliopistotutkintojen-rakenne/" >Yliopistotutkintojen rakenne</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/mita-yliopistossa-voi-opiskella/" >Mitä yliopistossa voi opiskella?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/kuka-voi-hakea/" >Kuka voi hakea?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/nain-haet/" >Näin haet</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/yliopistohaun-tarkeat-paivamaarat/" >Yliopistohaun tärkeät päivämäärät</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/yliopistojen-maisteriohjelmat/" >Yliopistojen maisteriohjelmat</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/erillisarvosanan-on-mahdollisuus-tasmatiedon-hankkimiseksi/" >Erillisarvosanan suorittaminen</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/jatkotutkinnot/" >Jatkotutkinnot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/yliopistojen-hakijapalvelut/" >Yliopistojen hakijapalvelut</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/avoin-yliopisto/" >Avoin yliopisto</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/yliopisto/yliopistojen-taydennyskoulutus/" >Yliopistojen täydennyskoulutus</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Aikuiskoulutus <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/mietitko-aikuiskoulutusta/" >Mietitkö aikuiskoulutusta?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/aikuisten-perusopetus-ja-lukio/" >Aikuisten perusopetus ja lukio</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/aikuisten-ammatillinen-koulutus/" >Aikuisten ammatillinen koulutus</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/kansanopistot/" >Kansanopistot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/aikuisten-korkeakouluopinnot/" >Aikuisten korkeakouluopinnot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/opettajan-pedagogiset-opinnot/" >Opettajan koulutus</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/kansalais-ja-tyovaenopistot/" >Kansalais- ja työväenopistot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/kesayliopistot/" >Kesäyliopistot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/opintokeskukset-ja-opintokerhot/" >Opintokeskukset ja opintokerhot</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/kielitutkinnot-ja-kielikokeet/" >Kielitutkinnot ja kielikokeet</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/tyovoimakoulutus-opiskele-itsesi-takaisin-tyomarkkinoille/" >Työvoimakoulutus</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/aikuiskoulutus/aikuiskoulutusta-jarjestavat-oppilaitokset/" >Aikuiskoulutusta järjestävät oppilaitokset</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Koulutuksen valinta <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/ammatinvalinta-mista-aloittaa/" >Ammatinvalinta &#8211; mistä aloittaa?</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/ohjaus-ja-neuvontapalvelut/" >Ohjaus- ja neuvontapalvelut</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/miten-haen/" >Yhteishaku</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/peruskoulun-jalkeen-muita-vaihtoehtoja/" >Peruskoulun jälkeen &#8211; muita vaihtoehtoja</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/opintojen-rahoitus/" >Opintojen rahoitus</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/opintososiaaliset-edut-ja-opiskelijamaksut/" >Opiskelijamaksut</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/maahanmuuttajien-koulutus/" >Maahanmuuttajien koulutus</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/ulkomailla-opiskelu/" >Ulkomailla opiskelu</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/jos-sinulla-on-jo-tutkinto/" >Jos sinulla on jo tutkinto</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/esteettomyys-ja-oppimisen-tuki-oppilaitoksissa/" >Esteettömyys ja oppimisen tuki</a></li>
          <li><a href="https://opintopolku.fi/wp/fi/valintojen-tuki/usein-kysyttya/" >Usein kysyttyä</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Hae koulutukseen <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Linkki</a></li>
          <li><a href="#">Linkki</a></li>
          <li><a href="#">Linkki</a></li>
          <li><a href="#">Linkki</a></li>
          <li><a href="#">Linkki</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Tekstiversio</a></li>
      </div><!-- /.navbar-collapse -->
</nav>

/*Downloaded from https://www.codeseek.co/chilpura/bootstrap-navbar-bnkjw */
    /*//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
/* Tähän tulisivat lisäksi oikeat tyylit */



/*Downloaded from https://www.codeseek.co/chilpura/bootstrap-navbar-bnkjw */
    // dependency //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js 

Comments