Solved

Sub-menu closing when clicking on top of it

Posted on 2015-02-03
7
98 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:NUKIT
Comment Utility
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
Comment Utility
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
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 13

Expert Comment

by:NUKIT
Comment Utility
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:NUKIT
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

771 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

9 Experts available now in Live!

Get 1:1 Help Now