Big navigation - 180+ channels

View Demo

Source


<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>180+ discussion channels</title>

  <!-- optimize for mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- force latest IE rendering engine -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- muut styling -->
  <link rel="stylesheet" href="https://cdn.muut.com/1/moot.css">

  <!-- demo specific CSS -->
  <style>
  body {
    font-family: "myriad pro", tahoma, verdana, arial, sans-serif;
    font-size: 18px; margin: 0; padding: 0;
  }

  /* Custom style for subchannels */
  .genres { display: none; margin: 0 0 .6em .6em; }
  .genres.is-active { display: block; }
  .genres p { margin-left: .6em;  }
  .m-forums-wrap { margin-top: 0; }
  .m-custom h3  { margin: 0 .3em 0 0; }
  .m-custom p   { line-height: 1; }
  .m-custom h3 a { color: #333; }

  /* Retroelectro Ad */
  #ad { margin: 1em 0 0 .5em; }
  </style>

</head>

<body>
  <div id="content">
    <div class="muut m-app-loading">

      <a class="muut-url" href="https://muut.com/i/electronic-music">
        Electronic music genres, the forum
      </a>

      <!-- 181 different channels -->

      <h3><a href="#!/ambient">Ambient</a></h3>

      <div class="genres">
        <a href="#!/ambient/ambient-dub">Ambient dub</a>
        <a href="#!/ambient/ambient-industrial">Ambient industrial</a>
        <a href="#!/ambient/ambient-house">Ambient house</a>
        <a href="#!/ambient/dark-ambient">Dark ambient</a>
        <a href="#!/ambient/drone-music">Drone music</a>
        <a href="#!/ambient/illbient">Illbient</a>
        <a href="#!/ambient/isolationism">Isolationism</a>
      </div>

      <h3><a href="#!/breakbeat">Breakbeat</a></h3>

      <div class="genres">
        <a href="#!/breakbeat/acid-breaks">Acid breaks</a>
        <a href="#!/breakbeat/baltimore-club">Baltimore Club</a>
        <a href="#!/breakbeat/big-beat">Big beat</a>
        <a href="#!/breakbeat/broken-beat">Broken beat</a>
        <a href="#!/breakbeat/nu skool-breaks">Nu skool breaks</a>
        <a href="#!/breakbeat/florida-breaks">Florida breaks</a>
        <a href="#!/breakbeat/nu-funk">Nu-funk</a>
      </div>

      <h3><a href="#!/disco">Disco</a></h3>

      <div class="genres">
        <a href="#!/disco/cosmic-disco">Cosmic disco</a>
        <a href="#!/disco/disco-polo">Disco polo</a>
        <a href="#!/disco/euro-disco">Euro disco</a>
        <a href="#!/disco/italo-disco">Italo disco</a>
        <a href="#!/disco/nu-disco">Nu-disco</a>
        <a href="#!/disco/space-disco">Space disco</a>
      </div>

      <h3><a href="#!/downtempo">Downtempo</a></h3>

      <div class="genres">
        <a href="#!/downtempo/acid-jazz">Acid jazz</a>
        <a href="#!/downtempo/chill-out">Chill out</a>
        <a href="#!/downtempo/ethnic-electronica">Ethnic electronica</a>
        <a href="#!/downtempo/new-age-music">New age music</a>
        <a href="#!/downtempo/nu-jazz">Nu jazz</a>
        <a href="#!/downtempo/trip-hop">Trip hop</a>
      </div>

      <h3><a href="#!/dnb">Drum and bass</a></h3>

      <div class="genres">
        <a href="#!/dnb/darkstep">Darkstep</a>
        <a href="#!/dnb/drill-and-bass">Drill and bass</a>
        <a href="#!/dnb/drumfunk">Drumfunk</a>
        <a href="#!/dnb/drumstep">Drumstep</a>
        <a href="#!/dnb/hardstep">Hardstep</a>
        <a href="#!/dnb/jazzstep">Jazzstep</a>
        <a href="#!/dnb/jump-up">Jump-Up</a>
        <a href="#!/dnb/liquid-funk">Liquid funk</a>
        <a href="#!/dnb/neurofunk">Neurofunk</a>
        <a href="#!/dnb/sambass">Sambass</a>
        <a href="#!/dnb/techstep">Techstep</a>
      </div>

      <h3><a href="#!/dub">Dub</a></h3>

      <div class="genres">
        <a href="#!/dub/afro-dub">Afro-dub</a>
        <a href="#!/dub/dubstep">Dubstep</a>
        <a href="#!/dub/brostep">Brostep</a>
        <a href="#!/dub/funkstep">Funkstep</a>
        <a href="#!/dub/post-dubstep">Post dubstep</a>
        <a href="#!/dub/trap-music">Trap music</a>
        <a href="#!/dub/wonky">Wonky</a>
        <a href="#!/dub/dubtronica">Dubtronica</a>
        <a href="#!/dub/freestyle-music">Freestyle music</a>
      </div>

      <h3><a href="#!/electronica">Electronica</a></h3>

      <div class="genres">
        <a href="#!/electronica/berlin-school">Berlin school</a>
        <a href="#!/electronica/chillwave">Chillwave</a>
        <a href="#!/electronica/folktronica">Folktronica</a>
        <a href="#!/electronica/funktronica">Funktronica</a>
        <a href="#!/electronica/laptronica">Laptronica</a>
        <a href="#!/electronica/livetronica">Livetronica</a>
      </div>

      <h3><a href="#!/electronic-rock">Electronic rock</a></h3>

      <div class="genres">
        <a href="#!/electoric-rock/alternative-dance">Alternative dance</a>
        <a href="#!/electoric-rock/coldwave">Coldwave</a>
        <a href="#!/electoric-rock/dance-punk">Dance punk</a>
        <a href="#!/electoric-rock/dark-wave">Dark Wave</a>
        <a href="#!/electoric-rock/electronicore">Electronicore</a>
        <a href="#!/electoric-rock/ethereal-wave">Ethereal Wave</a>
        <a href="#!/electoric-rock/indietronica">Indietronica</a>
        <a href="#!/electoric-rock/krautrock">Krautrock</a>
        <a href="#!/electoric-rock/new-rave">New rave</a>
        <a href="#!/electoric-rock/nu-gaze">Nu gaze</a>
        <a href="#!/electoric-rock/space-rock">Space rock</a>
        <a href="#!/electoric-rock/synthpop">Synthpop</a>
        <a href="#!/electoric-rock/synthpunk">Synthpunk</a>
      </div>

      <h3><a href="#!/hardcore">Hardcore</a></h3>

      <div class="genres">
        <a href="#!/hardcore/4-beat">4-beat</a>
        <a href="#!/hardcore/breakbeat-hardcore">Breakbeat hardcore</a>
        <a href="#!/hardcore/bouncy-techno">Bouncy techno</a>
        <a href="#!/hardcore/breakcore">Breakcore</a>
        <a href="#!/hardcore/digital-hardcore">Digital hardcore</a>
        <a href="#!/hardcore/hardcore-techno">Hardcore_techno</a>
        <a href="#!/hardcore/freeform-hardcore">Freeform Hardcore</a>
        <a href="#!/hardcore/gabber-music">Gabber music</a>
        <a href="#!/hardcore/happy-hardcore">Happy hardcore</a>
        <a href="#!/hardcore/hardcore-breaks">Hardcore breaks</a>
        <a href="#!/hardcore/makina">Makina</a>
        <a href="#!/hardcore/rave">Rave</a>
        <a href="#!/hardcore/speedcore">Speedcore</a>
        <a href="#!/hardcore/terrorcore">Terrorcore</a>
        <a href="#!/hardcore/trancecore">Trancecore</a>
        <a href="#!/hardcore/uk-hardcore">UK Hardcore</a>
        <a href="#!/hardcore/uk-complexcore">UK Complexcore</a>
      </div>

      <h3><a href="#!/hard-dance">Hard Dance</a></h3>

      <div class="genres">
        <a href="#!/hard-dance/hard-house">Hard house</a>
        <a href="#!/hard-dance/hard-nrg">Hard NRG</a>
        <a href="#!/hard-dance/nu-nrg">Nu NRG</a>
        <a href="#!/hard-dance/hardstyle">Hardstyle</a>
        <a href="#!/hard-dance/dubstyle">Dubstyle</a>
        <a href="#!/hard-dance/jumpstyle">Jumpstyle</a>
        <a href="#!/hard-dance/lento-violento">Lento violento</a>
      </div>

      <h3><a href="#!/house">House music</a></h3>

      <div class="genres">
        <a href="#!/house/acid-house">Acid house</a>
        <a href="#!/house/chicago-house">Chicago house</a>
        <a href="#!/house/deep-house">Deep house</a>
        <a href="#!/house/detroit-house">Detroit house</a>
        <a href="#!/house/disco-house">Disco house</a>
        <a href="#!/house/electro-house">Electro house</a>
        <a href="#!/house/euro-house">Euro house</a>
        <a href="#!/house/freestyle-house">Freestyle house</a>
        <a href="#!/house/funky-house">Funky house</a>
        <a href="#!/house/garage-house">Garage house</a>
        <a href="#!/house/ghetto-house">Ghetto house</a>
        <a href="#!/house/italo-house">Italo house</a>
        <a href="#!/house/latin-house">Latin house</a>
        <a href="#!/house/microhouse">Microhouse</a>
        <a href="#!/house/new-beat">New beat</a>
        <a href="#!/house/progressive-house">Progressive house</a>
        <a href="#!/house/tech-house">Tech house</a>
        <a href="#!/house/tribal-house">Tribal house</a>
        <a href="#!/house/vocal-house">Vocal house</a>
      </div>

      <h3><a href="#!/industrial">Industrial music</a></h3>

      <div class="genres">
        <a href="#!/industrial/aggrotech">Aggrotech</a>
        <a href="#!/industrial/grindcore">Grindcore</a>
        <a href="#!/industrial/electro-industrial">Electro-Industrial</a>
        <a href="#!/industrial/dark-electro">Dark electro</a>
        <a href="#!/industrial/electronic-body-music">Electronic body music</a>
        <a href="#!/industrial/futurepop">Futurepop</a>
        <a href="#!/industrial/industrial-metal">Industrial metal</a>
        <a href="#!/industrial/industrial-rock">Industrial rock</a>
        <a href="#!/industrial/neue-deutsche-harte">Neue Deutsche Härte</a>
        <a href="#!/industrial/japanoise">Japanoise</a>
        <a href="#!/industrial/power-electronics">Power electronics</a>
        <a href="#!/industrial/death-industrial">Death industrial</a>
        <a href="#!/industrial/power-noise">Power noise</a>
        <a href="#!/industrial/witch-house">Witch house</a>
      </div>

      <h3><a href="#!/oldschool">Oldschool jungle</a></h3>

      <div class="genres">
        <a href="#!/oldschool/darkcore-jungle">Darkcore jungle</a>
        <a href="#!/oldschool/hardcore-jungle">Hardcore jungle</a>
        <a href="#!/oldschool/raggacore">Raggacore</a>
        <a href="#!/oldschool/ragga-jungle">Ragga-jungle</a>
      </div>

      <h3><a href="#!/techno">Techno</a></h3>

      <div class="genres">
        <a href="#!/techno/acid-techno">Acid techno</a>
        <a href="#!/techno/detroit-techno">Detroit techno</a>
        <a href="#!/techno/free-tekno">Free tekno</a>
        <a href="#!/techno/ghettotech">Ghettotech</a>
        <a href="#!/techno/hardtechno">Hardtechno</a>
        <a href="#!/techno/minimal-techno">Minimal techno</a>
        <a href="#!/techno/nortec">Nortec</a>
        <a href="#!/techno/rotterdam-techno">Rotterdam techno</a>
        <a href="#!/techno/schranz">Schranz</a>
        <a href="#!/techno/symphonic-techno">Symphonic techno</a>
        <a href="#!/techno/tecno-brega">Tecno brega</a>
      </div>

      <h3><a href="#!/trance">Trance</a></h3>

      <div class="genres">
        <a href="#!/trance/acid-trance">Acid trance</a>
        <a href="#!/trance/dark-trance">Dark trance</a>
        <a href="#!/trance/dream-trance">Dream trance</a>
        <a href="#!/trance/euro-trance">Euro trance</a>
        <a href="#!/trance/goa-trance">Goa trance</a>
        <a href="#!/trance/hard-trance">Hard trance</a>
        <a href="#!/trance/ibiza-trance">Ibiza Trance</a>
        <a href="#!/trance/psychedelic-trance">Psychedelic trance</a>
        <a href="#!/trance/dark-psytrance">Dark psytrance</a>
        <a href="#!/trance/progressive-psytrance">Progressive psytrance</a>
        <a href="#!/trance/suomisaundi">Suomisaundi</a>
        <a href="#!/trance/progressive-trance">Progressive trance</a>
        <a href="#!/trance/tech-trance">Tech trance</a>
        <a href="#!/trance/vocal-trance">Vocal trance</a>
      </div>

      <h3><a href="#!/uk-garage">UK garage</a></h3>

      <div class="genres">
        <a href="#!/uk-garage/2-step-garage">2-step garage</a>
        <a href="#!/uk-garage/breakstep">Breakstep</a>
        <a href="#!/uk-garage/future-garage">Future garage</a>
        <a href="#!/uk-garage/grime">Grime</a>
        <a href="#!/uk-garage/grindie">Grindie</a>
        <a href="#!/uk-garage/speed-garage">Speed garage</a>
        <a href="#!/uk-garage/bassline">Bassline</a>
        <a href="#!/uk-garage/uk-funky">UK funky</a>
      </div>

      <h3><a href="#!/chiptunes">Chiptunes</a></h3>

      <div class="genres">
        <a href="#!/chiptunes/bitpop">Bitpop</a>
        <a href="#!/chiptunes/bleep-techno">Bleep techno</a>
        <a href="#!/chiptunes/game-boy-music">Game Boy music</a>
        <a href="#!/chiptunes/nintendocore">Nintendocore</a>
        <a href="#!/chiptunes/skweee">Skweee</a>
      </div>

      <img src="img/retroelectro20.jpg" id="ad">

    </div>

  </div>

  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://cdn.muut.com/1/moot.min.js"></script>

  <script>
  // channel expand / collapse script
  $(function() {

    function clickGenre(link) {

      var header = link.closest('h3'),
          genre = header.next()

      if (genre.hasClass('is-active')) {
        genre.removeClass('is-active')
        return false

      } else {
        $('.m-custom .is-active').removeClass('is-active')
        genre.addClass('is-active')
      }
    }

    // When main channel is clicked
    $('.muut').on('click', '.m-custom h3 a', function() {
      clickGenre($(this))
    })

    // Open a selected main channel on page load
    var genre = location.hash.split('/').slice(0, 2).join('/')
    if (genre) clickGenre($("[href='" + genre + "']").closest('h3'))

  })
  </script>

</body>

</html>

View Demo