Sub-menu colors issue
-
Hey Nobita!
I have an issue, please view the image HERE
As you can see I edited the header and hovering colors of the menu. I have the gradient code and it all works great.
Sub-menus however do not change colors and as you can see, it is pretty buggy. Can you give me a template of a code where I can edit the sub-menu colors as well and make it compatible together?
I can put my gradient code into that template and see if it works.I’m using colorzilla, this is the main menu gradient – HERE
This is the hovering gradient – HEREI want the sub menu to have the same gradient as the main menu and after hovering over it, it changes to the hovering gradient.
Clicking menus shouldn’t affect this.Hope you can help me out here!
-
Hi IamPetard
Please add to below code, functions.php last line.
It makes your original color type.
raindrops_register_styles("IamPetard"); function raindrops_indv_css_IamPetard(){ $base_color_settings = raindrops_indv_css_dark(); $extend_color_settings =<<<STYLE /*example*/ #access{ background:#ccc; } #access .children a, #access .sub-menu a, #access a { color:#333; background:#ccc; } #access .children a:hover, #access .sub-menu a:hover, #access a:hover { color:#333; background:#fff; } STYLE; return $base_color_settings . $extend_color_settings; }
Step2 Please open Raindrops options page.
Color Type: select IamPetard
submit
Thank you.
You are awesome! Works nicely.
One last thing – how can I make the sub menus fade or slide in instead of just popping up out of nowhere?Raindrops is not support like a jQuery beased fade or slide menu now.
For example.
functions.php
add_action( 'wp_head', 'raindrops_menu_slide' ); function raindrops_menu_slide(){ ?> <script> jQuery(document).ready(function() { jQuery(".menu li a,.children,.sub-menu") .mouseover(function(){ jQuery(this).parent().children("ul").show(); }) .mouseout(function(){ jQuery(this).parent().children("ul").hide(); }); }); </script> <?php }
above code maybe works chrome.
change
jQuery(this).parent().children("ul").show('slow');
then broken.
Since it is the menu currently made on the basis of hover, making it operate well may be made when the menu on the basis of mouse click which may be difficult is newly built.
Although it is widely different with the problem of a menu.
Raindrops support javascript toggle in the post.
<ul> <li class="raindrops-toggle raindrops-toggle-title">Toggle Title</li> <li class="raindrops-toggle">Toggle Content</li> </ul>
I am pleased if helpful to your development.
Thank you.
Thanks nobita, its unfortunate the fading doesn’t work but it doesn’t matter, its good as it is!
- The topic ‘Sub-menu colors issue’ is closed to new replies.