Welcome to TalkGraphics.com
Page 1 of 3 123 LastLast
Results 1 to 10 of 21
  1. #1
    Join Date
    May 2014
    Posts
    6

    Default Mobile Navigation Menu

    Many modern mobile websites have adopted a similar style of navigation. Specifically, an icon with 3 horizontal lines.

    The Xara website http://www.xara.com/us/web-designer/features/ uses this style (when viewed on a smaller screen).

    Further, when opening, it looks like a full-width vertical accordion.

    I have not seen this style in any of the Xara templates.

    Does anyone know how to replicate this?

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Mobile Navigation Menu

    Hi dportner,

    This Xara site is not created within Xara, it uses php and is probably a cms site. It's not cheating, more horses for courses.

    Having said that the menu structure could be reproduced fairly closely within Xara.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Mobile Navigation Menu

    If you're creating a menu for mobile devices you don't have to worry about mouse over. Create a layer, call it menu, then create individual buttons that link to your pages.

    Create the three horizontal rectangles icon for the menu and add that to the mouse off layer and link the icon to the menu layer. When the visitor taps the menu icon, the menu layer appears.

    Attached is an example.
    Attached Files Attached Files

  4. #4
    Join Date
    May 2014
    Posts
    6

    Default Re: Mobile Navigation Menu

    Thanks Gary!

    The example you provided is exactly what I was looking for

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Mobile Navigation Menu

    Ah, whilst I was working on a similar look Gary posted. Sometimes I prefer to have an individual page for mobile variants which I call "menu" which i often find easier to edit if your wanting up/down closers for "drop-down" menus.

    Here's my solution: LINK http://www.parkeston.com/!up-down-menus/
    Attached Images Attached Images  
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Mobile Navigation Menu

    Cool Egg!

    dportener - You can also create a single button Navigation Bar with the Navigation Bar Tool in the Website Properties fly out.

  7. #7
    Join Date
    May 2014
    Posts
    6

    Default Re: Mobile Navigation Menu

    Gary and Acorn. You are truly gentlemen for taking the time and effort to help me and others.

    Thanks for your help, it is very much appreciated.

  8. #8
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Mobile Navigation Menu

    Egg and I, and all the moderators and members are always happy to help when we can.

  9. #9
    Join Date
    Jul 2011
    Posts
    24

    Default Re: Mobile Navigation Menu

    Forgive my ignorance, but how do you link the menu icon, in mouse off layer, to the menu layer??

    Thanks

  10. #10
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Mobile Navigation Menu

    If you're using a Menu layer, as per Gary's attached file, do so in the Web Properties / Link select pop-up layer and select menu from the drop-down and click Apply.

    If you merely want to use a navbar, see attached web file.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	link2.png 
Views:	435 
Size:	24.1 KB 
ID:	108599  
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Tags for this Thread

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
  •