Welcome to TalkGraphics.com
Results 1 to 10 of 19

Hybrid View

  1. #1
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    1,019

    Default making buttons for nav bar - mouseOver question

    I was rather proud of myself until .....

    I've constructed a number of buttons in a row - you could call that the nav bar. In the photos you can see the xara nav bar I'm replacing in the bottom of the pics. I have copied and pasted in place the elements for the mouse-over state, but they're not showing up on the mouse over layer which is turned on.

    One pic is the mouseOff and the other is the mouseOn.

    Perhaps its screen fatigue. They are all individual buttons - but there is no mouse-over state.

    On the mouse-off state, which I've closed, you can see the labor of my efforts. (rectangles and text) All I want is a simple color change in the background of the buttons for the mouse over state.

    The sub menus are also shown in the picture - those are pop ups.

    All this is to alleviate the time it takes for a ready made nav bar to load. I'm lost on this one. Thanks for your help.

    Bill
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	mouse off state.jpg 
Views:	54 
Size:	112.4 KB 
ID:	134544   Click image for larger version. 

Name:	mouseOver state.jpg 
Views:	54 
Size:	61.8 KB 
ID:	134545  

    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  2. #2
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,791

    Default Re: making buttons for nav bar - mouseOver question

    A couple of examples and a .xar project file for you to fiddle with.

    I find using the MouseOver Layer to be extra steps for little gain, and they often don't line up correctly, especially with Scale To Fit Width.

    If you want to do the MouseOver:
    Create a rectangle, add text, create your link.
    Select text and rectangle and copy.
    Paste In Place on the MouseOver layer and do whatever edits you want.
    Select all 4 objects on both layers and create a soft group (ctrl+alt+g).
    Repeat with all buttons.

    Link to some ideas. The project file is attached further down. >>> BUTTONS <<<
    Link to a fancy menu I made years ago for jukebox style of selection >>> MENU <<<

    The project file for the Buttons link...


    Attached Files Attached Files

  3. #3
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    1,019

    Default Re: making buttons for nav bar - mouseOver question

    Thanks Chris. I have added links to them all, and must have missed something somewhere. I think I soft grouped the MouseOf before I pasted in place on the mouseOver.

    I do have a question. When I repeat these on all pages, will the pop ups on the sub menus carry thru to all pages, or do the pop ups have to be repeated as separate elements?

    Bill
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  4. #4
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,791

    Default Re: making buttons for nav bar - mouseOver question

    If, by pop-ups, you mean the layers that make up your sub menus, then you will have to select everything on that layer and repeat on all pages. Tip: I like to 'Solo' the layer, so I don't accidentally capture something on the MouseOff layer.

    If, by pop-ups, you mean the MouseOff layer, then they will automatically repeat as they will be part of a soft group.

  5. #5
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    1,019

    Default Re: making buttons for nav bar - mouseOver question

    Thanks Chris. I do seem to recall not being able to repeat pop ups as sub menus from Gary P. I’ve got a lot of pages but I think the payload will be reduced drastically by building nav bars. For this site in particular, with the number of pages, sub menus and complexity I may dispense with roll over buttons.

    I did html years ago - and I really should dig into CSS again. Unfortunately I never grasped the concept.

    Those examples are terrific Chris. Thanks for including.

    -Bill
    Last edited by bwood; 11 February 2024 at 04:49 PM.
    Bill Wood
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

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

    Default Re: making buttons for nav bar - mouseOver question

    Following on from Chris's points, I've created two navbars neither using Xara's NavBar tool.

    One uses mouse-over animations to open a pop-up layer with a different coloured button & text. It works fine but is a pia to create and work with because of all the pop-up layers required. It does fall down on drop-down buttons not allowing for mouse-over effects. It would also get really messy if you needed to amend the menu. It would be easier to use if the menu was only created once and placed into a placeholder but that's beyond this stage at present.

    The second uses CSS Responsive Menu Generator suggested by Acorn. This is a far better alternative in my opinion, with no need for multiple pop-up layers and fairly simle to amend the html text in the placeholder to amend the button titles and links.

    I'll attach the xar file.

    VIDEO

    DEMO
    Attached Files Attached Files
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb 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
  •