Solved

Sub-menu closing when clicking on top of it

Posted on 2015-02-03
7
100 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:Caracena
  • 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 33

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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 33

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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.

863 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now