This should be too hard at all, the only thing you’d have to add to your stylesheet is some additional css to the corresponding a:link and a:hover states. In case you’re using the CSS Menus action, Freeway will publish the CSS right onto the page specific stylesheet. You can add additional attributes to or (override) existing styles.
How’s that possible? Well, when you take a look at the published source code of your html-document you will notice that there are several stylesheets called for:
- master.css (contains all styles for elements that are set up on your master page)
- page.css (contains all styles for elements that are added to the elements already present, or master elements that are altered and … the css menus styles, strangely enough even when they’re set up on a master page)
- custom.css (all styles present on your custom style sheet)
When duplicate style-names are present on the stylesheets, the most recent read file has superiority. Knowing this, you will realize that your custom stylesheet always is the last one read, so as soo as you create a duplicate a style name here, all settings that differ from settings in the master.css and/or page.css will be overwritten.
So … when creating your menu using the CSS Menus action, Freeway will add the styles for this menu onto the page.css stylesheet. In this case, you want/need to add some attributes to the existing (CSS Menus) styles published onto the page.css stylesheet in order to animate them; we want to let the background color ease in and ease out.
First we need to publish the file with the CSS Menus set up in order to be able to find out the CSS Menus style names we need to target. For as long as you have just 1 menu at a page, the css style names always will be the same, for each and every single project.
You will end up with these two styles that contain the link and hover states and where you will need to add some additional attributes to to create the ‘animation’:
- #fwNav1 .fwNavItem .sub .fwNavItem a
- #fwNav1 .fwNavItem .sub .fwNavItem a:hover
NOTE - DON’T FEEL INTIMIDATED. UP UNTILL HERE IT’S JUST SOME INFORMATION ABOUT HOW & WHAT. THE FOLLOWING IS ALL YOU WILL NEED TO (GET USED TO) DO AND/OR KNOW
Open your style-editor and add those two (tag) styles to your (custom) stylesheet. We’ll do this step-by-step:
- Add a new style and (in the tag-field) name it ‘#fwNav1 .fwNavItem .sub .fwNavItem a’ (without the quotes), clear out the class style field.
- Select the ‘Extended’ button, which will pop-up a small window where you can add the additional attributes.
- Add these these 2 attributes: (Name) transition / (Value) background-color .5s and (Name) -webkit-transition / (Value) background-color .5s
- Repeat these steps for the style ‘#fwNav1 .fwNavItem .sub .fwNavItem a:hover’
Now on mouse-over and mouse-out the background-color will ease in and out. That’s about it.
freewaytalk mailing list
email@hidden
Update your subscriptions at: