Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    623

    Default 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?

    Click image for larger version. 

Name:	menu.jpg 
Views:	25 
Size:	48.1 KB 
ID:	127465

  2. #2
    Join Date
    Apr 2018
    Location
    London
    Posts
    309

    Default Re: Drop down arrow direction niggle.

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

    Click image for larger version. 

Name:	menu.jpg 
Views:	25 
Size:	48.1 KB 
ID:	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.

    Click image for larger version. 

Name:	Mobile Menu MouseOver Highlight.png 
Views:	19 
Size:	116.3 KB 
ID:	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

  3. #3
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    623

    Default Re: Drop down arrow direction niggle.

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

  4. #4
    Join Date
    Apr 2018
    Location
    London
    Posts
    309

    Default Re: Drop down arrow direction niggle.

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

    Click image for larger version. 

Name:	Animated Mobile Menu.PNG 
Views:	16 
Size:	37.1 KB 
ID:	127469

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

    Gary
    Attached Files Attached Files

  5. #5
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    623

    Default Re: Drop down arrow direction niggle.

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

    Click image for larger version. 

Name:	Animated Mobile Menu.PNG 
Views:	16 
Size:	37.1 KB 
ID:	127469

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

    Gary
    Thanks Gary I'll check it out

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

    Info Re: Drop down arrow direction niggle.

    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.

    JS - LGF Hamburger Menu.xar

    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
    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. #7
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    623

    Default Re: Drop down arrow direction niggle.

    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

  8. #8
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    623

    Default Re: Drop down arrow direction niggle.

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

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,766

    Default Re: Drop down arrow direction niggle.

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

  10. #10
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    623

    Default Re: Drop down arrow direction niggle.

    Quote Originally Posted by Acorn View Post
    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....
    Click image for larger version. 

Name:	menu.jpg 
Views:	12 
Size:	61.9 KB 
ID:	127485

 

 

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
  •