Versions

Responsive_CSS_Menu_-_Show_Current_Page.fwaction (2014-05-09) (Downloaded 263 times)

Contains:

  • Responsive CSS Menu - Show Current Page (item-action) - v. 1.1

Compatible: Pro 6

Responsive_CSS_Menu_-_Show_Current_Page.fwaction (2014-05-09) (Downloaded 33 times)

Contains:

  • Responsive CSS Menu - Show Current Page (item-action) - v. 1.0

Compatible: Pro 6

Author: Tim Plumb

This is a bit of a patch for the Responsive CSS Menu Action until it can be updated. This Action, when applied to the same element as the Responsive CSS Menu Action, will apply a class of active to any links that point to the current page. This allows you to manually create a class style (.active) with the style of the current menu item.

Additionally you can set the current link to be inactive so that users can’t click it to reload the current page.

To use the Action select Item > Actions > Responsive CSS Menu - Show Current Page and create a style using the Edit > Styles dialog making sure it is called .active.

30 Comments

This looks really nice, Tim. Any chance you could make it work when the link was to a folder, not just a file? So for a sub-menu option that matched the current page, the parent top-level menu option would also light up?

Slick work Tim, thanks for taking the initiative to create this!

Thanks for the feedback. This was really me exploring how to do this without using a client-side script more than anything else. I'll look into detecting directories as well although as Freeway only links to files itself (internally) this hadn't occurred to me.

I've revised the Action (version 1.1) so it now marks not only the current menu entry with a defined class but also all of the parent menu items as well.

Rather than marking them all with the same class you can choose within the Action the class styles for both the current and parent menu items. Obviously they can be same style if you like.

Hey Tim Thx for doing this for us, I hope I figure it out thx

Hey Tim, Im sure Ive applied the action incorrectly, so I think I need more instruction. sorry thx

Hi Tim, I'm having trouble with this to! after making .active style it doesn't show in my sheet1.css

Hi Matt, Have you created your style as a tag style?

If so it should show up in your stylesheet regardless of if Freeway thinks the style is in use.

Thanks Tim working now!, had to add '!important' to style.

Hi there.. could someone tell em where to put the !important?? thx

Carla,

First, have you created a new style with .active in the tag field and nothing in the name field, like Tim showed above? Using !important shouldn't be needed for most style adjustments.

If you have to use !important to get your styles to apply, then you will need to write all the styles using the "extended" menu in the styles editor.

Hey Caleb I followed Tim's instruct (screenshot) exactly , so maybe I am applying in wrong spot . thats all I can think of…??

Hi Matt from your example, I applied action like every other action… it works for you but not for me. I will redo maybe theres a glitch on my page.. but I see you set a style for the background to highlite.. I want the text to change color only. so maybe that is the problem.. don't know

ok so it must have been a simple matter of my daftness. I had applied the action correctly all along but was looking for the text color to change, but only the background color changed. . Is it possible to change only the text color?

I did that in the style but nada

actually not the important, but where does the !important go??

For anyone still struggling with this I've created a simple Freeway 6 Pro example file that shows the Action in use on a sample CSS menu.

You can see the output of the example here.

Thx Tim.. plz let us know if there is a way to highlight the text and not a background color, as I never highlight a background..thx!

@Carla, Just add a colour to your CSS style alongside the existing background colour; Example

Tim.. i wish I could say it worked and I feel stupid here, but its not.. I can send a screenshot but don't know how here

@Carla, Command-Shift-4 then pressing the space bar will give you a screen shot of the selected window. Upload this to the web somewhere. I used DropBox which offers a free account and has a lot of features.

Once the file is in your DropBox folder right-click it and copy the public URL of the file. Finally paste that URL here in the comments or use the link tool in the toolbar above to link the text to the image.

Hi Tim

here are the shots I just did not think of using dropbox https://www.dropbox.com/sh/n4vb3jg22fty0hr/AAAU2J6RK2iHUrmB41D8Z0_0a

@Carla, It looks like you've defined your styles in the name field rather than the tag field of the Edit > Styles dialog box. Is this correct?

Define them as tag styles and you won't need to apply them to the item at all - they just get published to the page. Take a closer look at how that example was put together and specifically ho the .active and .path styles are defined.

Hey Tim

no I put the style in tag field https://www.dropbox.com/sh/n4vb3jg22fty0hr/AAAU2J6RK2iHUrmB41D8Z0_0a

Hi Carla, when you created style in Edit > Styles and entered '.responsive-menu > li a.active' in tag field did you then tab out of tag field as dropbox shot below? the name field should be blank.

https://www.dropbox.com/s/ux1o2jzmnnnv97f/tab.png

as Tim mentioned you don't need anything entered in the Inspector palette 'your last two screen shots'

I too was a bit confused but following Tims example above checking styles > action palettes were the same.

Have removed previous comments, probably confusing just worked for me at the time

Hi all I have followed direction .. but to no avail. Im cursed..ha I have nothing entered in the inspector as my first attempt showed… https://www.dropbox.com/lightbox/home/tests

Hey all I am happy to report all is working.. On the umpteenth look at style, which I applied correctly. I looked again at the action palette and the class name of current menu is set to "current" so I changed that to "active"!! now it works..

Sign In or Sign Up to comment.