[Pro] CSS list styling

I came across this beautifully designed CSS menu. http://www.sohtanaka.com/web-design/css-vertical-navigation-with-teaser/. Have a look at the demo…

Want to implemented it in a new site design I’m working on. Have no clue where to start other then making the list…


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

Hi rob here is the example quickly slapped together in freeway

http://www.max-izzat.co.uk/menu-test/

I have used a few actions to get it to work and 1 action so I didn’t have to import the css but rather copied and pasted it

the main thing are that you add the main word like blog or home in the normal freeway way, then using html markup I added the extra text which is hidden untill you rollover the link. Take a close look in the freeway document and you will see I have wrapped it in a span.
Then I added the span class to the beginning of the list with the use of the crow bar action from walter.
Then highlighted the lot and created a list out of it and Finally I added the dummy links to each line.

The styles are added with the use of script maker and script linker… just for speed

Have a look at that and if you need help on how to use it then let me know
all the best max


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

Max beat me to it

I also did one but I just used Page Markup and HTML Markup - mine is at http://www.deltadzine.net/test/sidenav.html

I added a down arrow in the Hover state

David


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

If you are so inclind, you could also use only the built-in CSS editor to duplicate the styling. There is some reconfiguring to Freeway’s way of styling needed to make it work.

Sample can be downloaded here: http://www.chucksdesigns.com/downloads/vertical_menu.zip


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

On 8 Oct 2009, 9:47 pm, DeltaDave wrote:

Max beat me to it

How funny…if only I had refreshed my browser. :wink:

Well you can’t beat 3 working examples.


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

Hi Rob
I just looked at the other two versions and they are all fairly similar the only differences are… the styling location.
Dave has created an exact duplicate of the original… or pretty damn close to it. I have placed the styles on a separate style sheet and linked to them. and chuck has gone the whole hog and recreated the styles so they are published to the normal freeway external style sheet or to the head depending on your document set up. Chucks also changed the class tag to an id tag so the style would be published and picked up by div which houses the list/markup.

Anyway all three work in exactly the same way but are constructed in slightly different ways.

all the best max


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

He Guys. To all of you a big thanks!!
This will help me further.

Still dislike the way Freeway is handling the CSS styling though. Would be nice if we get some kind of integration with CSSEdit a-likes.


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

HI Rob
if you wanted to do the major adjustments of this in CSSEdit then what you could do is

  1. view my published version via at http://www.max-izzat.co.uk/menu-test/
    although you could use a local version with CSSEdit

  2. Then in the style sheet override window use the extract overide button on the menu-test.css to view the styles.

  3. This will extract the styles which you can happily adjust to your hearts content, while still being able to see the navigation.

  4. Once you have it the way you want it just copy the entire css contents and paste it back into freeway, and over writing the existing styles which you find inside the large field button popup within the freeway page thats called ** menu-test.css** and thats it…
    Just publish and the you will see your menu has been updated in Freeway plus you can fine tune the styles within the freeway environment.

max


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

forgot to say I adjusted the html so the HTML and the CSS would validate
So there is a new version uploaded
max


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

Still dislike the way Freeway is handling the CSS styling though.

I think most of us would sympathize with you on that, but for the time being it is what it is.


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