Need help? Check out our Support site, then


Apply a transition to the unfold of submenu using CSS

  1. unbosquedeteverde
    Member

    This one is driving me cracy.

    in my site: lecturassumergidas.com

    When hover in the first item - left one - in main horzontal menu, a vertical, two columns Submenu, unfolds. I´m trying to apply a transition to the unfold of the submenu, to make it more eye pleasant, but nothing i try works.

    Any help please would be really apreciated.

    Thanks in advance.

    The blog I need help with is lecturassumergidas.com.

  2. I've tried a couple things that did not work, but I'm checking with some of my team mates on this. Hopefully I can get back to you shortly.

  3. unbosquedeteverde
    Member

    Thanks a lot Thesacred...

  4. You have a lot going on with your current CSS! So it took a little time to work through an example.

    I found a way to slide the background down on hover and fade in the submenu. Keep experimenting! Here are the suggestions I came up with, and you should take it from here:

    Find this block:

    .main-navigation a:hover {
    	font-family: "Arimo", "arial", "sans-serif" !important;
    	font-weight:400 !important;
    	color:#000 !important;
    	color:#000 !important;
    	transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px); -webkit-transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px); -moz-transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px); -o-transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px); -ms-transform:rotate(0deg) scale(1.2) skew(0deg) translate(0px, -1px);
    }

    And remove all of the transforms. I don't think they're needed and they may have just been making the submenu links jumpy.

    Same goes for the transforms in this block:

    .main-navigation .sub-menu a:hover {
    	font-family: "Arimo", "arial", "sans-serif" !important;
    	font-weight:400 !important;
    	color:#4599C3 !important;
    	box-shadow:#333 0 1px 9px;
    	color:#4599C3 !important;
    	transform:rotate(0deg) scale(1) skew(0deg) translate(0px); -webkit-transform:rotate(0deg) scale(1) skew(0deg) translate(0px); -moz-transform:rotate(0deg) scale(1) skew(0deg) translate(0px); -o-transform:rotate(0deg) scale(1) skew(0deg) translate(0px); -ms-transform:rotate(0deg) scale(1) skew(0deg) translate(0px);
    }

    Update the ".submenu" block to this:

    .sub-menu {
    	background:rgba(69, 153, 195, 0.87) !important;
    	border: none;
    	margin: 0 !important;
    	padding: 0 !important;
    	-webkit-border-radius:6px 6px 6px 6px;
    	-moz-border-radius:6px;
    	border-radius: 6px 6px 6px 6px;
    }

    And add this to the bottom of your custom CSS:

    .main-navigation ul li:first-child ul {
    	border: none;
    	display: block;
    	height: 0;
    	opacity: 0;
    	transition: all 1s ease;
    }
    .main-navigation ul li:first-child:hover ul {
    	height: 1200px;
    	opacity: 1;
    }
    .main-navigation ul li:first-child ul li {
    	display: none;
    }
    .main-navigation ul li:first-child:hover ul li {
    	display: block;
    }

    This should give you a good start in case you want to keep experimenting. It's cool that you're working on some more advanced and neat looking CSS3!

  5. unbosquedeteverde
    Member

    Sometimes been thousands of miles away is a problem cos don´t let, at least for me, express a big "THANKS!" the way it should be. Brilliant Designsimply. Simply perfect. It works!!! and looks great!!...

    All my gratitude to both of you, Desigsimply and Thesacred.

    P.S I don´t want to abuse of your time but let me, please, ask you a little more thing:

    Is there a way to apply a slight delay in the unfold of the submenu. I mean: something like half a second between the mouse pointer is over the option and the unfold of the related submenu?

    A million of Thanks to both of you. Trust me, a million.

  6. unbosquedeteverde
    Member

    I get it with the small delay in hover...

    .main-navigation ul li:first-child:hover ul {
    height: 978px;
    opacity: 1;
    transition-delay:.2s;

    }

    Well. I´m really happy!!!!! designsimply, amazing usefull your help. Tons of thanks.

  7. @designsimply is my idol. She is soooo good. I've been working on this and hadn't made a lot of progress.

  8. unbosquedeteverde
    Member

    Cetrainly, she is brilliant!!!

Topic Closed

This topic has been closed to new replies.

About this Topic