0
    function showMenu(parentElement){
    var uls= parentElement.getElementsByTagName("ul");
    if (uls.length > 0)
        uls[0].setAttribute("style","display: block");

}

function load(){ 
    var lis = document.getElementsByTagName("li"); 
    for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", function(){
            showMenu(this);
        });
    }
}

I have this script, wich allows me to open the correct 'ul', when the 'li' is clicked. I then added this

 function Meny(){

    var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background: white");

            }
}

And attached it to the divs onclick outside my menu, so that the menu closes nicely, when it is clicked anywhere else. Then ran into a little problem with positioning, so I set my cssmenu to position:fixed. I can live with that, althou, I see how it can be a bad practice. Then I found out, I can hide it with opacity 0.2, when xoomed to more then 200%, and then, visible on hover.

My problem now, is that when I click on another li, it will not close the other li's ul. So the submenu opens, but wont close when I click its sibling, or any other li, that is not a part of that li's Ul.. I use the this keyword in my menu, like so:

<nav id="cssmenu">
<li onclick="showMenu(this);"><a></a>
<ul>
<li></li>
</ul>
</nav>

I have a much longer menu, with many submenu's. I have seen working jquery's for this, but cannot get jquery to work, and besides, I AM eager to learn javascript, as the logic is understandable, to some extend. All the keywords I am not familiar with, and all this ul, li, ul, is confusing to say the least..

my css is pretty straight forward, and a good way to learn all the ul li ul li rules. just simple targeting, this I can understand fine.

#cssmenu{}
#cssmenu ul li{}
#cssmenu ul ul {display:none}
#cssmenu a{}

I recently started transforming a drop down hover menu, to a clicking menu instead, to more fit touch screens, and keep some other hover effects for pc at least.

Is it doable with javascript, to have the childs ul, close, when sibling is pressed, or uncle or aunt or whatever, anything BUT that li's elements?

I have seen it with jquery, as it is in these examples:

http://jsfiddle.net/nkKja/

http://jsfiddle.net/contendia/ddXBU/4/

I have tried to use the code in the 2'nd example, as it adresses ul's and li's, and not have 'class' specified in the menu. I then changed the words #leftmenu, to #cssmenu, without any luck. I have only my 

<nav id="cssmenu">

as a unique element in my menu, and the THIS keyword took nicely care of that issue. Also, i read that unique id's are preferable, as ul li (tags), load slower then id's, easy to understand. I do not have such a huge page, at least not yet, that these are issues that I am concerned with, and I am not interested in giving all my menu items a unique id. I can of course use jquery, but that is something I need to read up on how to implement, i tried following these instructions, but somehow failed.

vertical drop down menu displays sub menu and when clicking on another menu item closes the previous menu item

Also, I do not understand completly, why the 3'rd script, is closing the cssmenu, I tried changing the background: white, to display:none, this simply hide my entire menu. And that is strange I think, as when I tried it out earlier, it worked for changing the color, of every 'ul', except the top ones, the visible top menu items.

Appreciate any responds, I HAVE been told to use jquery, but it is a little pain in the #*# when it wont work, and I feel I am just oh so close to the solution. In my mind, another if-statement is needed, just cannot seem to figure out that one, as arrays, the FOR keyword, and such is something I really need to learn more about.

Community
  • 1
  • 1
sunto
  • 87
  • 1
  • 1
  • 10
  • Take a look at this question and the answers it has. That might solve your problem. http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it – Sleek Geek Jan 25 '15 at 04:33
  • You don't need jQuery to implement this. If you've seen another example that works with jQuery that proves that it *can* be done with vanilla JavaScript. – nnnnnn Jan 25 '15 at 04:52
  • Thanks, I will look closer into that! Jquery simplifies the whole thing it seems? Seems like the same logic kinda language as js, – sunto Jan 25 '15 at 04:52
  • @nnnnn That was my thinking also, seems to be an if statement there, wich i could be able to transer into my js.. Oh the headace :) – sunto Jan 25 '15 at 04:53
  • jQuery isn't a language. It is a collection of functions written in JavaScript. So using jQuery is just using JavaScript that somebody else has already written for you. – nnnnnn Jan 25 '15 at 04:53
  • ohh i see, that makes sence. Thanks for that, makes it more understandable! Still, as you said, then I must be able to do it my self, by implementing that if inside container, and if not inside container code snippet.. What would be the reasonable way, (except jquery), to do this? Another addEventListener, or simply an IF statement, that goes, in my showMenu function, am i on the rigth track here? – sunto Jan 25 '15 at 05:00
  • I am trying to get my head around this.. Is this something that would work maybe? If (click.!this-li || click.!this li.ul){ function.hideMenu(); } Know it isn't correclty coded, as I am newbie.. Essentialy what I am thinking, If NOT clicked on THIS li, OR NOT clicked THIS li's ul, then hide submenus... And then the code I already have, says that showMenu(this), on a click, so I guess I need to use addEventListener, or even simpler.. My thinking is that the NOT (!) would be a smart way to approach this, any pointers? :) @nnnnn Thanks for any help by the way, very appreciated :) – sunto Jan 25 '15 at 05:36
  • You've asked quite a few different questions one after the other. I'd suggest first working on whatever you see as the main problem - is that just getting sub menus to close when other sub menus are clicked? Can you create your own http://jsfiddle.net demo that just contains a reasonable sample of your html? That would give me something to work with if I added some JS for you. (Also: why is your li element's parent a nav element? Shouldn't it be a ul element?) – nnnnnn Jan 25 '15 at 06:26
  • Ok, I'm sorry for that, am getting out of topic yes! I tried to make a js fiddle, it didn't work as it does in my chrome thou.. If you look at my site, http://www.sunto.no/mat-og-kosthold.php as you can see, my menu is not closing, when I click another menu item. If I click on a menuitem, not in the opended ul, then that ul should close! Oh i see, I used that one since finding the cssmenu, by ID, seemed logical to me.. Isn't that nav item the parent of my entire menu? That part, 3rd code, is only for closing the menu again, and it worked, to my confusion.. – sunto Jan 25 '15 at 06:38
  • http://jsfiddle.net/nkKja/31/ Hah, the fiddle works :P hehe I added there my css, html and js. The last function, is only for hiding the menu again, and that one is the one probably not needed, or change for click anywhere, but not the "active" elements.. – sunto Jan 25 '15 at 07:07
  • http://jsfiddle.net/contendia/ddXBU/4/ I want something like this :) – sunto Jan 25 '15 at 07:17

0 Answers0