Quiet aound here lately. Perhaps we could discuss alternative navbars?

I've never been a great lover of Xara's navbars. Firstly they create two images for each button that rendered as bitmaps and are blurry. So a smallish menu can create quite a few image files that the server has to request slowing down the page load.

I prefer to create my own navbars especially as the latest Xara apps can create svg versions thus by-passing the need to download fuzzy bitmaps and speed up the sites rendering.

In a recent thread SueB asked about "I never did get how to make the hamburger navigation properly"...

I created an alternative using only Xara which I liked a lot as it gave me design control. There was two ways to implement this navbar:

1: Repeat the navbar layers on every page. Could become tiresome, repeat on every page etc.
2: Load the navbar menu within each page via an iframe call to load 'menu.htm'.

I prefer the ifame route.

However I'm finding that the menu.htm page is causing problems. I can Ctrl+F5 which refreshes the page containing the menu.htm iframe but does not refresh the actual menu.htm within the page.

How can I ensure the menu.htm file is updated each time it's called? It's a very tiny page.



LINK to my site with a iframe menu.

I hit your 'burger'
which opened the iframe
then rt mouse click and reload was option

ref iFrame:
I used for years and ALWAYS was told that there were BAD to use
(even though always worked great for me)
anyway = you are all here much better at this than me
but why use an iframe? as opposed to lining to a page in your domain somewhere/?

Thanks @egg. Yes a little quiet but it’s summer.
Thanks for the iframe example.
I prefer to use a pop up layer. I can control the fade in and fade down and perhaps you can do that with I frames as well.
I’d love Xara to update some ready made nav bars in the catalogue. Especially a drop down Hamburger. It would be so handy.
I think I’ll head over to the suggestion box!

Egg, I covered this once before but I cannot nail it down. Found it - https://www.talkgraphics.com/showthr...196#post647196.

Basically, there is a JS trick along the lines of:

Code:

---

<iframe id="iframeMenu" src="https://parkeston.com/tg/iframe-menu/menu.htm" width="100%" height="100%" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script>
  var iframe = document.getElementById('iframeMenu');
  iframe.src = iframe.src;
</script>

---

Here is my take on the concept of (mostly Xara functional) NavBars: Attachment 132295

• At the simplest level a set of "buttons" using just Website link colours
• Adding some small CSS, adds a button effect
• Adding in JavaScript Links to open and close sub-menus - a bit like Xara's undocumented popup mechanism for Layers
• A little more CSS to offer transition effects
• Robust in Variants
• Easy to just use !Menu layer for all the Navbar furniture - I kept separate for instructional purposes here
• Each page can have Menu-item specific objects, making presentation extremely flexible.

Acorn

Sorry for the late reply, been away for the week-end.

@ 3D

Quote:

---

but why use an iframe? as opposed to lining to a page in your domain somewhere/?

---

I take it you mean linking. I opened the thread just to try to start a discussion re navbars and I could either handle tis in two ways:
Having a seperate page within the xar file containing the menu. Then invoke it either of two ways:

1: Have the hamburger menu open a menu.htm page via a link Same Frame (_self)
2: Have the hamburger menu open a pop-up layer containing an iframe Same Window(_top)

I found on the second choice Ctrl+F5 refreshed the main window but not the menu iframe.

I can confirm that Acorns excellent JS trick worked perfectly in overcoming this issue.

@ Bill

Quote:

---

I’d love Xara to update some ready made nav bars in the catalogue. Especially a drop down Hamburger. It would be so handy.

---

I couldn't agree more. Xara is now capable of exporting buttons (or other shapes) as svg's so why are we stuck with inferior mushy bitmap images that increase the page download speed.

@Egg & Acorn,

Played around with Acorn's jQuery ideas and created a mobile variant driven from the standard hamburger, it provides for standard links where a submenu is not required and uses jQuery for the submenus:

e.g. https://initiostar.co.uk/demo/jq-menu/index.htm

Mostly, I use the mobile menu popup layer convention with either additional submenu popups as required, or on-page submenus e.g. https://theparsonage.co.uk/index.htm (mobile variant).

Acorn's jQuery model offers a lot of flexibility. My efforts here: Attachment 132325 - my limited knowledge works, but I expect there could be an improvement.

@ Acorn.

Thanks for the JS trick code that fixes the problem.

I like your Modern Menu solution. I'll need to look at it a bit more to follow you ;)

That looks like a sweet menu Gary. I'll look further tomorrow.

Quote:

---

Originally Posted by Initiostar

@Egg & Acorn,
Played around with Acorn's jQuery ideas and created a mobile variant driven from the standard hamburger, it provides for standard links where a submenu is not required and uses jQuery for the submenus:
e.g. https://initiostar.co.uk/demo/jq-menu/index.htm
Mostly, I use the mobile menu popup layer convention with either additional submenu popups as required, or on-page submenus e.g. https://theparsonage.co.uk/index.htm (mobile variant).
Acorn's jQuery model offers a lot of flexibility. My efforts here: Attachment 132325 - my limited knowledge works, but I expect there could be an improvement.

---

Gary, thank you for a nice disign.
I would also try using slideToggle() over slideDown().
Once you are engaged, using animate() is very powerful and similar to what I was doing with anime.js.

Acorn