Link to home
Start Free TrialLog in
Avatar of Cesar Aracena
Cesar AracenaFlag for Argentina

asked on

Sub-menu closing when clicking on top of it

Hello guys.

I'm using Bootstrap: Dropdown on Hover Plugin ( https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ ) and it works perfectly. The problem is that I don't only have common sub-menus with just links. In a sub-menu I have a big login form where the user has to click some input boxes. My problem is that my menu closes when I click anywhere inside that, even inside a form element. I know it's supposed to do that (or at least it's ok) when there are only links to click on but in my case I need to actually do more than one stuff in there.

Here's part my menu (with the login form):
<li class="dropdown pull loginbox">
 <a href="#" class="dropdown-toggle icon-user" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"> LOGIN</i></a>
     
 <div class="dropdown-menu">

  <section id="signin_alt" class="authenty signin-alt">
   <div class="section-content">
     <div class="wrap">
     <div class="container">
      <div class="row" data-animation="fadeInUp">
        <div class="col-md-4 col-md-offset-1">
        <div class="normal-signin"> 
         <div class="title">
          <h2>Sign In</h2>
         </div> 
         <div class="form-main">
          <div class="form-group">
           <div class="un-wrap">
            <i class="fa fa-user"></i>
           <input type="text" class="form-control" placeholder="Username" required="required">
           </div>
           <div class="pw-wrap">
            <i class="fa fa-lock"></i>
           <input type="password" class="form-control" placeholder="Password" required="required">
           </div>
           <div class="row">
            <div class="col-md-6">
             <input type="checkbox" class="form-control" checked>
             <label>Remember me</label>
            </div>
           </div>
           <div class="row top-buffer">
            <div class="col-md-4 col-md-offset-8">
            <button type="submit" class="btn">Sign In</button>
            </div>
           </div>
         </div>
         </div>  
       </div>
       </div>
       <div class="col-md-2 hidden-xs">
        <div class="horizontal-divider"></div>
       </div>
       <div class="col-md-4">
        <div class="sns-signin">
         <a href="#" class="facebook"><i class="fa fa-facebook"></i><span>Sign in with Facebook</span></a>
         <a href="#" class="google-plus"><i class="fa fa-google-plus"></i><span>Sign in with Google+</span></a>
        </div>
       </div>
       <div class="col-md-1"></div>
      </div>
      <div class="row top-buffer bottom-wrap">
       <div class="col-xs-6 col-md-2 col-md-offset-1">
        <a href="<?php echo $serverUrl; ?>login/index.php" id="forgot_from_2">Forgot your password?</a>
       </div>
       <div class="col-xs-6 col-md-2">
        <a href="#signup_wizard" id="signup_from_2">Create an account</a>
       </div>
      </div>
     </div>
    </div>
   </div>
  </section>

 </div>
</li>

Open in new window

All the tags to make the jQuery work are in line 2 and it works! I just need it to not close the sub-menu when the mouse in over it, even if it's clicking like crazy. Any ideas?

Thanks!
Avatar of Carlos Llanos
Carlos Llanos
Flag of United States of America image

Have you tried to write custom jQuery that targets that particular item id and have it not close?

$( ".section-content" ).click(function( event ) {
  event.stopPropagation();
  // Do something
});

Open in new window


This might help...might not.
What happens when you use an oddball structure?   I does not work right.  Solution find a hack that will screw it up even worse.

I cannot think of any valid approach the would put a form in semantic never-never land by sticking it in a menu.

You can put a square pag in a round hole without damaging something.  The same goes for doing a design that is going to have usability, accessibility, and SEO issues even if you get it to work by hacking bootstrap.

If you were writing you own code you might be able to integrate some strange manifestation like a for inside a submenu, but if you are using third party bloat like bootstrap, then you will probably break something when you find a hack to do what you want.

BTW based on the code you posted the code is already invalid, semantically flawed and broken and will never be stable.  I hate to think hw badly the page will be treated by the Google crawler that will be getting assautled by that structure.

So why not just pop up a panel with the login form instead of trying trek across a 400 mile desert with no water.

Cd&
hello Caracena, , I mostly agree with COBOLdinosaur, but for some slightly different reasons. I too think that, trying to "overRide" the programmed behavior of this menu thing, can get side tracked into some troublesome code and recode work. These days almost any web container that drops down (or reveals) an unseen <div> or <li> on hover, or click, is called a "Menu". You can decide to show an Overlay <div> (pop-up) on menu click (as per COBOLdinosaur), or find another web container add-on (menu or tab function) that is already programmed to do what you want.
Try looking into RocketTheme's free RockNavMenu.  If you are looking for a menu that has the sign-in portion built into it...you can do it with that.

http://www.rockettheme.com/joomla/extensions/roknavmenu
Looks like this when it's all said and done...

User generated image
It is horrifying to think that there are actually plugins to create that kind of accessibility/usability abomination.  Maybe next week they will put a form inside of a select that is part of a form inside  a heading.

Cd&
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial