Html Box Link

Hi there

I want to create a html box link as seen on youtube’s navigation, ie when mouse is moved over html box the whole area becomes a link. Styling is not an issue but what would be the best approach to achieve this.

Regards
Stephen


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Have a read of this post http://freewaytalk.net/thread/view/83308

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the info Dave but dont want to put a graphic box within a html item to create a link. What I was hoping for was html text within a larger box and when the html box is moused over the whole are becomes a link. example http://www.pagelines.com/showcase/ side navigation menus

Regards Stephen


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What they’ve done in the example page is used padding on the A tag to give it a larger target area. This is not at all different than the output of the CSS Menus Action. If you want to do it by hand, you can do that also, and this might be instructional. Try this:

  1. Draw an HTML box on a new page, wide enough to be your menu area.
  2. Double-click inside it and type a line of text, a return, another line of text, etc. until you have your menu options. Assign links to each of them with the Hyperlink dialog.
  3. Click outside the box, then click once on the box so its selection handles show.
  4. In the Style tab of the Inspector, open up the Links segment and click the More… button.
  5. Click the Extended button, then New, then enter Name: ‘display’ and Value: ‘block’ (without quotes). Okay this.
  6. Click New again, then enter ‘padding’ and ‘8px 12px’. Okay out of the sub-dialogs so you see Edit Link Styles again.
  7. Pull down the (+) menu and choose Background Color. Set it to something cheery.

Preview in your browser or Freeway, and you should see a cheery block for each of your links, extending all the way left to right within your HTML box, and the entire body of it should be clickable. You can adjust the size of the clickable area by changing the amount of padding you aded in step 6 (the first number is the top and bottom, the second is the left and right).

There’s tons more things you can do here with just the native styling tools Freeway gives you.

You should also try out what CSS Menus can do, as I’m pretty sure that you could duplicate this menu using that tool and maybe Tim Plumb’s CSS Menu Helper Action to add some more goodies like rounded corners and gradients to the basic styles.

Walter

On Feb 28, 2012, at 2:56 PM, Bonsai Bart wrote:

Thanks for the info Dave but dont want to put a graphic box within a html item to create a link. What I was hoping for was html text within a larger box and when the html box is moused over the whole are becomes a link. example http://www.pagelines.com/showcase/ side navigation menus

Regards Stephen


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Cheers Walter

Shall give this a bash tomorrow night, I’ve had to rethink menus and navigation because Freeway does not like more than a couple of css menus per page on a site with 100 plus pages (From Softpress Support)

Regards Stephen


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options