Welcome to TalkGraphics.com
Page 2 of 2 FirstFirst 12
Results 11 to 17 of 17
  1. #11
    Join Date
    Apr 2018
    Location
    London
    Posts
    310

    Default Re: Drop down arrow direction niggle.

    @ 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.

    Click image for larger version. 

Name:	JS - LGF Mobile JS Mobile Menu.PNG 
Views:	9 
Size:	57.9 KB 
ID:	127487 Click image for larger version. 

Name:	JS - LGF NavBar Links.jpg 
Views:	11 
Size:	69.6 KB 
ID:	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
    Attached Files Attached Files
    Last edited by Initiostar; 29 July 2020 at 08:38 AM.

  2. #12
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    627

    Default Re: Drop down arrow direction niggle.

    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

  3. #13
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    627

    Thumbs up Re: Drop down arrow direction niggle.

    @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

    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
    Attached Files Attached Files

  4. #14
    Join Date
    Apr 2018
    Location
    London
    Posts
    310

    Default Re: Drop down arrow direction niggle.

    Quote Originally Posted by letsgofishing View Post
    @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

    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();

    Click image for larger version. 

Name:	JS_LGF_v2Mod+.PNG 
Views:	4 
Size:	32.2 KB 
ID:	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.

    Click image for larger version. 

Name:	NonJS_LGF_v4.PNG 
Views:	6 
Size:	34.6 KB 
ID:	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
    Attached Files Attached Files
    Last edited by Initiostar; 30 July 2020 at 02:30 PM. Reason: Added v3 - complete working example

  5. #15
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    627

    Default Re: Drop down arrow direction niggle.

    Thanks so much Initiostar for your patience and explanations.

  6. #16
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,783

    Info Re: Drop down arrow direction niggle.

    Quote Originally Posted by Acorn View Post
    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.

    Attachment 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 View Post
    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
    Last edited by Acorn; 31 July 2020 at 04:04 PM.
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  7. #17
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    627

    Default Re: Drop down arrow direction niggle.

    Quote Originally Posted by Acorn View Post
    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!

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •