[Pro] CSS Menu click reset /current page

Hey There,

Does anyone know if its possible to hold the “click effect” in a freeway css menu?

Just Like the rollover action, there we have the option to say “reset: no”

I linked the menu to some anchors and the menu link should stay highlighted till you click on another link.
The example is quick and dirty, the links should stay red after clicking on them.

Maybe there is a script solution?

Does anyone have experience with that kind of stuff?

Tanks and Cheers
Moritz

http://modien.de/cssmenu/test/index.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

There’s some code involved there to make that happen. Walter did a one-page containing such menu behaviour once …


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

the links should stay red after clicking on them.

They do in Chrome.

There are certainly ways to do this with javascript but how complex is your menu going to be and are the links/anchors all on the same page?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Here is a quick javascript example (jQuery) - http://www.deltadesign.co/FW7Test/class-on-click.html

This uses some js to add a class on clicking the link (removing it from another link if it was already applied)

But as i said this will depend on how your Menu is set up. This example is really for a single page.

You may not wish to use jQuery - the same effect can be achieved in vanilla javascript.

The Code

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$('ul.class-applied-to-menu li a').click(

function(e) {
    e.stopPropagation; // stop the click from bubbling
    $(this).closest('ul').find('.selected').removeClass('selected');
    $(this).parent().addClass('selected');

});
</script>

The class that is added to each link (onclick) in my example is .selected and you can style that how you like - however you should note that any menu styling (click, hover, active etc.) will likely take precedence so best left off until you have it working as you want.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I’m admittedly not expertly knowledgeable about the CSS Menu action, but I did spend a little time on this.

http://cssway.thebigerns.com/workbench/css-menu-current-anchor/index.html

It sorta works. Kinda.

First, I put some CSS to affect the menu in the document head. How much of this is achievable using the action, I don’t know.

Then I put a small script at the end of the html body. Don’t forget the jquery link as well.

Finally, pay attention to what you name your anchors (their ID tags) and make sure the CSS is accurate.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

It sorta works. Kinda.

Works pretty good.

Should there be a semi colon at the end of this line?

$this = $(this)

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

A purist would say yes, but the semicolon is optional, unless you are going to minimize the page (and lose the line-breaks that mean the same thing as the semicolon).

Walter

On Apr 4, 2016, at 8:37 PM, DeltaDave email@hidden wrote:

It sorta works. Kinda.

Works pretty good.

Should there be a semi colon at the end of this line?

$this = $(this)

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Recently, I did something similar and am under the impression of using this:

ending up in this (temporarily available) result:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-clients/schumacher-merz/index.html

Requires jQuery and this init (in the before end body Tag and enclosed in a script-Tag):

/***************** OnePage Nav ******************/

var top_offset = $('#section-desktopNav').height() - 70;

$('#fwNav1').onePageNav({
currentClass: 'fwCurrent',
changeHash: false,
scrollOffset: top_offset,
scrollSpeed: 1250,
scrollThreshold: 0.5
}); 

The offset is for the fixed nav-item’s height (70px in this example). The name of the css-menu might be different as well (but should match as long it is the first implemented one).

To indicate the bg color of the current link, I created the following Tag-style in the styles-palette:

#fwNav1 .fwCurrent  {
background: #E20019;
}

As ever the simple word of warning (disclaimer):

Dealing with external library (jQuery) may cause, that you have to drop other actions such as Scripty or FX (Scriptaculous/Prototype) to avoid any clash of the titans.

Furthermore I expect people knowing what they do. A “missing” feature or action is neither an excuse nor a constraint.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thanks for all your replys!
I will checkout alle the methods and will let you know which one works the best for me.

My menu behaves like a one page menu so its not that complex.

Thanks and Cheers
Moritz


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options