Bloomberg Inspired Multi-level Toggle Menu In Pure CSS

Preview:

Description:

A pure CSS solution to create a Bloomberg.com style toggle menu that reveals a horizontal, multi-level mega menu when you click the toggle button.

How to use it:

Load the main stylesheet ‘bmenu.css’ in the head section of the document.

<link rel=stylesheet href=bmenu.css>

Create a menu toggle button using checkbox and label elements.

<input id=bmenu_toggle type=checkbox name=bmenu-open class=hidden>
<label class="bmenu toggle" for=bmenu_toggle accesskey=1>
  <header><span class=heavy>&#x2630;</span> Menu</header>
</label>

Create the multi-level toggle menu following the markup structure like so:

<div class=hide-at-start-wrapper>
  <nav class="bmenu panel animated">
    <a href=#/home.html><span class=triangle-origin>Home</span></a>
    <a href=#/markets.html><span class=triangle-origin>Markets</span></a>
    <a href=#/technology.html><span class=triangle-origin>Technology</span></a>
    <a href=#/politics.html><span class=triangle-origin>Politics</span></a>
    <a href=#/pursuits.html><span class=triangle-origin>Pursuits</span></a>
    <a href=#/opinion.html><span class=triangle-origin>Opinion</span></a>
    <a href=#/businessweek.html><span class=triangle-origin>Businessweek</span></a>
    <hr>
    <a href=#/video.html><span class=triangle-origin>Video</span></a>
    <a href=#/audio.html><span class=triangle-origin>Audio</span></a>
    <hr>
    <a class=no-panel href=#/newsletters.html>Newsletters</a>
    <a class=no-panel href=#/watchlist.html>Watchlist</a>
    <a class=no-panel href=#/subscribe.html>Subscribe</a>
    <a class=no-panel href=#/signin.html>Sign In</a>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Read</header>
            <a href=#/wealth.html>Wealth</a>
            <a href=#/crypto.html>Crypto</a>
            <a href=#/hyperdrive.html>Hyperdrive</a>
            <a href=#/prognosis.html>Prognosis</a>
            <a href=#/climatechanged.html>Climate Changed</a>
            <a href=#/equality.html>Equality</a>
            <a href=#/billionaires.html>Billionaires</a>
            <a href=#/graphics.html>Graphics</a>
            <a href=#/sponsoredcontent.html>Sponsored Content</a>
        </section>
        <section class=titled-group>
            <header>Watch</header>
            <a href=#/thedavidrubensteinshow.html>The David Rubenstein Show</a>
            <a href=#/brilliantideas.html>Brilliant Ideas</a>
            <a href=#/inspirego.html>Inspire GO</a>
        </section>
      </div>
      <div class=column>
        <section class=titled-group>
            <header>Special Reports</header>
            <a href=#/wheretoinvest$10,000.html>Where to Invest $10,000</a>
            <a href=#/50companiestowatchin2018.html>50 Companies to Watch in 2018</a>
            <a href=#/what'sinsidealltheiphones.html>What's Inside All the iPhones</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Read</header>
            <a href=#/economics.html>Economics</a>
            <a href=#/deals.html>Deals</a>
            <a href=#/fixedincome.html>Fixed Income</a>
            <a href=#/etfs.html>ETFs</a>
            <a href=#/benchmark.html>Benchmark</a>
            <a href=#/marketsmagazine.html>Markets Magazine</a>
        </section>
        <section class=titled-group>
            <header>Watch</header>
            <a href=#/daybreak.html>Daybreak</a>
            <a href=#/surveillance.html>Surveillance</a>
            <a href=#/markets.html>Markets</a>
            <a href=#/what'dyoumiss.html>What'd You Miss</a>
        </section>
        <section class=titled-group>
            <header>Follow</header>
            <a href=#/twitter.html>Twitter</a>
            <a href=#/facebook.html>Facebook</a>
        </section>
      </div>
      <div class=column>
        <section class=titled-group>
            <header>Data</header>
            <a href=#/stocks.html>Stocks</a>
            <a href=#/currencies.html>Currencies</a>
            <a href=#/commodities.html>Commodities</a>
            <a href=#/rates-and-bonds.html>Rates &amp; Bonds</a>
            <a href=#/sectors.html>Sectors</a>
            <a href=#/economiccalendar.html>Economic Calendar</a>
        </section>
        <section class=titled-group>
            <header>Listen</header>
            <a href=#/trillions.html>Trillions</a>
            <a href=#/oddlots.html>Odd Lots</a>
            <a href=#/surveillance.html>Surveillance</a>
            <a href=#/benchmark.html>Benchmark</a>
            <a href=#/p-and-l.html>P&amp;L</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Read</header>
            <a href=#/Cybersecurity.html>Cybersecurity</a>
            <a href=#/Startups.html>Startups</a>
            <a href=#/AI.html>AI</a>
            <a href=#/Mobile.html>Mobile</a>
            <a href="#/Big+Data.html">Big Data</a>
            <a href="#/Cloud+Computing.html">Cloud Computing</a>
            <a href=#/U.S.html>U.S.</a>
            <a href=#/Global.html>Global</a>
        </section>
        <section class=titled-group>
            <header>Special Reports</header>
            <a href="#/The Elon Musk Tracker.html">The Elon Musk Tracker</a>
            <a href="#/Tesla Model 3 Tracker.html">Tesla Model 3 Tracker</a>
        </section>  
      </div>
      <div class=column>
        <section class=titled-group>
            <header>Watch</header>
            <a href="#/Gadgets with Gurman.html">Gadgets with Gurman</a>
            <a href="#/Digital Defense.html">Digital Defense</a>
            <a href="#/Bloomberg Technology TV.html">Bloomberg Technology TV</a>
            <a href="#/Studio 1.0.html">Studio 1.0</a>
        </section>
        <section class=titled-group>
            <header>Listen</header>
            <a href=#/Decrypted.html>Decrypted</a>
        </section>
        <section class=titled-group>
            <header>Follow</header>
            <a href=#/Twitter.html>Twitter</a>
            <a href=#/Facebook.html>Facebook</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Read</header>
            <a href="#/2018 Women Candidates.html">2018 Women Candidates</a>
            <a href="#/Trump Tracker.html">Trump Tracker</a>
            <a href="#/Brexit Coverage.html">Brexit Coverage</a>
            <a href="#/World Leaders on the Brink.html">World Leaders on the Brink</a>
            <a href="#/2018 Pessimist's Guide.html">2018 Pessimist's Guide</a>
        </section>
        <section class=titled-group>
            <header>Listen</header>
            <a href="#/Bloomberg Law.html">Bloomberg Law</a>
        </section>
      </div>
      <div class=column>
        <section class=titled-group>
            <header>Subscribe</header>
            <a href="#/Balance of Power.html">Balance of Power</a>
        </section>
        <section class=titled-group>
            <header>Follow</header>
            <a href=#/Twitter.html>Twitter</a>
            <a href=#/Facebook.html>Facebook</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Read</header>
            <a href=#/Travel.html>Travel</a>
            <a href=#/Autos.html>Autos</a>
            <a href=#/Homes.html>Homes</a>
            <a href=#/Living.html>Living</a>
            <a href=#/Culture.html>Culture</a>
            <a href=#/Style.html>Style</a>
        </section>
        <section class=titled-group>
            <header>Special Reports</header>
            <a href="#/London Property Prices.html">London Property Prices</a>
            <a href="#/New York Property Prices.html">New York Property Prices</a>
            <a href="#/How to Invest in Art.html">How to Invest in Art</a>
            <a href="#/How to Spend Your Bonus.html">How to Spend Your Bonus</a>
        </section>
      </div>
      <div class=column>
        <section class=titled-group>
            <header>Watch</header>
            <a href=#/Made.html>Made</a>
        </section>
        <section class=titled-group>
            <header>Follow</header>
            <a href=#/Twitter.html>Twitter</a>
            <a href=#/Facebook.html>Facebook</a>
            <a href=#/Intagram.html>Intagram</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Read</header>
            <a href=#/Editorials.html>Editorials</a>
        </section>
        <section class=titled-group>
            <header>Follow</header>
            <a href=#/Twitter.html>Twitter</a>
            <a href=#/Facebook.html>Facebook</a>
        </section>
      </div>
      <div class=column>
        <section class=titled-group>
            <header>Listen</header>
            <a href="#/Masters in Business.html">Masters in Business</a>
        </section>
        <section class=titled-group>
            <header>Subscribe</header>
            <a href="#/Bloomberg Opinion Today.html">Bloomberg Opinion Today</a>
            <a href="#/Money Stuff.html">Money Stuff</a>
            <a href=#/Ritholtz's Reads.html>Ritholtz's Reads</a>
            <a href="#/Early Returns.html">Early Returns</a>
            <a href=#/Sparklines.html>Sparklines</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Special Reports</header>
            <a href="#/Sooner Than You Think.html">Sooner Than You Think</a>
            <a href="#/The Year Ahead: 2018.html">The Year Ahead: 2018</a>
            <a href="#/The Bloomberg 50.html">The Bloomberg 50</a>
        </section>
        <section class=titled-group>
            <header>Watch</header>
            <a href="#/Hello World.html">Hello World</a>
        </section>
      </div>
      <div class=column>
        <section class=titled-group>
            <header>The Magazine</header>
            <a href=#/Subscribe.html>Subscribe</a>
        </section>
        <section class=titled-group>
            <header>Follow</header>
            <a href=#/Twitter.html>Twitter</a>
            <a href=#/Facebook.html>Facebook</a>
            <a href=#/Instagram.html>Instagram</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Watch Live TV</header>
            <a href=#/US.html>US</a>
            <a href=#/Europe.html>Europe</a>
            <a href=#/Asia.html>Asia</a>
            <a href=#/Australia.html>Australia</a>
            <a href=#/Schedule+Shows.html>Schedule+Shows</a>
        </section>
        <section class=titled-group>
            <header>Shows</header>
            <a href=#/Surveillance.html>Surveillance</a>
            <a href=#/Daybreak.html>Daybreak</a>
            <a href=#/Markets.html>Markets</a>
            <a href=#/What'd You Miss?.html>What'd You Miss?</a>
            <a href="#/Bloomberg Technology.html">Bloomberg Technology</a>
            <a href="#/All Shows....html">All Shows...</a>
        </section>
      </div>
      <div class=column>
        <section class=titled-group>
            <header>Series</header>
            <a href=#/QuickTake.html>QuickTake</a>
            <a href="#/Hello World.html">Hello World</a>
            <a href="#/The Spark.html">The Spark</a>
        </section>
        <section class=titled-group>
            <header>Follow</header>
            <a href=#/TicToc.html>TicToc</a>
            <a href=#/YouTube.html>YouTube</a>
            <a href=#/Twitter.html>Twitter</a>
            <a href=#/Facebook.html>Facebook</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Bloomberg Radio</header>
            <a href="#/Listen Live.html">Listen Live</a>
            <a href="#/About Bloomberg Radio.html">About Bloomberg Radio</a>
        </section>
        <section class=titled-group>
            <header>Podcasts</header>
            <a href=#/Decrypted.html>Decrypted</a>
            <a href="#/Odd Lots.html">Odd Lots</a>
            <a href=#/Trillions.html>Trillions</a>
            <a href=#/Benchmark.html>Benchmark</a>
            <a href="#/Masters in Business.html">Masters in Business</a>
            <a href=#/Surveillance.html>Surveillance</a>
            <a href=#/P-and-L.html>P&amp;L</a>
            <a href="#/Business of Sports.html">Business of Sports</a>
            <a href="#/Coast to Coast.html">Coast to Coast</a>
            <a href="#/Bloomberg Law.html">Bloomberg Law</a>
            <a href="#/All Podcasts….html">All Podcasts…</a>
        </section>
      </div>
    </article>
    <article class=panel>
      <div class=column>
        <section class=titled-group>
            <header>Read</header>
            <a href=#/wealth.html>Wealth</a>
            <a href=#/crypto.html>Crypto</a>
            <a href=#/hyperdrive.html>Hyperdrive</a>
            <a href=#/prognosis.html>Prognosis</a>
            <a href=#/climatechanged.html>Climate Changed</a>
            <a href=#/equality.html>Equality</a>
            <a href=#/billionaires.html>Billionaires</a>
            <a href=#/graphics.html>Graphics</a>
            <a href=#/sponsoredcontent.html>Sponsored Content</a>
        </section>
        <section class=titled-group>
            <header>Watch</header>
            <a href=#/thedavidrubensteinshow.html>The David Rubenstein Show</a>
            <a href=#/brilliantideas.html>Brilliant Ideas</a>
            <a href=#/inspirego.html>Inspire GO</a>
        </section>
      </div>
      <div class=column>
        <section class=titled-group>
            <header>Special Reports</header>
            <a href=#/wheretoinvest$10,000.html>Where to Invest $10,000</a>
            <a href=#/50companiestowatchin2018.html>50 Companies to Watch in 2018</a>
            <a href=#/what'sinsidealltheiphones.html>What's Inside All the iPhones</a>
        </section>
      </div>
    </article>
  </nav>
</div>