How to close Nav menu when clicking outside as well as the cross

close nav menu external click

[AndrewHill]

I have a Nav menu, you click Menu and the nav bar shows on the right side of the page.

The problem is, to get rid of it, you have to click on the cross (X) on the nav bar. I'd like to be able to click outside of the menu to close the nav menu.

What code do I need t do this?

[NickMNS]

With or without Javascript? jQuery?

Is it a sticky menu?

[AndrewHill]

I think it's in CSS isn't it? Apologies, I'm new to all this. I don't think there's any Java on my site.

If you mean sticky menu as in always on top, no. You have to click Menu and it comes up. Click the X, it disappears.

[NickMNS]

I think it's in CSS isn't it?

We can't know what you are using. What you want can be very easily achieved with Javascript. But if you are not using JS, or jQuery already then it may be better to do it with only CSS.

You have to click Menu and it comes up.

Is the menu button sticky? That is, it is always present on the screen, or not sticky, you need to scroll to the top of the page to see it.

[tangor]

Is the output in a layer or popup?

check out zindex.

I use this on one site. Click menu, drops down (hover), move out and menu closes automagically.

[AndrewHill]

Tangor, it looks like a layer (?) I'm not sure... It slides in from the side.

Nick, it isn't sticky. You have to scroll up to the top to click on it.

I'm certain it's CSS that I need to work with.

[lucy24]

You have to scroll up to the top to click on it.

The question was probably a red herring anyway, because you could set it to {display: fixed;} in CSS and then it would always be visible, without affecting any other aspect of its behavior. Not saying that you would want to do this in the specific case of a menu button with a dropdown, as things could get messy.

Now then...

I have a Nav menu

What, exactly, do you mean by “I have”?

Wait, come back, this is not meant to be a stupid question. Is there a currently existing website that was coded by somebody else, and now you're trying to change it? Do you have a stylesheet in which you want to change some detail of presentation? Is it a hardcoded page or is there a Content Management System involved? What do you see when you go to the page and select View Source in your browser? Have you ever seen this before, and if so, will you be editing it directly?

Most of the time, click-on-X does imply javascript. That is, there's no carved-in-stone rule that only scripted content can create a clickable X. It’s just customary and conventional: when you see a little X, you think javascript. But you can do a lot with menus using CSS alone. For example, you could have a menu that remains visible as long as the user's mouse is over any part of the menu, but if they move the mouse out of the menu area, it disappears again. That doesn't require scripting.

[AndrewHill]

Lucy, the website was made for me by a company; the website is for my letting and estate agency in the UK.

The source code is relatively clean, but there is a lack of comments so what I've found myself doing so far is using inspect element, finding the part that I need and then matching it in the style.css file directly on the site. I've managed to change the colour of my nav menu, the opacity, font colours, all the main bits but there are two parts that I'm stuck on, well three. This is one of them.

I've been editing the content too, via the .html files.

The other two points I'm stuck on is a button, it's grey (it should be yellow) and when I hover over, it turns green which it is supposed to. The third is adding a margin between the social media icons on mobile devices.


Is there a way of sharing the site? That way, you can have a look? When I tried in another post, they were all snipped...

[lucy24]

You're not allowed to post links in the public part of this site. But most of the time when you've got a specific question, it's more useful to post only the relevant part of your CSS and/or HTML. Put it inside [ code ] tags for readability.

When you use the browser's Inspector on any given element, it should tell you all the bits of CSS that go to make up its final appearance: A is canceled by B which is overridden by C and so on. In the case of a button that's the wrong color, you're probably talking about background-color ("color" alone means the color of text and possibly borders), so look for that in CSS. It is obviously easiest to inspect elements that contain text, because then you can search for that text in the HTML and immediately see things like class names. And you presumably don't have that many HTML buttons on the page, assuming it really is HTML and not javascript sneaking in. If the button says "Submit" and this word occurs only once on the entire page, you are home free.

Open the page source--the HTML--and search for the word "script". If the word occurs nowhere on the page, then you can say with absolute confidence that the page doesn't use scripts.

[not2easy]

Sorry, AndrewHill, it appears you haven't received a proper welcome to WebmasterWorld [webmasterworld.com] and I apologize. Since you'd signed up a few weeks ago I thought you were more familiar with how these forums work. Each Forum has a Charter that tells you what you should know before you post. The Charter for the CSS Forum [webmasterworld.com] tells you how to post to get the answers and the help you're hoping for.

A tip about editing files online - only edit online if you have a copy of the file you're editing because that way if something goes wrong you can always start over. When you edit online, there's a chance things can go wrong and it pays to save a copy first.

Another tip - If you plan to manage and edit your own files, you will need to get a good text editor, learn some html and css and get comfortable with reading your html files in the text editor. You should be familiar with the elements of your pages, the source of them and generally how the parts work together. The menu may be CSS only, but there is a very high chance that it is javascript (not Java) because javascript (or jQuery) powers most menus today.

As for posting a link for others to see the elements in question, the only place here where you can post a link for others to review is in the Supporters Review Forum [webmasterworld.com] and you're welcome to join us there.

_{BTW - The grey button color issue belongs in the other discussion regarding changing the nav colors: [webmasterworld.com...] if there is still a problem with that}

[NickMNS]

In the case of a button that's the wrong color, you're probably talking about background-color ("color" alone means the color of text and possibly borders), so look for that in CSS.

And it should be easy to find with inspect element, (at least in Chrome) if you are using an external CSS style sheet the exact file name and line number are displayed in the top left hand corner of the style element (see image [imgur.com...] in the exmaple shown the style will be found on line 5 of bootstrap.min.css.

A few more pointers, background-color may be shown in your CSS as only "background", they are for all intents and purposes the same (not really but close enough). Also, be sure that whatever you change is reflected for all screen sizes. Responsive sites use @media queries to set styles for specific screen sizes. If one is not careful one may make a change on desktop, but then not make the corresponding adjustment for the other size. So say the background is set to red without media queries and then @media (min-width: 768px) the background is set to blue. Then if you view your site on a screen smaller than 768px, such as a phone the background will be red, but on desktop it would be blue. Now background is likely a bad example as that is the type of style element that should remain the same for all screen sizes. It should be set only once without a media query. But there are plenty of others will be modified with media queries.

If javascript is being used, you may see styles in the inspector that don't exist in the style sheet as these are being created by the script. Follow Lucy's recommendation about looking for the <script> tags.

One final note. CSS is for Cascading style sheet, styles are defined in a cascade, any style that is defined a the top of the sheet can be redefined lower down. The lowest definition takes precendence (eg: the style with the biggest line number). Also styles that are more specifically declared take precedence over more broadly declared styles eg: ".myclass" is more broadly defined than "div.myclass". Because ".myclass" applies to any tag with a class of "myclass", p tag, a tag div tag etc... and "div.myclass" only applies to div tags that have a class of "myclass".

But don't worry, this may seem like much but "inspect element" will show you the style by order of precedence. So if you inspect <div class="myclass></div> you should see at the top of the screen div.myclass{background:green;} followed by .myclass{background:red;} followed by all the other applicable styles. And the background would be green in this example and your browser (in inspect element) would show background:red; crossed out. And if you were to change red to blue, it would change the background to blue for all the tags ( a, p, h1 etc.. that have a class="myclass") but it would not change any div tags.

I think I have rambled and digressed enough... hope this helps.

[AndrewHill]

OK, so there appears to be a few scripts here and there throughout the entire website. So, scripts are Java? That would make sense... I've never seen a Javascript website but now I think about it, I may not have realised I was looking at Javascript...

You can see how novice I am haha.

As someone mentioned about downloading a backup... I learned the easy way about how important it is. First thing I did was backup the site. 5 Minutes later, I broke it. Luckily, I had the backup to hand.

[not2easy]

Java is generally for little applets, it's used for games too, but Java and javascript are two quite different things. It is common to use javascripts on sites to enhance functionality and javascripts may contain their own style settings or they may use your css to control appearance. Java is less commonly used.

Scripts may be javascript or jQuery (javascript library) based or they may be written in perl or php. If you find </script> you can backtrack to its opening tag and find the name of the file and see where it is located. Since I see on a different post that you are working on a WordPress site, the chances are higher that the menu is component of your theme or even a plugin. If you are not finding a javascript in the page source code where the menu link is found, I would look though the plugins installed on your site and see whether there is a menu plugin.

Plugins have their own support sites (found at wordpress.org) that specialize in problem solving with their plugins.

[AndrewHill]

Not2easy, I can see your point now. So, here I have

<div id="nav-overlay" class="nav-overlay">
 <a id="nav-close" href="javascript:void(0)" class="closebtn">&times;</a>
 <div class="nav-overlay-content">
 <a href="index.htm">Home</a>
<a href="register.htm">Register with Us</a>
<a href="property-list.htm?trans_type_id=1">Property for Sale</a>
<a href="how-to-sell.htm">How to Sell</a>
<a href="the-sales-process.htm">The Selling Process</a>
<a href="property-list.htm?trans_type_id=2">Property for Let</a>
<a href="how-to-rent.htm">How to Rent</a>
<a href="information-for-tenants.htm">Information for Tenants</a>
<a href="valuation.htm">Valuation</a>
<a href="about-us.htm">About Us</a>
<a href="contact.htm">Contact Us</a>
<a href="testimonials.htm">Testimonials</a>
<a href="blog/">Blog</a>  
 </div>
</div

That's the menu box, you click menu (which is defined as nav, it appears) on the top right of my website and it comes in like a layer on the right side of the screen (I made it slightly transparent by adjusting opacity in the css, it looks pretty sweet now).
I notice specifically;

 <a id="nav-close" href="javascript:void(0)" class="closebtn">&times;</a>

closebtn seems pretty self-explanatory and it says javascript over in the href... but the void doesn't look promising. I click on it and not much happens (in view source, it's a link), when I right click and copy link address and paste it in the address bar, it says "void(0)"

There is also a js/main.js script at the bottom of the View Source (I'm using chrome) and the only thing in there is mostly styling by the looks of things but this is what it says about navigation menu:

$("#nav-toggle").click(function() {
 if ( $(window).width() > 1200) {
 $("#nav-overlay").css({width: '25%', left: '75%'});
 } else if ( $(window).width() > 768) {
 $("#nav-overlay").css({width: '50%', left: '50%'}); 
 } else {
$("#nav-overlay").css({width: '100%', left: '0%'}); 
} 
});

$("#nav-close").click(function() {
$("#nav-overlay").css({width: '0%', left: '100%'}); 
});

That is in the js/main.js file, as mentioned, at the bottom of view source.

[lucy24]

&times;

Oh, my gosh, is that where the little x comes from? How goofy!
×
is a member of the Latin-1 character set. Once in a blue moon you will meet designers or coders who insist on expressing all non-ASCII characters as named or numerical entities (my fingers do NOT like typing this word) for fear they will turn into something else in transit from database to page.

So, yeah, you do actually have javascript on the page--but the script as such is not responsible for the little x.

[AndrewHill]

Brilliant, at least we cleared up where we stand. So, where do I go from here? To make the menu close when I click outside of the menu?

[not2easy]

Message moved from CSS forum to assist discussion's turn to javascript.