Menu icon Foundation

Developer | London, United Kingdom

Front End Developer with a passion for all things digital.

My Posts



  • 2
    Replies
  • Popovers like with Bootstrap?

    By Jacob Herper

    I am looking for a solution to realise a popover similar to this: http://getbootstrap.com/javascript/#popovers Unfortunately I could not find anything close to that with Foundation. Is there any way to realise a password requirements popover similar to t... (continued)

    Last Reply by Jacob Herper over 3 years ago



My Comments

Jacob Herper commented on Jacob Herper's post over 3 years

Does nobody have a solution for this?

Jacob Herper commented on Jacob Herper's post over 3 years

Thanks, that resolved the problem.

Do you by any chance have a solution for the click event, rather than opening the drop down on hover?
I tried data-disable-hover='true', data-hover="false" and data-click-open="true", but they don't seem to do anything.

Many thanks!

Jacob Herper commented on Jacob Herper's post over 3 years

I added my top-bar to a fresh foundation 6 setup. Now it's not exactly the same, but the menu is now outside of the browser view, which brings me back to my original question: how can I align the menu to the right, instead of to the left of the parent element?

http://pcserve.net/ftp/ul/foundation-6/index.html

Jacob Herper commented on Jacob Herper's post over 3 years

I can't seem to insert a picture into a reply, so I uploaded the screenshot to my ftp: http://pcserve.net/ftp/ul/dropdown.png

It's not styled yet, but you get the idea. As there is no space to the right, the menu gets shifted to the left and disappears before you can reach it with your mouse.
Also I wanted the menu only to appear if you click on the icon, but clickable drop downs only seem to work with buttons?

Jacob Herper commented on Jacob Herper's post over 3 years

This is my right top-bar code:

      <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
          <li><a href="{{ url('settings') }}" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Settings"><i class="fa fa-cog"></i></a></li>
          <li><a href="{{ url('messages') }}" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Messages"><i class="fa fa-envelope"></i><sup class="alert label">2</sup></a></li>
          <li>
            <a href="#" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Logout"><i class="fa fa-sign-out"></i></a>
            <ul class="dropdown menu" data-dropdown-menu>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="{{ url('logout') }}">Logout</a></li>
            </ul>
          </li>
          <li>{{ trans('global.welcome') }}, {{ $user->firstname }}</li>
        </ul>
      </div>

Jacob Herper commented on Jacob Herper's post over 3 years

Thanks, I didn't even think of that option!

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Jacob Herper's post over 3 years

Does nobody have a solution for this?

You commented on Jacob Herper's post over 3 years

Thanks, that resolved the problem.

Do you by any chance have a solution for the click event, rather than opening the drop down on hover?
I tried data-disable-hover='true', data-hover="false" and data-click-open="true", but they don't seem to do anything.

Many thanks!

You commented on Jacob Herper's post over 3 years

I added my top-bar to a fresh foundation 6 setup. Now it's not exactly the same, but the menu is now outside of the browser view, which brings me back to my original question: how can I align the menu to the right, instead of to the left of the parent element?

http://pcserve.net/ftp/ul/foundation-6/index.html

You commented on Jacob Herper's post over 3 years

I can't seem to insert a picture into a reply, so I uploaded the screenshot to my ftp: http://pcserve.net/ftp/ul/dropdown.png

It's not styled yet, but you get the idea. As there is no space to the right, the menu gets shifted to the left and disappears before you can reach it with your mouse.
Also I wanted the menu only to appear if you click on the icon, but clickable drop downs only seem to work with buttons?

You commented on Jacob Herper's post over 3 years

This is my right top-bar code:

      <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
          <li><a href="{{ url('settings') }}" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Settings"><i class="fa fa-cog"></i></a></li>
          <li><a href="{{ url('messages') }}" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Messages"><i class="fa fa-envelope"></i><sup class="alert label">2</sup></a></li>
          <li>
            <a href="#" class="iconlink" data-tooltip aria-haspopup="true" data-disable-hover='false' tabindex=1 title="Logout"><i class="fa fa-sign-out"></i></a>
            <ul class="dropdown menu" data-dropdown-menu>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="{{ url('logout') }}">Logout</a></li>
            </ul>
          </li>
          <li>{{ trans('global.welcome') }}, {{ $user->firstname }}</li>
        </ul>
      </div>

You commented on Jacob Herper's post over 3 years

Thanks, I didn't even think of that option!

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content