I'm new in using Foundation 5. I'm having difficulties putting transition effects to my top-bar dropdown menu. I can't find which part to put a transition effect. I found one solution that applied to Foundation 4 and tried it to Foundation 5 but it didn't make any effects. Can someone point me which CSS rule for the top-bar dropdown menu should I override.
The following is the code that I tried to put in one of the CSS rule for the dropdown menu. It is the solution that I found:
.top-bar-section .dropdown {
display:block;
visibility: hidden;
opacity: 0;
}
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
visibility: visible;
opacity: 1;
}
I hope someone could help me. Thank you very much.
The CSS that handles the dropdown of the collapsed ".top-bar" is:
".top-bar" for closed and ".top-bar.extended" for open.
Now there's not a perfect way to add a transition to the dropdown effect because it's changing the height from whatever your normal "top-bar" height is, to "auto", and you can't use a CSS transition from a fixed height to "auto".
What you CAN do though is change the height of ".top-bar.extended" to a fixed height that fits all your menu items. Then a CSS transition will work from one fixed height to another. Only snag here though is if you add or subtract any menu items you'll have to edit the fixed height of ".top-bar.extended" accordingly.
Example:
nav.top-bar {
height: 110px;
transition: height .33s ease;
}
.top-bar.expanded {
height: 272px;
transition: height .33s ease;
}
Demo http://jsfiddle.net/SpeakInCode/d7Qnd/
Hope this helped!
There is an override using scss and compass however I don't know that way but there is documentation on their site.
Im guessing that above you are referring to the desktop or large view of foundation.
The css is split into 2 sections for the top-bar in the form of media queries . . .to override the previous .css make a new .css file and make sure its loaded after the original foundation css so
<link rel="stylesheet" href="<?php echo URL . appCSS ?>foundation.css" />
<link rel="stylesheet" href="<?php echo URL . appCSS ?>foundation-themer.css" />
now create your new css file in this case foundation-themer.css and include the following code
@media only screen and (min-width: 40.063em) {
/*Main Topbar color*/
.top-bar {}
.top-bar.expanded {}
/*Contain to grid topbar container*/
.contain-to-grid {}/*Main Topbar color*/
.contain-to-grid .top-bar {}
.top-bar-section li.hover > a:not(.button) {}
/*Main List Background*/
.top-bar-section li:not(.has-form) a:not(.button) {}
.top-bar-section li:not(.has-form) a:not(.button):hover {}
/*Main Active*/
.top-bar-section li.active:not(.has-form) a:not(.button) {}
/*Main Active - Hover*/
.top-bar-section li.active:not(.has-form) a:not(.button):hover {}
/*Main Dropdown Color*/
.top-bar-section .dropdown li:not(.has-form) a:not(.button){}
/*Main Dropdown color Hover*/
.top-bar-section .dropdown li:not(.has-form) a:not(.button):hover{}
/*Main Dropdown Active*/
.top-bar-section .dropdown li.active:not(.has-form) a:not(.button){}
/*Main Dropdown Hover*/
.top-bar-section .dropdown li.active:not(.has-form) a:not(.button):hover{}
.top-bar-section .dropdown li a {}
.top-bar-section .dropdown li label {}
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {}
.top-bar-section .has-form {}
these are all of the individual elements that I have found make an effect on the top-bar this was mainly found due to wanting to use gradients I used the above changed each element to a different colour and then saw the effects. NOTE the media query I have assumed that you are wishing to use the large version of the top-bar if you are wanting to change the small(mobile) version of the top-bar then change the the @media part to reflect this hope this helps.
