Home/ Questions/Q 8780509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T20:04:08+00:00

I’m trying to make a dropdown very similar to dropbox dashboard, where if you

  • 0

I’m trying to make a dropdown very similar to dropbox dashboard, where if you click the username a flyout menu appears. Clicking the username again will close the flyout (toggling it every time you click).

The one caveat is that clicking anywhere except on the flyout itself will also close it.

So far, I have it working almost, but not 100%. If you click on the actual ‘body’ element directly, it will close the flyout as it should. By this I mean my website has a .wrapper element which doesn’t take up the full height of the page. Theres a thin strip down at the bottom with no actual element covering it, only the <body> tag. Any place where .wrapper or some other element takes up space (even a 100% width invisible wrapper), it will not close the window if you click on anything where there is an element (besides body).

javascript:

// FLYOUT menu 
$flyout = $('.flyout ul'),
 flyoutDuration = 120;

$('.flyout h3 a').click(function(e) {
    e.preventDefault();
    $flyout.fadeToggle(flyoutDuration);
});

$(document).on('click',function(e) { 
    if ( $(e.target).parents($flyout).length === 0 ) { 
        $flyout.fadeOut(flyoutDuration); 
    }
});

HTML

<body>
    <div class="blackbar">
        <div class="container clearfix">
            <a href="/"><div class="icon logo"></div></a>
            <div class="flyout">
                <h3>
                    Welcome back, <a href="#">username</a>
                </h3>
                <div class="menu">
                    <ul>
                        <li><a href="#"><div class="users"></div>Users</a></li>
                        <li><a href="#"><div class="groups"></div>Groups</a></li>
                        <li><a href="#"><div class="configuration"></div>Configuration</a></li>
                        <li><a href="#"><div class="logout"></div>Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <! -- content here -->
    </div>
</body>

The expected behavior should be any element you click on that isnt a descendent of .flyout should close the window (including .blackbar, the logo, etc)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To be honest – when I am doing something like this and I do not want clicks inside of the “box” to close the element – I prevent clicks from bubbling.

    // FLYOUT menu 
$flyout = $('.flyout ul'),
 flyoutDuration = 120;

$('.flyout h3 a').click(function(e) {
    e.preventDefault();
    $flyout.fadeToggle(flyoutDuration);
});

$('.flyout').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
});

$(document).on('click',function(e) { 
  if(flyout-open) {
        $flyout.fadeOut(flyoutDuration); 
    }
});
    • 0