Welcome to TalkGraphics.com
Results 1 to 10 of 11

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,745

    Info Simple Rollover Layered Menus

    A number of people get confused when creating a NavBar with rollover effects.

    Here is a simple demonstrator: Xara - Simple Rollover Layered Menu.xar

    Try creating a Yellow button that matches the red one with its sub-menu.

    This approach allows you to be highly creative but you need to master the fundamentals:

    1. A button shape on MouseOff.
    2. A collection of shapes in a new Layer.
    3. The button has a Web Animation effect to the Layer.
    4. The button needs to have a fully connected area with the pop-up objects so use a Transparent undershape on the Layer.


    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    Default Re: Simple Rollover Layered Menus

    Now there's a coincident Acorn. For the past couple of hours I've been working on a xar you created on another thread and I know you know how to create buttons without images, I've used almost the same same technique you mention, the 99% transparent button. I like to use this method as it eradicates Xara's outdated navbars/buttons being converted into images, especially now we have 'fit to width'.

    LINK

    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

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,745

    Default Re: Simple Rollover Layered Menus

    Quote Originally Posted by Egg Bramhill View Post
    Now there's a coincident Acorn. For the past couple of hours I've been working on a xar you created on another thread and I know you know how to create buttons without images, I've used almost the same same technique you mention, the 99% transparent button. I like to use this method as it eradicates Xara's outdated navbars/buttons being converted into images, especially now we have 'fit to width'.

    LINK

    As you say Egg, snap.

    When I "corrected" the other one, I kept finding twitches of things not quite right so I decided to build a simpler one the way i would consider sensible.

    The lack of groups being turning into images is second nature for me now.
    I do commend your Diamond. Rather than Skew the box I would create a square, turn 45deg and then just flatten.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    Default Re: Simple Rollover Layered Menus

    I do commend your Diamond. Rather than Skew the box I would create a square, turn 45deg and then just flatten.
    That's exactly what I did Acorn ??
    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

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,745

    Default Re: Simple Rollover Layered Menus

    Quote Originally Posted by Egg Bramhill View Post
    That's exactly what I did Acorn ??
    Egg,

    The About Diamond is angled @ 13.679deg.
    The rest are all different @ 7.766deg, @ 9.801deg, @ 11.811deg, @ 12.138deg & @ 14.34deg.

    Set them all to 0deg and you have skewed boxes.

    Skew is hard to control whereas rotate and squash is easy to replicate and describe.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    Default Re: Simple Rollover Layered Menus

    ... whereas rotate and squash is easy to replicate and describe.
    Rotate & Squash is how I did it Acorn. Can you try doing the same and note the rotate angle changes from 45 downwards?

    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

  7. #7
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    877

    Default Re: Simple Rollover Layered Menus

    Quote Originally Posted by Acorn View Post
    A number of people get confused when creating a NavBar with rollover effects.

    Here is a simple demonstrator: Xara - Simple Rollover Layered Menu.xar

    Try creating a Yellow button that matches the red one with its sub-menu.

    This approach allows you to be highly creative but you need to master the fundamentals:

    1. A button shape on MouseOff.
    2. A collection of shapes in a new Layer.
    3. The button has a Web Animation effect to the Layer.
    4. The button needs to have a fully connected area with the pop-up objects so use a Transparent undershape on the Layer.


    Acorn
    HI Acorn.

    To add labels to the buttons - just make visible and add text? No grouping?

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,745

    Info Re: Simple Rollover Layered Menus

    Quote Originally Posted by letsgofishing View Post
    HI Acorn.
    To add labels to the buttons - just make visible and add text? No grouping?
    LGF

    There are two answers to your question. Yes and No.

    As the objects are all on different Layers, a (Hard-)Group is not possible as everything gets flattened onto one layer.

    1. If you are moving the button about then you should Soft-Group with its partnering objects on the pop-up layer for that button.
    2. For the button pop-up layer object, you can Hard-Group them but you need to add a special Name of htmltext. I prefer Soft-Grouping but editing is a little harder as there is no Edit Inside option.
    3. If you are comfortable with the potential accidental displacement that might happen, you do not have to group anything just Preview and check, check, check.

    Acorn

    P.S. As you can add anything to a pop-up layer, you are not constrained by boxes and text. Things could be icons, pictures, placeholders, ...
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #9
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    877

    Default Re: Simple Rollover Layered Menus

    Many thanks for reply Acorn - much appreciated as usual.

 

 

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
  •