Solved

Sub-menu closing when clicking on top of it

Posted on 2015-02-03
7
108 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

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.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

617 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