Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Hiding menu items when menu item is clicked ...

Posted on 2013-01-21
5
Medium Priority
?
389 Views
Last Modified: 2013-01-22
Hey all.

I have a menu that I created using various examples. It is a horizontal menu that goes several "layers" deep.

It all works fine except when I click on a menu option, it executes the code that is to be ran fine but the menu itself "stays visible".

in other words, if I hover over root element 1 and go down the list to element 5 and click it, the new code is ran but the menu itself stays visible until I "move the mouse off the menu".

Here is the CSS being used.

/* --------------------- */
/* BEGIN Navigation Menu */
/* --------------------- */
nav ul ul {
      display: none;
}

      nav ul li:hover > ul {
            display: block;
      }

/* Level 1 */      
nav ul {
      /*
      background: #efefef;
      background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
      background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
      background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
      box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
      padding: 0 20px;
      border-radius: 10px;  
      */
      list-style: none;
      position: relative;
      display: inline-table;
      background-color: #2e5568; /* change */
}
      nav ul:after {
            content: ""; clear: both; display: block;
      }      

nav ul li {
      float: left;
      background-color: #e7e7dd; /* change */
}
      nav ul li:hover {
            /*
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
            */
      }
      nav ul li:hover a {
            color: #2e5568; /* change */
            /* background-color: #2e5568;*/ /* change */
            background-color: #e7e7dd;
      }
      
      nav ul li a {
            display: block; padding: .5em; /* change 25px 40px; */
            /* color: #757575; */
            color: #000; /* change - top menu text */
            font-weight: bold;
            font-size: 10pt;
            text-decoration: none;
      }
/* Level 2 */      
nav ul ul {
      background: #5f6975;
      border-radius: 0px; padding: 0;
      position: absolute; top: 100%;
}
      nav ul ul li {
            float: none;
            /* border-top: 1px solid #6b727c; change */
            border-bottom: 1px solid #575f6a;
            position: relative;
      }
            nav ul ul li a {
                  padding: .5em; /* change 15px 40px; */
                  color: #fff;
            }      
                  nav ul ul li a:hover {
                        /* background: #4b545f; */
                        background: #d5d5cc; /* change */
                  }

/* Level 3 */
nav ul ul ul {
      position: absolute; left: 100%; top:0;
}      
      nav ul ul ul li a {
            width: 10em;
            padding: .5em; /* change 15px 40px; */
            color: #fff;
      }      
/* ------------------- */
/* END Navigation Menu */
/* ------------------- */

I think I can get around it by using a "hack" but I would rather it be "graceful".

Any help would be greatly appreciated.
0
Comment
Question by:Webspeeder
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38803155
Of course it stays visible; you are still hovering.  If you don't want it that way then uses classes and use the onclick of the element to swap the classes and the mouseout event to restore the class so it is still usable if you hover again.

Cd&
0
 

Author Comment

by:Webspeeder
ID: 38803184
This is the issue. I've used classes to "hide" the ul li elements, but then they are no longer visible.

I can add the on.(click) and have it triggered, the problem is that I don't how to "hide" the menu items and still have them available.
0
 

Author Comment

by:Webspeeder
ID: 38803189
OK, I think I see. I need to manually do what the CSS is doing in the line nav ul li:hover > ul. Right?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 38803330
Something like that.  The lines of that kind of menu mess is something I never look at.  Drop down menus are, IMO lame, and I never use them because they breaks too easily, add zero usability, are badly implement most of the time, and force the user translate on the fly.

In any case all you have to do is add a class to the element with their default display property and when the get click, change the the class to one with property display:none. Then when the mouseout fires set them back to the original class.

Cd&
0
 

Author Comment

by:Webspeeder
ID: 38805703
I got it. The issue I was having was that I defined the events on the menu on document ready but the menu system itself is dynamically generated, after the the events were defined.

I defined the events after the menu is generated and all is working now.

Thanks for your input.
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

886 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