Apply a transition to the unfold of submenu using CSS

• 

  unbosquedeteverde · Member · Dec 9, 2013 at 10:45 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 9, 2013 at 11:02 pm

  • Copy link

  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.

• 

  unbosquedeteverde · Member · Dec 10, 2013 at 4:17 am

  • Copy link

  Thanks a lot Thesacred…

• 

  designsimply · Member · Dec 10, 2013 at 2:25 pm

  • Copy link

  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!

• 

  unbosquedeteverde · Member · Dec 10, 2013 at 3:08 pm

  • Copy link

  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.

• 

  unbosquedeteverde · Member · Dec 10, 2013 at 6:52 pm

  • Copy link

  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.

• 

  thesacredpath · Member · Dec 10, 2013 at 8:48 pm

  • Copy link

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

• 

  unbosquedeteverde · Member · Dec 10, 2013 at 8:49 pm

  • Copy link

  Cetrainly, she is brilliant!!!