Re: Link text on popup layer
Quote:
Can you link text on a popup layer to another page?
Yes - just use the link dialogue box - recheck your intended page link first - if unsuccessful, then maybe post a picture of what you are trying to achieve?
1 Attachment(s)
Re: Link text on popup layer
Here is a sample file. The link 'About' when rolled over opens a menu popup layer. The first word in the list 'Welcome' is linked to the Welcome page, yet it does not allow me to click it to go to that page. I feel I must be missing something very simple. SMH
Attachment 127927
Re: Link text on popup layer
And when I rollover the word "Welcome" in the drop down menu, shouldn't it be turning the set mouseover color? What am I missing here?! I think my brain must not be working! :rolleyes:
Re: Link text on popup layer
Hi Sorengen, having big issues getting my brain around this one too. I'll look at again tomorrow ;)
Re: Link text on popup layer
Thanks muchly! I appreciate it!
1 Attachment(s)
Re: Link text on popup layer
Quote:
Originally Posted by
sorengen
Here is a sample file. The link 'About' when rolled over opens a menu popup layer. The first word in the list 'Welcome' is linked to the Welcome page, yet it does not allow me to click it to go to that page. I feel I must be missing something very simple. SMH
Attachment 127927
1. On each of your submenus you have grouped a text area (where you have links) with the button and surrounding rectangle. This will not work - group the button and the rectangle ONLY and leave the text area as is (example XAR attached).
2. Avoid overlapping groups - your first two submenus overlapped (you can make all the layers visible to check they do not). Otherwise the MouseOver animation only works on the button area that is not bound by the overlapping group.
Quote:
And when I rollover the word "Welcome" in the drop down menu, shouldn't it be turning the set mouseover color?
It does now when you have a link, but you need to ensure you have a contrasting MouseOver colour in the Web Properties dialogue box.
I have put additional notes in the XAR doc - most relate to consolidating layers on to the MouseOff layer where appropriate and not having layers below the MouseOff layer. I would set the Scale-to-fit-Width maximum around 1280, not 2400 (tested on a 4K screen).
Hopefully this gets you restarted.
Gary
1 Attachment(s)
Re: Link text on popup layer
I too had a play along Gary's lines but I hated the centred Menu Items Gary chose and the sheer blockiness of your original menu itself.
I took the liberty of embellishing it into a tombstone, merely for dramatic emphasis, so that the design juices might flow for you.
Attachment 127933
Also if you check your original motif, you will find it has step changes that I am sure is an oversight.
Be consistent with your menubars: one is a click action, this one is a rollover.
I do like the fade bar but you could make it a graduated fade to give a depth to a scroll.
Acorn
Re: Link text on popup layer
Quote:
Originally Posted by
Initiostar
1. On each of your submenus you have grouped a text area (where you have links) with the button and surrounding rectangle. This will not work - group the button and the rectangle ONLY and leave the text area as is (example XAR attached). YES!!! THIS is what I forgot! UGH! Thank you so much! You are a LIFE SAVER!
2. Avoid overlapping groups - your first two submenus overlapped (you can make all the layers visible to check they do not). Otherwise the MouseOver animation only works on the button area that is not bound by the overlapping group. Ahhh, this gives me heartburn! Sigh... If I make it so the groupings don't overlap I have to make the text super small... otherwise I have to unevenly space out the buttons... and still make the text smaller to fit them on the page. (This client is wanting a very specific look and it seems I'm going to need to become a salesperson to convince them they really want something different. That's just not going to happen. :() Perhaps I could convince them no mouseover - just click and have drop down menus.
It does now when you have a link, but you need to ensure you have a contrasting MouseOver colour in the Web Properties dialogue box. - :smug:
I have put additional notes in the XAR doc - most relate to consolidating layers on to the MouseOff layer where appropriate and not having layers below the MouseOff layer. I would set the Scale-to-fit-Width maximum around 1280, not 2400 (tested on a 4K screen). I am using WOW Slider in the background so have to put that on a layer behind the 'sticky' header info and menus. Additionally, I tried setting the Scale-to-fit Width maximum to 1280 as you suggested, but then the site content does not reach the edges of my computer screen. The smallest maximum number I was able to set it to and still have it fit to the edge of my screen was 1600! :eek: I, too, do not like it looking so big, but I am unsure how to resolve this and still have everything fill the whole screen. Suggestions?
Hopefully this gets you restarted. I super appreciate the time you've taken to help me, thank you!
Gary
Joy (sorengen)
Re: Link text on popup layer
Quote:
Originally Posted by
Acorn
I too had a play along Gary's lines but I hated the centred Menu Items Gary chose and the sheer blockiness of your original menu itself.
I took the liberty of embellishing it into a tombstone, merely for dramatic emphasis, so that the design juices might flow for you.
Attachment 127933
Also if you check your original motif, you will find it has step changes that I am sure is an oversight.
Be consistent with your menubars: one is a click action, this one is a rollover.
I do like the fade bar but you could make it a graduated fade to give a depth to a scroll.
Acorn
Thanks Acorn! LOL - tombstone! :D Most of my creative juices are limited by client control... :rolleyes: And yes, oversight on the click vs. rollover - thanks for the 'good eye'! Personally, I could do without the fade bar... but again, the client... lol
Joy (sorengen)
Re: Link text on popup layer
Joy, on the menubar, I found it easy to stretch out the top menu item boxes to all the same width and match the rollover sub-menus to the same width.
It is by far, cleaner.
Acorn
Re: Link text on popup layer
Quote:
1. On each of your submenus you have grouped a text area (where you have links) with the button and surrounding rectangle. This will not work - group the button and the rectangle ONLY and leave the text area as is (example XAR attached). YES!!! THIS is what I forgot! UGH! Thank you so much! You are a LIFE SAVER!
2. Avoid overlapping groups - your first two submenus overlapped (you can make all the layers visible to check they do not). Otherwise the MouseOver animation only works on the button area that is not bound by the overlapping group. Ahhh, this gives me heartburn! Sigh... If I make it so the groupings don't overlap I have to make the text super small... otherwise I have to unevenly space out the buttons... and still make the text smaller to fit them on the page. (This client is wanting a very specific look and it seems I'm going to need to become a salesperson to convince them they really want something different. That's just not going to happen. ) Perhaps I could convince them no mouseover - just click and have drop down menus.
It does now when you have a link, but you need to ensure you have a contrasting MouseOver colour in the Web Properties dialogue box. -
I have put additional notes in the XAR doc - most relate to consolidating layers on to the MouseOff layer where appropriate and not having layers below the MouseOff layer. I would set the Scale-to-fit-Width maximum around 1280, not 2400 (tested on a 4K screen). I am using WOW Slider in the background so have to put that on a layer behind the 'sticky' header info and menus. Additionally, I tried setting the Scale-to-fit Width maximum to 1280 as you suggested, but then the site content does not reach the edges of my computer screen. The smallest maximum number I was able to set it to and still have it fit to the edge of my screen was 1600! I, too, do not like it looking so big, but I am unsure how to resolve this and still have everything fill the whole screen. Suggestions?
Hopefully this gets you restarted. I super appreciate the time you've taken to help me, thank you!
Joy, can you send a screenshot including the WOW slider background with the client's preferred outcome and I will take a look tomorrow. MouseOver has little effect in the mobile/tablet world (touch devices); the bigger challenge is to create a site that looks good across mobile, tablet and desktop. Forget about filling the screen - the pasteboard is your friend on the desktop and can help balance the visual image the visitor sees. I'd adopt Acorn's comments on the dropdown menus, but depending on what the WOW slider background is meant to achieve, it may be possible to manage the menus differently to better effect.
Gary
Re: Link text on popup layer
Quote:
Originally Posted by
Initiostar
Joy, can you send a screenshot including the WOW slider background with the client's preferred outcome and I will take a look tomorrow. MouseOver has little effect in the mobile/tablet world (touch devices); the bigger challenge is to create a site that looks good across mobile, tablet and desktop. Forget about filling the screen - the pasteboard is your friend on the desktop and can help balance the visual image the visitor sees. I'd adopt Acorn's comments on the dropdown menus, but depending on what the WOW slider background is meant to achieve, it may be possible to manage the menus differently to better effect.
Gary
Hi Gary, here is a link to the site in progress. http://www.designerjabs.com/CLCA-website/index.htm. Mind you, this is before any links have been added, or menu bars fixed according to the advice I've been given. I have been working on changes all day and have not updated since yesterday. But the look of the main menu bar is what the client wants. (Except, now I know why those mouseovers won't work until they rollover beyond where grouped objects overlap!) The client wants that rollover, they want the font large - easy to read, they want the buttons evenly spaced, they want those box colors in the back ground. I'm trying to figure out how to keep the font large without the groupings overlapping so that the rollover effect can still happen and the drop-down sub menu stays open to be able to click on the links. HA! Tall order, I know! Sigh... For now, I've changed the rollover to click and open popup, where the site visitor can then click on the links. However, once I got all the header elements working satisfactorily, I made them all repeating and voila! none of them work when viewed in the browser! Me thinks I've chewed off more than Xara can handle... :-O
Apparently, I'm uneducated in how to make use of my pasteboard... do tell! I will be making at least one mobile variant and realize it's going to be a bear. Sigh... The WOW Slider will not be used for that. And the menu bar will be completely different. However, it was suggested to me that once I have the main website completed, setting it to Scale-to-fit-Width could eliminate the need to create a tablet sized version, that I should only need to make a mobile phone-size version.
I'm happy to share the files I'm working with here, but not sure how to do that with the WOW Slider files and folders as part of the working document... other than a link to my G-Drive where I could share it. Thoughts?
1 Attachment(s)
Re: Link text on popup layer
Quote:
Originally Posted by
Acorn
Joy, on the menubar, I found it easy to stretch out the top menu item boxes to all the same width and match the rollover sub-menus to the same width.
It is by far, cleaner.
Acorn
Ok, I gave it a try. It seems the first menu rollover (About) works as it should... but then the rest of them don't! I really need this to work, and I just can't understand why it won't!??? I've attached the file.
Attachment 127945
2 Attachment(s)
Re: Link text on popup layer
Quote:
Originally Posted by
sorengen
Hi Gary, here is a link to the site in progress.
http://www.designerjabs.com/CLCA-website/index.htm. Mind you, this is before any links have been added, or menu bars fixed according to the advice I've been given. I have been working on changes all day and have not updated since yesterday. But the look of the main menu bar is what the client wants. (Except, now I know why those mouseovers won't work until they rollover beyond where grouped objects overlap!)
The client wants that rollover, they want the font large - easy to read, they want the buttons evenly spaced, they want those box colors in the back ground. I'm trying to figure out how to keep the font large without the groupings overlapping so that the rollover effect can still happen and the drop-down sub menu stays open to be able to click on the links. HA! Tall order, I know! Sigh... For now, I've changed the rollover to click and open popup, where the site visitor can then click on the links. However, once I got all the header elements working satisfactorily, I made them all repeating and voila! none of them work when viewed in the browser! Me thinks I've chewed off more than Xara can handle... :-O
Apparently, I'm uneducated in how to make use of my pasteboard... do tell! I will be making at least one mobile variant and realize it's going to be a bear. Sigh... The WOW Slider will not be used for that. And the menu bar will be completely different. However, it was suggested to me that once I have the main website completed
, setting it to Scale-to-fit-Width could eliminate the need to create a tablet sized version, that I should only need to make a mobile phone-size version.
I'm happy to share the files I'm working with here, but not sure how to do that with the WOW Slider files and folders as part of the working document... other than a link to my G-Drive where I could share it. Thoughts?
Joy,
I get it - your client wants a large high impact menu. Here is take 2 with a proportionally sized dropdown menu. (Churches may be better than Tombstones ;))).
Attachment 127946
1. Variants & Sizes - opinions vary, but now I use a 1200px width for the desktop, 480px for the mobile and Scale-to-fit-Width with a maximum scale at 1200px.
2. Pasteboard - you have your sticky logo to the left - I added a standard vertical Navbar to the right - squeeze the browser to see the effect. I sometimes use the pasteboard to create a cover for the browser (background photos and videos) dependent on the design approach (e.g. https://hypnosis-retreat.co.uk/ & https://www.dstiling.co.uk/ )
3. WOW Slider - at the moment, your menu will overlay the background WOW slider in one way or another - dependent on what other content you plan to put on that page - you could place a slider (or banner video) that sits below it.
You have a working demo again though - and you can easily change the coloured buttons back to your blue.
Gary
Re: Link text on popup layer
Quote:
Originally Posted by
Initiostar
Here is take 2 with a proportionally sized dropdown menu.
Really nice menu, Gary!
Re: Link text on popup layer
Quote:
Originally Posted by
Initiostar
Joy,
I get it - your client wants a large high impact menu. Here is take 2 with a proportionally sized dropdown menu. (Churches may be better than Tombstones ;))).
Attachment 127946
1.
Variants & Sizes - opinions vary, but now I use a 1200px width for the desktop, 480px for the mobile and Scale-to-fit-Width with a maximum scale at 1200px.
2
. Pasteboard - you have your sticky logo to the left - I added a standard vertical Navbar to the right - squeeze the browser to see the effect. I sometimes use the pasteboard to create a cover for the browser (background photos and videos) dependent on the design approach (e.g.
https://hypnosis-retreat.co.uk/ &
https://www.dstiling.co.uk/ )
3.
WOW Slider - at the moment, your menu will overlay the background WOW slider in one way or another - dependent on what other content you plan to put on that page - you could place a slider (or banner video) that sits below it.
You have a working demo again though - and you can easily change the coloured buttons back to your blue.
Gary
Incredibly beautiful, Gary! =D> Thank you so much! I really appreciate your help with this. I will take a look at how you put it together so I can see where I've gone wrong. I must learn.
1 Attachment(s)
Re: Link text on popup layer
Quote:
Originally Posted by
sorengen
Ok, I gave it a try. It seems the first menu rollover (About) works as it should... but then the rest of them don't! I really need this to work, and I just can't understand why it won't!??? I've attached the file.
Attachment 127945
Just must have had a bad day.
No links to Layers.
Don't use Snap to Grid.
:pointAttachment 127948
Acorn
Re: Link text on popup layer
@Initiostar & @Acorn - Ok, so the menu bars look great and are functioning when I open them, but as soon as I apply sticky the mouseover function works still but does not allow me to click on the links. Is there a way around this? A way to force it to allow me to have links but remain sticky?
2 Attachment(s)
Re: Link text on popup layer
Quote:
Originally Posted by
sorengen
@Initiostar & @Acorn - Ok, so the menu bars look great and are functioning when I open them, but as soon as I apply sticky the mouseover function works still but does not allow me to click on the links. Is there a way around this? A way to force it to allow me to have links but remain sticky?
I think you may have uncovered a conflict/bug with a MouseOver animation and Sticky objects on a popup layer - I ran a test which caused a sticky text area NOT to stick as expected! In my case text disappeared up the page on its popup. I will post what I believe the issue to be later, but in the meantime, I have a solution which I think works better than having your large menu bar hog a lot of permanent space on (at least) the index page.
Attachment 127968
Here is the principle (XAR attached):
1. Let the large menu bar scroll up the page and out of view, have a 'hamburger' icon with a link to Top-of-Page that retrieves the menu by scrolling it into view from the top.
2. Optionally: you can add a slim NavBar that is sticky at the top of the page (always visible) and it too can be used to bring any submenu into view (again by scrolling it into view from the top). In my case I have used a Javascript link to the Xara generated popup id: xr_cpu(n), where "n" is the internal number assigned to each popup. To find the correct number, create a link as normal (preview in Chrome/Firefox) and you will see that in the bottom left of your browser "javascript:xr_cpu(n)" for each popup. You then add the command to open at the top of page "javascript:xr_cpu(n);xr_top()"
Attachment 127971
3. For each page that your submenu's take the visitor, I would use a simple standard NavBar, similar to the slim NavBar in (2) - note the popup number (n) changes for each popup on each page.
When you come to do the mobile variant this approach might help.
I will post the conflict/bug later - it could just be me - and there is likely another way getting the large menu to stick correctly!
Re: Link text on popup layer
Quote:
Originally Posted by
Initiostar
I think you may have uncovered a conflict/bug with a MouseOver animation and Sticky objects on a popup layer - I ran a test which caused a sticky text area NOT to stick as expected! In my case text disappeared up the page on its popup. I will post what I believe the issue to be later, but in the meantime, I have a solution which I think works better than having your large menu bar hog a lot of permanent space on (at least) the index page.
Attachment 127968
Here is the principle (XAR attached):
1. Let the large menu bar scroll up the page and out of view, have a 'hamburger' icon with a link to Top-of-Page that retrieves the menu by scrolling it into view from the top.
2. Optionally: you can add a slim NavBar that is sticky at the top of the page (always visible) and it too can be used to bring any submenu into view (again by scrolling it into view from the top). In my case I have used a Javascript link to the Xara generated popup id:
xr_cpu(n), where "n" is the internal number assigned to each popup. To find the correct number, create a link as normal (preview in Chrome/Firefox) and you will see that in the bottom left of your browser "javascript
:xr_cpu(n)" for each popup. You then add the command to open at the top of page "javascript
:xr_cpu(n);xr_top()"
Attachment 127971
3. For each page that your submenu's take the visitor, I would use a simple standard NavBar, similar to the slim NavBar in (2) - note the popup number (n) changes for each popup on each page.
When you come to do the mobile variant this approach might help.
I will post the conflict/bug later - it could just be me - and there is likely another way getting the large menu to stick correctly!
Very nice, Gary! Thank you! I like both ideas, but like that slim bar at the top best. I think I will give that a try and make a case with the client for more 'real estate' space! Thanks so much for taking the time to help me find a working solution that I think I can 'sell'!
1 Attachment(s)
Re: Link text on popup layer
I've gone back to basics and I have a valid (no code) solution with Sticky and the use of (Hamburger-style) Xara NavBars acting as individual buttons.
:pointAttachment 127983
Just added in the About and Christain character buttons.
set up as Sticky so you can see the difference.
In the end only need the MousrOver for the rollover effect and no other Layers.
All done within the xara Navbar.
Tricks to remember:
- Text needs to be a centred Text Column.
- Group with a Back Box.
- Add Name of htmltext.
- Set up all colours as Named ones.
- Don't go for very wide text submenus - I had to split the About one.
Acorn
