Menu icon Foundation
two top bar menus

Hi,
i'm new to foundation. At 1st i have made a simple test page. I added a top bar menu. That works. Now i want to use a second top bar menu. The first menu contain a Menu icon, if i click there, the secons top bar will be visible (toggle function). Is this possible? How to do somethink like that?
best regards
Torsten

topbarmenu icon

Hi,
i'm new to foundation. At 1st i have made a simple test page. I added a top bar menu. That works. Now i want to use a second top bar menu. The first menu contain a Menu icon, if i click there, the secons top bar will be visible (toggle function). Is this possible? How to do somethink like that?
best regards
Torsten

Rafi Benkual over 5 years ago

Hi,

Can you please post a link to the page you made?

From the sound of it, you want to make a standard topbar appear from clicking the menu-icon? Is that correct?

Torsten Mueller over 5 years ago

Hi,
no, i cannot post a link, i work at my local computer.
I want to have a Menu icon or a complete topbar. When i will click at the menu icon, the second topbar have to display to show the product categories. (like at kelkoo.de)
best regards
Torsten

Torsten Mueller over 5 years ago

I've made it now as follow:

<nav class="top-bar" data-topbar>
    <section class="top-bar-section">  <!-- Right Nav Section -->
       <ul class="right">
            <li class="has-form">
                <a href="#" class="button" onClick="document.getElementById('hcm').style.visibility= 'visible'">Kategorien</a>
            </li>
        <li class="toggle-topbar menu-icon">
            <a href="#"><span>Men&uuml;</span></a>
        </li>
        </ul>
   </section>
</nav>

    <div class="row">
        <div id="hcm" class="large-12 columns" style="visibility: hidden;">
            <ul class="button-group [radius round]">
                <li><a href="#" class="button [secondary alert success]">Button 1</a></li>
                <li><a href="#" class="button [secondary alert success]">Button 2</a></li>
                <li><a href="#" class="button [secondary alert success]">Button 3</a></li>
                <li><a href="#" class="button [secondary alert success]">Button 4</a></li>
            </ul>
      </div>
      <div class="large-12 columns">
          <div class="large-4 medium-4 small-4 columns">
              <p><img src="img/logo100.jpg" /></p>
<!--here is more HTML... :) -->

I think it will work like i want.
What are you thinking about it?
best regards
Torsten

abdessamad idrissi over 4 years ago

i see only one top bar!

Rafi Benkual over 4 years ago