Drop down arrow direction niggle.

I'm working on a new site with which the client is very happy - But.....
on the mobile version of he site, I've designed a simple "hamburger" menu with a drop down and a fly out.
The menu is placed n the right hand side of the page, so that when you hover over it, it first shows the drop down and then the flyout to the left, but the little direction arrow on the "RESOURCES" button shows the fly out to the right,
Show much easier to just look at the attachment :)
Is there any way the little arrow can be made to point to the left r even deleted?

Attachment 127465

Quote:

---

Originally Posted by letsgofishing

I've designed a simple "hamburger" menu with a drop down and a fly out.
The menu is placed on the right hand side of the page, so that when you hover over it, it first shows the drop down and then the flyout to the left, but the little direction arrow on the "RESOURCES" button shows the fly out to the right. Is there any way the little arrow can be made to point to the left or even deleted?

Attachment 127465

---

With a touch-device there is no concept of 'hover'. You will see hover working when viewed on a desktop, and if you have a MouseOver state on a touch-device, it will show on a touch device for the page the visitor is currently viewing e.g.

Attachment 127467

I am sure you can change the direction of the submenu arrow, but you would need to explain how you created the mobile menu, or post a XAR doc copy in the reply

Gary

Thanks once again Gary - I was looking at the browser with a reduced window width.
Checked on my cell and all good.
Sorry to be a nuisance but any ideas why the drop down isn't closing after you've selected and page?
This site is being trade mark registered so at the moment I can't publish the link ...

Quote:

---

Originally Posted by letsgofishing

Thanks once again Gary - I was looking at the browser with a reduced window width.
Checked on my cell and all good.
Sorry to be a nuisance but any ideas why the drop down isn't closing after you've selected a page?
This site is being trade mark registered so at the moment I can't publish the link ...

---

Would not want to start guessing without understanding how you constructed your mobile NavBar. You could post a vanilla copy here without disclosing the client, or you can take a look at an example (attached).

The example uses a MobileMenu(lock) with a MouseOver MobileMenu(lock) with two sliding NavBars (for demonstration purposes only). In the example all mobile links route to something and not just another link. The submenus could of course be on the page to which they relate as at https://theparsonage.co.uk.

Attachment 127469

If you're still stuck then create a vanilla NavBar and post it here.

Gary

Quote:

---

Originally Posted by Initiostar

Would not want to start guessing without understanding how you constructed your mobile NavBar. You could post a vanilla copy here without disclosing the client, or you can take a look at an example (attached).

The example uses a MobileMenu(lock) with a MouseOver MobileMenu(lock) with two sliding NavBars (for demonstration purposes only). In the example all mobile links route to something and not just another link. The submenus could of course be on the page to which they relate as at https://theparsonage.co.uk.

Attachment 127469

If you're still stuck then create a vanilla NavBar and post it here.

Gary

---

Thanks Gary I'll check it out

LGF, I had forgotten how tedious it is to use the Xara built-in NavBars.
The worst aspect is having no visual feedback on any changes.
The next pain is the lack of Font choice (all of Bold).

Anyhow, I thought I would try a head-to-head with your described difficulty.

:pointAttachment 127476

I would be grateful for any suggestions as towards improve my offering and the general concept.

I made an early decision to require a selection to open a sub-menu rather than a hover.
This avoids the creation of lots of sub-menu layers.

Acorn

Hi Acorn,
Thanks very much for the trouble you went to - works perfectly on my phone.!
This whole JS thing is totally new to me - I am definitely NOT the ultimate menu maker! - I'm struggling to work out what code is attached to which part of the menu and what it does.
Your nav bar posted above seems like a "normal" Xara created nav bar, but with some JS in the body of the page?

<script>
function open(chain) {
$('.Menu').hide('fast');
$(chain).slideDown("slow");
return;
}
$('.Menu').hide();
</script>

Must admit that I don't under stand how you did this - to require a selection to open a sub-menu rather than a hover.

I'm going to use yours on my client's site and just change the button text and add links.
Have a safe and peaceful Sunday.

LGF

Hi Acorn,
Could you perhaps tell me how to edit the hamburger - it shows as a text Column not a graphic/curve?

Quote:

---

Originally Posted by letsgofishing

Hi Acorn,
Could you perhaps tell me how to edit the hamburger - it shows as a text Column not a graphic/curve?

---

It shouldn't be. If I recall, it's three bars with a transparent overlay.

Acorn

Quote:

---

Originally Posted by Acorn

It shouldn't be. If I recall, it's three bars with a transparent overlay.

Acorn

---

Here it is :) .... you used a shadow on the text for the mouse over....
Attachment 127485

@ LGF

The menu button you refer to (on the right hand side) was, as far as I can tell, placed in the JS LGF Mobile Menu XAR doc to demonstrate the problem you originally identified (at the beginning of this thread). That is: when you use a standard Xara submenu, from level 2 onwards you cannot remove the ">" at the beginning of each item name, or reverse its direction - this issue cannot easily be resolved (or at least I have not found a workaround yet). The menu button itself (in Acorn's example XAR) FWIW, is in part, a hamburger symbol offset vertically on a text line with an Fx wall shadow applied.

WRT to the original issue, I worked through Acorn's JS LGF example and created a vanilla edition to help with the understanding of how it works: The first picture shows two menus (refer to the XAR doc attached); the second picture shows that, in my example, there are 3 Javascript links, [1] opens (or makes the main menu visible), [3] opens the submenu and [2] a single button/ link closes both menus.

Attachment 127487 Attachment 127488

The vanilla edition of the JS LGF NavBar does not have any MouseOver effects (they are redundant on a touch device, other than to indicate the page you are visiting). You could simply copy and paste the NavBar to your own XAR doc, remembering of course to place the Javascript code into the website HTML body.

The JS Navbar must be repeated on each page (where you want to use it), as too must the JQuery button with the name Uses JQuery.

The only problem you have to manage is the JS NavBar resides on the MouseOff layer, and while it is hidden from view when exported and previewed, if you want to place page content behind it (on the MouseOff layer), you need to simply drag the NavBar off the page while you edit your document, and remember when you drag it back to make sure it is at the front. Other than that, this is slick solution to Xara's submenu NavBar's failings.

Hopefully, this sets you off in the right direction.

Here is the link to Acorn's presentation on the Ultimate Xara NavBar http://acorn.xara.hosting/NavBars/#xl_xr_page_index

Gary

Wow InitioStar - I really owe you a debt of gratitude.
Many thanks for putting it down step by step - I'm sure I'll get it!
LGF

@Initiostar

Most instructive - Getting there slowly - what I REALLY like is the ability and freedom to design the menuas I choose !!! I can use this as a template for all future menus :cool:

A couple of small things - I've copied and modified your original file - please see attachment.

1. I notice that when you click on Resources, Menu Ham 2 slides out as it should but Menu Ham1 disappears briefly and then reappears - can this be changed so that it doesn't "retract"?
2. My client definitely wants to go with 1 long web page. I've created links to the headings and it works just fine but if you then go back to the top of the page (or scroll), the menus haven't
retracted. Where as on your multi page site it's perfect. I had the same problem with my original Xara menu, but once you touched anywhere on the screen, it retracted .... Is there a way to
fix this - I really need to as 90% of his potential clients will be using a cell phone to access the site.
3. I tried my own little version to understand the creative process - any reason it doesn't slide down just like yours? the words sort of scroll (reveal)?
Many thanks,
LGF

Quote:

---

Originally Posted by letsgofishing

@Initiostar

Most instructive - Getting there slowly - what I REALLY like is the ability and freedom to design the menuas I choose !!! I can use this as a template for all future menus :cool:

A couple of small things - I've copied and modified your original file - please see attachment.

1. I notice that when you click on Resources, Menu Ham 2 slides out as it should but Menu Ham1 disappears briefly and then reappears - can this be changed so that it doesn't "retract"?
2. My client definitely wants to go with 1 long web page. I've created links to the headings and it works just fine but if you then go back to the top of the page (or scroll), the menus haven't
retracted. Where as on your multi page site it's perfect. I had the same problem with my original Xara menu, but once you touched anywhere on the screen, it retracted .... Is there a way to
fix this - I really need to as 90% of his potential clients will be using a cell phone to access the site.
3. I tried my own little version to understand the creative process - any reason it doesn't slide down just like yours? the words sort of scroll (reveal)?
Many thanks,
LGF

---

[1] The call to make Ham2 visible is actually a call to make both Ham1 & Ham2 visible, so Ham1 is refreshed at the same time - that's just the way the code works. You could just call Ham2 and then ONLY Ham2 would become visible which seems counter-intuitive to what you would want.

[2] The original design response assumed multiple pages and works as expected because each link takes you to another page. With your single page, you are looking to link to an on-page anchor /text heading and close the menu. This requires some addition code as you want to achieve both actions simultaneously.

[i] The simplest resolution to the challenge is to accept that the NavBars reside at the top of the page, are not sticky and therefore as you link to you anchor/ heading they scroll upwards and out of view. The trick then is to bring them back in view by using the menu button set to "top of page"

[ii] In the JS Example (attached) the menu button code would be javascript: open('.Ham1');xr_top();

Attachment 127507

[3] You have created three separate text lines, create a text area (box) and it works as expected.

[4] You can create your single page solution using vanilla Xara, same principles. Example attached with some added animation that resolves the Ham1 refresh issue.

Attachment 127511

[5] In both examples I have added a sticky top of page button that sits on the right-side of the screen. This creates a permanent button for top of page - you don't need more than one.

Hopefully, this gets you back on track.

Gary

Thanks so much Initiostar for your patience and explanations.

Quote:

---

Originally Posted by Acorn

LGF, I had forgotten how tedious it is to use the Xara built-in NavBars.
The worst aspect is having no visual feedback on any changes.
The next pain is the lack of Font choice (all of Bold).
Anyhow, I thought I would try a head-to-head with your described difficulty.

:pointAttachment 127476

I would be grateful for any suggestions as towards improve my offering and the general concept.
I made an early decision to require a selection to open a sub-menu rather than a hover.
This avoids the creation of lots of sub-menu layers.
Acorn

---

i have modified the "engine" code to make the menus open and close more tidily: https://www.talkgraphics.com/showthr...805#post626805.

This was a request in:

Quote:

---

Originally Posted by letsgofishing

1. I notice that when you click on Resources, Menu Ham 2 slides out as it should but Menu Ham1 disappears briefly and then reappears - can this be changed so that it doesn't "retract"?
2. My client definitely wants to go with 1 long web page. I've created links to the headings and it works just fine but if you then go back to the top of the page (or scroll), the menus haven't
retracted. Where as on your multi page site it's perfect. I had the same problem with my original Xara menu, but once you touched anywhere on the screen, it retracted .... Is there a way to
fix this - I really need to as 90% of his potential clients will be using a cell phone to access the site.
LGF

---

The approach for forcing the NavBar to close when jumping to a different location in a Vertical Supersite is a little more problematic as it is still the same page, just with different parts showing.

The trick is to change the jump link to something like javascript: open(''); void window.location.replace("#xl_xr_page_index_3");
The URL can be a Xara construct as shown or a Named Anchor (#trigger) or a fully-qualified URL to a different site.
This closes the NavBar and then jumps to the required place.

Sorry but it is code that is fairly sensible.

Acorn

Quote:

---

Originally Posted by Acorn

i have modified the "engine" code to make the menus open and close more tidily: https://www.talkgraphics.com/showthr...805#post626805.

This was a request in:


The approach for forcing the NavBar to close when jumping to a different location in a Vertical Supersite is a little more problematic as it is still the same page, just with different parts showing.

The trick is to change the jump link to something like javascript: open(''); void window.location.replace("#xl_xr_page_index_3");
The URL can be a Xara construct as shown or a Named Anchor (#trigger) or a fully-qualified URL to a different site.
This closes the NavBar and then jumps to the required place.

Sorry but it is code that is fairly sensible.

Acorn

---

Many thanks Acorn, I will definitely try that!