CSS3 Transition Dropdown Menu

I want to add a smooth transition: all 2s ease-in-out;-moz-transition: all 2s ease-in-out;

Where do I add the Css transition code in top_menu.css to make the every hover effect smooth?

I searched the forums but found no answer, I did try this myself for 1 hour.

Quote · 29 Jun 2012

I am not sure how to do this. I believe the current menu systems drop downs are handled by javascript. Not CSS. So i am not sure it can even be done without some major rewrites to the code. It's been awhile since i have looked at menu code.

However, are you aware that the -moz-transition only works on firefox?

There is another alternative for Opera and yet another for Safari and Chrome

IE does not support it at all.


https://www.deanbassett.com
Quote · 29 Jun 2012

OK, I know nothing of CSS3 did look this up, don't know if it will help you.

http://shailan.com/2713/create-a-dropdown-menu-using-css3-transitions/

ManOfTeal.COM a Proud UNA site, six years running strong!
Quote · 29 Jun 2012

Ok thank you everyone. By the way, I created a piece of code which will manifest a CSS3 drop down menu, however, I cant find out where I should paste the html and javascript code for it to appear on top of the normal menu (Where the site logo is which I will remove)

Any ideas?

Quote · 29 Jun 2012

- Issue Solved -

Quote · 29 Jun 2012

 

- Issue Solved -

 please share..

ManOfTeal.COM a Proud UNA site, six years running strong!
Quote · 29 Jun 2012

Sorry Michael!

I found that going to templates/base and then opening _header.html solves the problem when adding the html coding there:

 

__flush_header__
<body <bx_injection:injection_body /> >
"Your HTML Code Here"
<bx_injection:injection_header />
<div id="notification_window" class="notifi_window"></div>
    <div id="FloatDesc" style="position:absolute;display:none;z-index:100;"></div>

 

This will align the drop down menu top the very top. By then applying CSS you can style the menu as much as you want. However, adding a Jquery based drop down menu tends to not work for some reason.

 

I hope this helps you as well or anyone!

Quote · 29 Jun 2012
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.