Solved

Sub-menu closing when clicking on top of it

Posted on 2015-02-03
7
102 Views
Last Modified: 2016-02-25
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!
0
Comment
Question by:Cesar Aracena
  • 3
  • 2
  • 2
7 Comments
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 40589207
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40589310
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&
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40589556
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.
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 13

Expert Comment

by:Andrew Derse
ID: 40590240
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
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 40590259
Looks like this when it's all said and done...

Screen-Shot-2015-02-04-at-8.57.15-PM.png
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40591905
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&
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 500 total points
ID: 40591941
I looked at your post with the Blogs - Login image. But It does not mean anything more that you have already said, as It closes when you click it, you say that,s the problem?

I do not like bootstrap, for the very reason you are having problems here, as I always need to have page operations that are NOT coded into bootstrap, and have to do some "Hack" or trap Javascript event code rework.

As already Suggested here, you may want to do a bootstrap "Modal" popup on the "Blogs" click, you probally have this in your Blogs <a>   data-toggle="dropdown"


you can do a bootstrap modal with this in a web element -
       data-toggle="modal" data-target="#myModal"

I do not have time to code this for your you, and I am not sure that it would work as you require, in that you probaly show the login  when OnHover, BUT you would not want to show a Modal with an OnHover event. You chould change the "Blog" to a single element drop menu with just Login, and have an <a> in that Login that has the show modal on click?

there are many Code Reworks for some of bootstraps fly by night with earplugs functioning and reworking here is one -
     http://www.americommerce.com/wespeakweb/Bootstrap-Hover-Dropdowns
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question