[Pro] Responsive CSS Menu

Is it possible to set an on state manually when creating a menu using Responsive CSS Menu Action?

Matt.


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

Not at this time. You may want to post that as a feature request here: Responsive CSS Menu - ActionsForge

Also, if you want to add this yourself sooner, here’s a simple JavaScript recipe I often use when making self-links “light up” like this. Paste the following into Protaculous 2, and adjust the nameOfTheBox reference to match the Name/ID of the HTML box containing your menu.

var here = $$('#nameOfTheBox a').sortBy(function(elm){ return elm.href.length; }).reverse().find(function(elm){
  var link = elm.readAttribute('href');
  return (window.location.pathname.include(link));
});
if(here){
  here.addClassName('active');
}

Then you just need to add a new CSS style to your page with the Tag set to .responsive-menu > li a and the Name set toactive. Any background-color property you set in this field should override the Action-defined default background-color, and you will get the effect you’re after.

Walter

On May 7, 2014, at 4:37 AM, Matt wrote:

Is it possible to set an on state manually when creating a menu using Responsive CSS Menu Action?

Matt.


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

Thank you for getting back Walt, not sure if I used the correct term ‘on state’.

what I am after is the current page to be highlighted.
In css menus you could select ‘highlight current page’ and then you check ‘Current page’.

when you go to http://rachelcrispcounselling.co.uk/fwp/ I would like the current page to have the hover state.

Matt.


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

That was the question I was answering. The Responsive CSS Menu Action does not currently have this feature. The code that I posted will give you that effect until such time as it does have that feature. Did you try that yet?

Walter

On May 7, 2014, at 11:41 AM, Matt wrote:

Thank you for getting back Walt, not sure if I used the correct term ‘on state’.

what I am after is the current page to be highlighted.
In css menus you could select ‘highlight current page’ and then you check ‘Current page’.

when you go to http://rachelcrispcounselling.co.uk/fwp/ I would like the current page to have the hover state.

Matt.


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

oops! yes have updated link but still don’t seem to be able to get to work.

Matt


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

Okay, two things. First, put the script in the DOM Loaded Observer editor, not the custom script. I should have mentioned that earlier. Also, apply this to each page in your demo site, so you can see it work on each page.

The way that the script works is it parses the URL on each link in the navigation, sorts them into longest-first order, then tries to find the first match in that array of URLs to the current page’s URL. It works longest-first because otherwise most pages would match the home page. It’s probably not going to light up on the home page unless you are actually at /index.html rather than / in your browser.

Walter

On May 7, 2014, at 12:02 PM, Matt wrote:

oops! yes have updated link but still don’t seem to be able to get to work.

Matt


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

Hi al… I am also interested in this option, so Ill throw my hat in
Carla


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

Walter I still can not get it to work would this CSS below be correct?

.responsive-menu > li a:active {
background-color: #8CADA2;
}

Matt


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

Use a dot between a and active, not a colon. The script adds a classname to the link, :active is a pseudo-class, and only the browser can add those. As far as I know, there isn’t an :active pseudo-class to add.

Walter

On May 8, 2014, at 1:38 PM, Matt wrote:

Walter I still can not get it to work would this CSS below be correct?

.responsive-menu > li a:active {
background-color: #8CADA2;
}

Matt


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

Hi Walter, That works a treat!

Many thanks Matt.


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

Hey Walter,
I’m using the new Freeway 7 and I am setting up a new menu. I noticed the responsive hamburger size is set pretty small. Can I increase the size somehow?

Billy


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

The new action allows you to choose your own image for this.

David


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

I have an image 179x69px. When I publish the page and look at the image it is very tiny. Not the size i’m expecting.

Billy


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

You can see it here.
http://smartytest.com/Greek/ourwork.html


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

You can get round the fixed size by adding the following to the Page>HTML Markup dialog (in the Before section):

.fwNav1-toggle-label { width: 90px; height: 40px; }

Cheers,
Joe

On 1 Aug 2014, at 13:57, billy kimmel email@hidden wrote:

You can see it here.
http://smartytest.com/Greek/ourwork.html


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

Thanks Joe.
Also how do I exclude my CSS Styles page out of the Menu Auto Generate?

Billy


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

Sorry, I’m not sure I follow. Are you asking about externalizing your CSS styles? you can do this in the Output tab of the Document Setup dialog (Command-Option-,)

Joe

On 1 Aug 2014, at 14:11, billy kimmel email@hidden wrote:

Thanks Joe.
Also how do I exclude my CSS Styles page out of the Menu Auto Generate?

Billy


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

No. The new Auto Generate in the CSS Menu. It is picking up my CSS Style Sheet(page) in my folder of my site. Should my Style Sheet be in a separate folder?


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

Also, what is the class of the hamburger “close” button? And is there a list of classes for items in freeway such as .fwNAv1-togle-label?

Billy


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

Ah, I see. There’s a Remove from CSS Menus Action that you can apply to any page you don’t want to include.

There’s no published list. The easiest way to find things like that out is to open the page in the browser, right-click on the element you want to find the details of and select Inspect Element. If you use Safari you may need to turn on the Developer Menu in the Advanced preferences to do this. Firefox and Chrome both do it out of the box.

That particular element has a class of .fwNav1-toggle-close

Joe

On 1 Aug 2014, at 14:45, billy kimmel email@hidden wrote:

Also, what is the class of the hamburger “close” button? And is there a list of classes for items in freeway such as .fwNAv1-togle-label?

Billy


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