Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 21

Hybrid View

  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,486

    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,486

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

  8. #8
    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:	434 
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

  9. #9
    Join Date
    Feb 2014
    Location
    Toronto, Canada
    Posts
    792

    Default Re: Mobile Navigation Menu

    Hi Egg, I tried your hamburger-menu navbar and the menu on page 1 (home page) was not working whereas the page 2 and 3 were, so I looked at the layers gallery for page 1 and noticed that the navbar group was on the pasteboard background layer, so I moved it to the mouse off layer and all is good. Thank you for the sample

    Ciao

    Roly

  10. #10
    Join Date
    Dec 2017
    Posts
    17

    Default Re: Mobile Navigation Menu

    Quote Originally Posted by gwpriester View Post
    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.
    Great menu method and just what I am looking for. I ran it and then created all the pages (5) but I cannot seem to get it to work on the other pages I figured I should copy and paste the menu bar icon to each page rather than repeat it. The I coppied the menu layer to each page and assigned each link but it doesn't like it spurious things are happening. Am I supposed to be creating a Navigation menu using the Tool? Perhaps you could put a version up with an extra page linked to the menu so I can work it out please. I am using Xara Web Designer Premium 16.2.0.56957 DL x64 Jun 5 2019

 

 

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
  •