making buttons for nav bar - mouseOver question

[Initiostar]

There is no doubt there are many ways to manage a scenario where the designer wants to create working drop-down menus. Where the drop-down menu has numerous links, the classic vertical down-down can be cumbersome to view and manage. Here is one example where a drop-down menu tabs can be a page in its own right. This allows the designer to have any number of links placed on the menu, without the need to replicate a myriad of pop-ups on each page:

https://initiostar.co.uk/demo/simpleHeader/index.htm. The upside here is that one can create a transition to a mobile variant without too much effort.

Where though, a designer wants to create a classic drop-down menu, there are again lots of variations that can be deployed - this is an example where each drop-down menu is a pop-up, but it needs to be repeated on each page: https://initiostar.co.uk/demo/submenu/. The alternative to repeating a sub-menu on each page, would be a modification of Acorn's solution for having a pop-up on one page that is accessible from other pages - a Gary P request that I modified to use a simple button (text and shape soft-grouped), rather than the Xara Navbar : https://initiostar.co.uk/demo/common-layer/index.html. [ Without the Navbar it might be possible to simplify the code].

In taking a fresh look at all this, I discovered the Xara bug we identified many years ago is still there! Create any shape, add a text line centered, copy to the MouseOver layer, modify and soft-group. Add a link and preview - the MouseOver elements shift to the right! Yes, it may only happen when you have Scale-to-fit-Width, but it can catch you out for sure. Age-old solution here, left-justify the text and manually centre:

Working example using MouseOff, MouseOver and MouseDown: https://initiostar.co.uk/demo/pagemenu/

The corollary to the latter example is that I have frequently been asked to match the menu behavior of a desktop variant and mobile variant, whereby the visitor can see from the menu what page they are on; a designer can achieve this on the desktop by having a MouseOver and MouseDown state that are the same; the mobile will show a MouseOver link (in a menu) until another link is executed.

Several real world examples: https://theparsonage.co.uk/ and https://initiostar.co.uk/. Also worth a look at a CSS idea (thanks to Acorn) https://initiostar.co.uk/demo/jq-menu/

Trust this helps to get the ideas flowing.

[bwood]

Gary. Love what you did on The Parsonage. Especially https://theparsonage.co.uk/events.html

I get a lot of fundraising posters that really do add to clutter. This is a majestic and tidy idea.

-Bill

[Chris M]

Age-old solution here, left-justify the text and manually centre:

Age-old to you, brand new to me! I engaged the age-old human reaction of giving up on MouseOver long ago. I can now revisit. Thank you.

I have, yet another, angle of attack. I made a site with a LOT of content, and I dislike sub-menus. I also didn't want the project file to become unwieldy, so I chopped it up into mini sites.

The site itself: CC Saint-Clair. Social realism and holistic writings, roman

And a picture of the folder structure. No drilling down through sub-menus. Green are sections of the main, and are little sites in their own right. Red are 'storage' for the PDFs, magazine and radio reviews etc.

[Acorn]

Age-old to you, brand new to me! I engaged the age-old human reaction of giving up on MouseOver long ago. I can now revisit. Thank you.
I have, yet another, angle of attack. I made a site with a LOT of content, and I dislike sub-menus. I also didn't want the project file to become unwieldy, so I chopped it up into mini sites.
The site itself: CC Saint-Clair. Social realism and holistic writings, roman
And a picture of the folder structure. No drilling down through sub-menus. Green are sections of the main, and are little sites in their own right. Red are 'storage' for the PDFs, magazine and radio reviews etc.

Chris, kudos for splitting your site, it is a powerful technique.

You could readily use my page mega-menu approach for your detailed site map. Currently, I have no sense of where I am or going and only when hitting page bottom do I see the Site Map/Index link.
If you make the same Link a Hamburger, sticky top of page, and add the Close icon back link then you will be cooking with gas.

From https://ccsaint-clair.com.au/site-map.html, I am finding a lot of 404s.
It is not clear that some Links are to PDFs, external links or sub-sites, you need an icon for each and any jump externally or to a document needs to open into a new Tab.

Acorn

[Chris M]

You're right. I desperately need to revisit the site map page since I split the site...watch this space.

[bwood]

I can now see the benefits of a CSS menu. I'm working with a 15 page site with 10 single state buttons, and two drop down menus. I went with single state buttons and pop ups basically because of my minimal knowledge of CSS, and I have to put my museum site on an extreme diet. Here are my labor intensive findings.

- Pop Up layers from two buttons must be copied and pasted separately into different pages.
- The buttons in the pop up layers are soft grouped - and appear at different page positions. (this might be setting someplace) maybe lock.
- On each page the buttons must be linked to the pop up layers.

Very laborious. Although since I'm dropping 3 pages, and combining them into one, and eliminating a few things along the way, (the extreme diet) the site is noticeably faster upon loading.

The page preview is quite slow as I continue to test. I'm not sure why. It gets slower the more previews I try. That's rectified (for me) but opening and closing the program.

- Bill

[Acorn]

The page preview is quite slow as I continue to test. I'm not sure why. It gets slower the more previews I try. That's rectified (for me) but opening and closing the program. - Bill

Bill, if you have WebP enabled disable while testing and only on when publishing.

Never had this slow down, except when there are a lot of links that are repeating on all pages.
Xara fixed this a few versions back. Xara did muck it up all over then recorrected but it has been fine in XPro+ for well over a year now.

Acorn

[Egg Bramhill]

The page preview is quite slow as I continue to test. I'm not sure why. It gets slower the more previews I try. That's rectified (for me) but opening and closing the program.

Yes, this is a bug in Xara that's plauged me for years Bill. Eventually the xar file will just cease rendering and crash Xara. As you state the only cure is to save and close Xara. Reopening eliminates this issue for a while but it returns.

One other I've alway had is opening Utilities / Options. This take eight seconds to open the Options window!

[Acorn]

@Bill, in reply to a PM:

Create a wide box for the HTML Code - put that into the Placeholder Body. Set the Placeholder to be Repeat on all pages. It needs to be deep enough to handle the showing of the tallest submenu.
The CSS Code goes into Website > Head.
The JavaScript Code goes into Website > Body.

As the code uses an id for 'menu' and 'responsive-menu', you need to check the codes generated work in a Variant. I have been lucky so far or perhaps Xara has sneaked in a fix after so many years.

Default RM in a Web Block design: CSS+JS - Responsive Menu.xar. The JS is probably optional.

Acorn