Sub-Menu Customization

1VISION · December 19, 2014

I was wondering if anyone could shed some light on this question. I am trying to figure out if I can do some subtle customizations to my sub-menus such as a) subtle transparency b) rounded corners? I've been trying to figure out some code but truthfully... I don't know what I'm doing or if this is even possible. Thanks in advance to any RocknRollers out there that might be able to help!

:ear

AceCo55 · December 20, 2014

You could have a look here and see if it does what you want:
http://www.dgrin.com/showthread.php?t=249111&highlight=rounded+menu+buttons

leftquark · December 20, 2014

You could make it transparent by tweaking this code:

/* Set the sub-menu background color to nothing */
.sm-user-ui.yui3-menu-vertical .yui3-menu-children {
  background: rgba(0, 0, 0, 0) !important;
}

/* Set the background so it's not a color anymore. This could touch more than the menu. Be careful! */
.sm-user-ui {
  background-color: rgba(0, 0, 0, 0) !important;
}

/* Now set the sub-menu color with some transparency */
.yui3-menu-item {
  background-color: rgba(35, 35, 35, 0.5) !important;
  /* Change the rgba values to something else
	 Also change the 0.5, which is set for 50% transparency */
}

/* Change the hover color */
.yui3-menu-label:hover {
  background-color: rgba(125,30,130, 0.8) !important;
}

1VISION · December 20, 2014

left quark & AceCo55 you're awesome!!! Thanks, I really needed that push. Still tweaking a bit but I think it's getting there! Only I haven't been able to figure out how to give my sub-menu a little more space as It's nesting too close to my main menu? If either one of you could shed any light on spacing those two menus apart a bit, I would forever be indebted to you. Lol. Thanks again!

Allen · December 20, 2014

1VISION wrote: »

left quark & AceCo55 you're awesome!!! Thanks, I really needed that push. Still tweeting a bit but I think it's getting there! Only I haven't been able to figure out how to give my sub-menu a little more space as It's nesting too close to my main menu? If either one of you could shed any light on spacing those two menus apart a bit, I would forever be indebted to you. Lol. Thanks again!

This is how it looks with Firefox. Chrome and IE11 looks like this also.

1VISION · December 20, 2014

Allen wrote: »

This is how it looks with Firefox. Chrome and IE11 looks like this also.

Yeah, I've been messing with it all day. I'm actually learning a lot! Thanks Allen, I'll be tweeking the transparencies for a bit longer. I just keep publishing when i get closer to what I like because my changes don't always show up in preview.

Allen · December 21, 2014

1VISION wrote: »

Yeah, I've been messing with it all day. I'm actually learning a lot! Thanks Allen, I'll be tweeking the transparencies for a bit longer. I just keep publishing when i get closer to what I like because my changes don't always show up in preview.

Looks like the border and transparency was added to the drop ul and not the individual li's. Is that what you want?

1VISION · December 21, 2014

Allen wrote: »

Looks like the border and transparency was added to the drop ul and not the individual li's. Is that what you want?

I'm not quite sure what you mean Allen? Will this effect any functionality? This probably should be another thread but my Mobile site is still truncating my menu instead of displaying the mobile menu properly on iPhone6 and iPads? Haven't figured this enigma out yet and have searched and researched different code as on leftquarks pages of goodies but to no avail. Nothing seems to get it to trigger the mobile menu? Is there a way you can look at my CSS?

Sub-Menu Customization

Comments