Menu icon Foundation

My Posts

No Content

My Comments

Himanshu Khurana commented on Bill Sholar's post about 3 years

Thanks a lot for this information.
I also created a top menu after looking at the comments provided by R. Epple.
The menu works good, but when the width of the browser is changed and the hamburger icon shows up, I click on the menu item "3", this item has seven sub items and only four items show up in the drill down menu. What could be the issue?
<div class="top-bar">

    &lt;div class="title-bar" data-responsive-toggle="eMenu" data-hide-for="medium"&gt;

        &lt;button class="menu-icon" type="button" data-toggle&gt;&lt;/button&gt;

        &lt;div class="title-bar-title"&gt;&lt;strong&gt;&lt;a href="#"&gt;MENU&lt;/a&gt;&lt;/strong&gt;&lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="top-bar" id="eMenu"&gt;

        &lt;div class="top-bar-left"&gt;

            &lt;ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"&gt;

                &lt;li&gt;&lt;strong&gt;&lt;a href="#"&gt;MENU&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;

                &lt;li class="has-submenu"&gt;

                    &lt;a href="#"&gt;1&lt;/a&gt;

                    &lt;ul class="vertical submenu menu" data-submenu&gt;

                        &lt;li&gt;&lt;a href="#"&gt;1.1&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;1.1&lt;/a&gt;&lt;/li&gt;

                    &lt;/ul&gt;

                &lt;/li&gt;

                &lt;li class="has-submenu"&gt;

                    &lt;a href="#"&gt;2&lt;/a&gt;

                    &lt;ul class="vertical submenu menu" data-submenu&gt;

                        &lt;li&gt;&lt;a href="#"&gt;2.1&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;2.2&lt;/a&gt;&lt;/li&gt;

                    &lt;/ul&gt;

                &lt;/li&gt;

                &lt;li class="has-submenu"&gt;

                    &lt;a href="#"&gt;3&lt;/a&gt;

                    &lt;ul class="vertical submenu menu" data-submenu&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.1&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.2&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.3&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.4&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.5&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.6&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.7&lt;/a&gt;&lt;/li&gt;

                    &lt;/ul&gt;

                &lt;/li&gt;

                &lt;li class="has-submenu"&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;

        &lt;/div&gt;

        &lt;div class="top-bar-right"&gt;

            &lt;ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"&gt;

                &lt;li class="has-submenu"&gt;

                    &lt;a href="#"&gt;5&lt;/a&gt;

                    &lt;ul class="vertical submenu menu" data-submenu&gt;

                        &lt;li&gt;&lt;a href="#"&gt;5.1&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;5.2&lt;/a&gt;&lt;/li&gt;

                    &lt;/ul&gt;

            &lt;/ul&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;</code></pre>

 

Posts Followed

  • 15
    Replies
  • Foundation 6 Topbar like F5?

    By Bill Sholar

    topbar

    Trying to puzzle out how to make a topbar in F6 that looks and behaves like it does in F5 -- the "Responsive Toggle" example at http://foundation.zurb.com/sites/docs/responsive-navigation.html toggles to the "hamburger" when the window is smaller, but dis... (continued)

    Last Reply by Himanshu Khurana about 3 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Bill Sholar's post about 3 years

Thanks a lot for this information.
I also created a top menu after looking at the comments provided by R. Epple.
The menu works good, but when the width of the browser is changed and the hamburger icon shows up, I click on the menu item "3", this item has seven sub items and only four items show up in the drill down menu. What could be the issue?
<div class="top-bar">

    &lt;div class="title-bar" data-responsive-toggle="eMenu" data-hide-for="medium"&gt;

        &lt;button class="menu-icon" type="button" data-toggle&gt;&lt;/button&gt;

        &lt;div class="title-bar-title"&gt;&lt;strong&gt;&lt;a href="#"&gt;MENU&lt;/a&gt;&lt;/strong&gt;&lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="top-bar" id="eMenu"&gt;

        &lt;div class="top-bar-left"&gt;

            &lt;ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"&gt;

                &lt;li&gt;&lt;strong&gt;&lt;a href="#"&gt;MENU&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;

                &lt;li class="has-submenu"&gt;

                    &lt;a href="#"&gt;1&lt;/a&gt;

                    &lt;ul class="vertical submenu menu" data-submenu&gt;

                        &lt;li&gt;&lt;a href="#"&gt;1.1&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;1.1&lt;/a&gt;&lt;/li&gt;

                    &lt;/ul&gt;

                &lt;/li&gt;

                &lt;li class="has-submenu"&gt;

                    &lt;a href="#"&gt;2&lt;/a&gt;

                    &lt;ul class="vertical submenu menu" data-submenu&gt;

                        &lt;li&gt;&lt;a href="#"&gt;2.1&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;2.2&lt;/a&gt;&lt;/li&gt;

                    &lt;/ul&gt;

                &lt;/li&gt;

                &lt;li class="has-submenu"&gt;

                    &lt;a href="#"&gt;3&lt;/a&gt;

                    &lt;ul class="vertical submenu menu" data-submenu&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.1&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.2&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.3&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.4&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.5&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.6&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;3.7&lt;/a&gt;&lt;/li&gt;

                    &lt;/ul&gt;

                &lt;/li&gt;

                &lt;li class="has-submenu"&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;

        &lt;/div&gt;

        &lt;div class="top-bar-right"&gt;

            &lt;ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"&gt;

                &lt;li class="has-submenu"&gt;

                    &lt;a href="#"&gt;5&lt;/a&gt;

                    &lt;ul class="vertical submenu menu" data-submenu&gt;

                        &lt;li&gt;&lt;a href="#"&gt;5.1&lt;/a&gt;&lt;/li&gt;

                        &lt;li&gt;&lt;a href="#"&gt;5.2&lt;/a&gt;&lt;/li&gt;

                    &lt;/ul&gt;

            &lt;/ul&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;</code></pre>

 

Posts Followed


Following

  • No Content

Followers

  • No Content