SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    0 Post(s)
    0 Thread(s)

    Hover Menu, Show/Hide Div, Bootstrap Tab

    Im trying to create a Flyout Menu where the 2nd level is a big div where the user can do stuff. Think of it as a product page. You have 3 products and the flyout presents features and info on the product. At the bottom there could be a DownloadNow-Button or something.

    So the flyout has to be visible when either hovering over the corresponding tab button or the flyout itself. It should be automatically invisible at any other time.

    It has to be done with the Bootstrap-Tab plugin.

    Rough jsFiddle:

    Aaand now im stuck. The flyout should disappear when not hovering over button or flyout itself. I tried some mouseLeave functions but with no success.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    463 Post(s)
    8 Thread(s)
    Hi chronixx. Welcome to the forums.

    This can be done with CSS alone, but it looks like you are wanting to do it the jQuery instead. If so, we can move this to the JS forum. At the moment, the JS tells the browser to "show" the box, but doesn't tell it to hide it again afterwards.

    The problem with using JS for this is that people without JS won't have access to the menu. You also have to consider people on mobiles, who can't hover.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts