# \[Pro\] Can FW create a site like this?

**URL:** <https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991>\
**Category:** Freeway\
**Created:** [January 3, 2013, 5:21pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991 "2013-01-03T17:21:12Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![neil.west1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/n/3bc359/32.png) [@neil.west1](https://discourse.softpress.com/u/neil.west1)\
**Post date:** [January 3, 2013, 5:21pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/1 "2013-01-03T17:21:12Z")

</div>

I’ve created various sites using FW, but a client has asked if we are able to produce one along the same lines as the link below. I don’t use FW often enough to be able to see that some of the questions may be very easily answered, and that I have probably already used some features on other sites, but it seemed more prudent to ask the experts here for quick answers as opposed to sitting down for a few hours myself and not necessarily getting anywhere!

I’m not asking for specific instructions of how to create the different elements included, just whether they can be done without resorting to anything more than FW actions and a basic knowledge of coding.

Specifically, I’m asking whether the following items are reproducable:

1. full screen background image that acts like a fading slideshow but scales to fit the screen

2. the page elements scroll up/down whilst the background image remains static

3. Drop down navigation menus with a mix of text and graphics

4. (on any other page) the slide-out downloads menu on the RH side

Thanks in advance for any assistance given.

Neil

> **[Plymouth Brethren Christian Church | Official Website](https://www.plymouthbrethrenchristianchurch.org)**
>
> Visit the Home page on the website of the Plymouth Brethren Christian Church, a Christian fellowship based on the Holy Bible as the Word of God.

* * *

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

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [January 3, 2013, 6:30pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/2 "2013-01-03T18:30:35Z")

</div>

Yes to all these features

D

* * *

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

---

<div class="post-metadata">

**Author:** ![Omar\_K\_N1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/o/ac8455/32.png) [@Omar\_K\_N1](https://discourse.softpress.com/u/Omar_K_N1)\
**Post date:** [January 3, 2013, 11:17pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/3 "2013-01-03T23:17:51Z")

</div>

Hi & good day,

The full screen background image has been discussed here I remember.  
At freewaytalk.  
It should be possible!

with best regards,  
Omar K N

On 2013-01-03, at 18:21 , neil.west1 wrote:

> full screen background image

* * *

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

---

<div class="post-metadata">

**Author:** ![seoras](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/s/9de053/32.png) [@seoras](https://discourse.softpress.com/u/seoras)\
**Post date:** [January 4, 2013, 12:25am UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/4 "2013-01-04T00:25:34Z")

</div>

For background fade: [Background Supersizer - ActionsForge](http://actionsforge.com/actions/view/234-background-supersizer)

And for drop down menu that can incorporate graphics (if css menu action won’t do what your after): [http://actionsforge.com/actions/view/238-bam-big-area-menus](http://actionsforge.com/actions/view/238-bam-big-area-menus)

s

* * *

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

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [January 4, 2013, 1:45am UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/5 "2013-01-04T01:45:14Z")

</div>

OK - a v quick page using the background Supersizer action [http://www.deltadesign.co/fw\_examples/fwactions/background\_super.html](http://www.deltadesign.co/fw_examples/fwactions/background_super.html)

The CSS menu uses graphics added in the same way as here [http://www.deltadesign.co/menu\_stuff/graphic\_menu.html](http://www.deltadesign.co/menu_stuff/graphic_menu.html)

Menu slideout can be done like this -[http://www.deltadesign.co/fw\_examples/menus/fbslideout.html](http://www.deltadesign.co/fw_examples/menus/fbslideout.html)

D

* * *

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

---

<div class="post-metadata">

**Author:** ![neil.west1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/n/3bc359/32.png) [@neil.west1](https://discourse.softpress.com/u/neil.west1)\
**Post date:** [January 4, 2013, 9:19am UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/6 "2013-01-04T09:19:53Z")

</div>

Excellent!

Thanks very much for those very quick answers 🙂

* * *

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

---

<div class="post-metadata">

**Author:** ![Neil1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/n/278dde/32.png) [@Neil1](https://discourse.softpress.com/u/Neil1)\
**Post date:** [January 4, 2013, 9:38am UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/7 "2013-01-04T09:38:01Z")

</div>

Hi David,

Do you have a copy of the Freeway file for the slide out example, or share how this was constructed please?

Thanks loads,

Neil.

* * *

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

---

<div class="post-metadata">

**Author:** ![Anton1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@Anton1](https://discourse.softpress.com/u/Anton1)\
**Post date:** [January 4, 2013, 12:10pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/8 "2013-01-04T12:10:59Z")

</div>

I want to make this to 😉  
But can anyone help me with de scrollable layer?  
How or what is the action for this?  
Thx,  
Anton

* * *

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

---

<div class="post-metadata">

**Author:** ![Tim3](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/f14d63/32.png) [@Tim3](https://discourse.softpress.com/u/Tim3)\
**Post date:** [January 4, 2013, 5:15pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/9 "2013-01-04T17:15:34Z")

</div>

Hi Neil,  
I took a look at this last night mainly to see just how easy a layout like this could be created in Freeway Pro. Here’s my attempt: [http://d.pr/nJI9](http://d.pr/nJI9)

The full screen background images use the Background Supersizer Action ([Background Supersizer - ActionsForge](http://actionsforge.com/actions/view/234-background-supersizer)), the drop down menu uses Freeway’s own CSS Menus Action with a few extra CSS styles to get the background images in for each of the main menu items and the sliding Facebook panel uses a CSS transitions to slide the panel in and out of view when the user hovers over it.

The only other Action I used was my Externalize Action ([http://www.freewayactions.com/test/externalize/](http://www.freewayactions.com/test/externalize/)) to clean up the page code and remove a lot of the inline code clutter that doesn’t need to be in with the HTML.

All in all I think it is pretty close to the original although there are a few things I would do differently if I had a bit more time and energy;

1. The CSS for the menu background images uses nth child pseudo selectors which only work in modern browsers. The fallback here is that a user using an older browser won’t see the images at all - just the plain orange background. Given a bit more time and energy I’d probably create a simple Action to add CSS classes to each of the menu items so I can target them without having to use nth child pseudo selectors.

2. I’d use a web font for the Rockwell menu items and headings. At the moment these will fall back if Rockwell isn’t available but will almost certainly look awful in these fonts.

3. I’m not a great fan of the amount of pixel data that the background image slideshow brings to the page (over a meg for 3 images) so I’d be inclined to crush the images as far as I could before they started falling apart.  
Regards,  
Tim.

On 3 Jan 2013, at 17:21, neil.west1 wrote:

> Specifically, I’m asking whether the following items are reproducable:
> 
> 1. full screen background image that acts like a fading slideshow but scales to fit the screen
> 
> 2. the page elements scroll up/down whilst the background image remains static
> 
> 3. Drop down navigation menus with a mix of text and graphics
> 
> 4. (on any other page) the slide-out downloads menu on the RH side
> 
> Thanks in advance for any assistance given.
> 
> Neil
> 
> [http://www.plymouthbrethrenchristianchurch.org](http://www.plymouthbrethrenchristianchurch.org)

* * *

Experienced Freeway designer for hire - [http://www.freewayactions.com](http://www.freewayactions.com)

* * *

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

---

<div class="post-metadata">

**Author:** ![Gray\_Owl1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/g/b487fb/32.png) [@Gray\_Owl1](https://discourse.softpress.com/u/Gray_Owl1)\
**Post date:** [January 4, 2013, 11:28pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/10 "2013-01-04T23:28:06Z")

</div>

Hi

Can anybody show how the FB slide-out is constructed, please.

Lee

* * *

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

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [January 5, 2013, 12:13am UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/11 "2013-01-05T00:13:24Z")

</div>

This is how Walter does it

[http://www.freewaytalk.net/thread/view/121058#m\_121158](http://www.freewaytalk.net/thread/view/121058#m_121158)

D

* * *

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

---

<div class="post-metadata">

**Author:** ![Richard](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/r/f0a364/32.png) [@Richard](https://discourse.softpress.com/u/Richard)\
**Post date:** [January 5, 2013, 11:14am UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/12 "2013-01-05T11:14:22Z")

</div>

> On 4 Jan 2013, 4:15 pm, Tim Plumb wrote:
> 
> Hi Neil,  
> I took a look at this last night mainly to see just how easy a layout like this could be created in Freeway Pro. Here’s my attempt: [http://d.pr/nJI9](http://d.pr/nJI9)

Amazing as usual … 🙂

* * *

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

---

<div class="post-metadata">

**Author:** ![Gray\_Owl1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/g/b487fb/32.png) [@Gray\_Owl1](https://discourse.softpress.com/u/Gray_Owl1)\
**Post date:** [January 5, 2013, 12:33pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/13 "2013-01-05T12:33:12Z")

</div>

Hi Tim

I’ve got the slide element working but I need to know how you got the FB link working, because thats what I’m after - but to open on the other side of the page.

Lee

PS Thanks Dave and Walter for your help again.

* * *

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

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [January 5, 2013, 12:38pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/14 "2013-01-05T12:38:33Z")

</div>

Show us what youve got so far and post the FB link you want to use

D

* * *

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

---

<div class="post-metadata">

**Author:** ![Gray\_Owl1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/g/b487fb/32.png) [@Gray\_Owl1](https://discourse.softpress.com/u/Gray_Owl1)\
**Post date:** [January 5, 2013, 12:46pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/15 "2013-01-05T12:46:04Z")

</div>

I can’t at the moment David, it’s a test page on my Mac. I’m not sure about the FB link - I take it you mean the FB page that loads and not the actual button.

Lee

* * *

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

---

<div class="post-metadata">

**Author:** ![Gray\_Owl1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/g/b487fb/32.png) [@Gray\_Owl1](https://discourse.softpress.com/u/Gray_Owl1)\
**Post date:** [January 5, 2013, 12:54pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/16 "2013-01-05T12:54:44Z")

</div>

Hi David

Need it on [http://www.pal4pasw.co.uk](http://www.pal4pasw.co.uk) on the home page. Would like it to work and look like Tim’s. I know that is going away from what this thread is about but looking at the page Tim’s is the best option.

Lee

* * *

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

---

<div class="post-metadata">

**Author:** ![Gray\_Owl1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/g/b487fb/32.png) [@Gray\_Owl1](https://discourse.softpress.com/u/Gray_Owl1)\
**Post date:** [January 5, 2013, 12:58pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/17 "2013-01-05T12:58:28Z")

</div>

Sorry David, typo error should be [http://www.pal4paws.co.uk](http://www.pal4paws.co.uk)

Lee

* * *

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

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [January 5, 2013, 1:05pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/18 "2013-01-05T13:05:40Z")

</div>

Tim’s method is a CSS3 method using transitions that are not supported in older browsers but if you want to go down that route…

But who’s FB are you wanting to link to?

D

* * *

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

---

<div class="post-metadata">

**Author:** ![Gray\_Owl1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/g/b487fb/32.png) [@Gray\_Owl1](https://discourse.softpress.com/u/Gray_Owl1)\
**Post date:** [January 5, 2013, 3:30pm UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/19 "2013-01-05T15:30:04Z")

</div>

Sorry for the delay. Had to go out shopping. Anyway, the way that Walter has done it would just be fine. Pal4Paws has got its own FB account.

Lee

* * *

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

---

<div class="post-metadata">

**Author:** ![neil.west1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/n/3bc359/32.png) [@neil.west1](https://discourse.softpress.com/u/neil.west1)\
**Post date:** [January 7, 2013, 9:22am UTC](https://discourse.softpress.com/t/pro-can-fw-create-a-site-like-this/15991/20 "2013-01-07T09:22:24Z")

</div>

> I took a look at this last night mainly to see just how easy a layout like this could be created in Freeway Pro. Here’s my attempt: [http://d.pr/nJI9](http://d.pr/nJI9)

Wow! thanks for that Tim. The client had doubts that I/my software could produce such a site (most probably me!). Your example has proven that at least one of those opinions is incorrect! 😉

* * *

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