Solved

using if/else to create a unique color scheme for each drop-down in a multi-colored menu

Posted on 2011-02-21
6
481 Views
Last Modified: 2013-11-05
I made a drop-down menu using CSS and jquery. I would like each drop-down to have a different color scheme (to match the top menu item). I'm trying to use an if/else statement to achieve this. But I'm a greenie and don't really know what I'm doing.

Here is my page:
http://kyle-hamilton.com/ULI_menus/fullbg_dd3.html
As you can see, the "partners" drop-down has the purple color scheme. It should be pink.

I'm probably writing the if/else stuff all wrong - I did that all by myself :)))

Thank you  Masters and Geniuses!
Kyle
$(function () {
        $(".drop").hide();
        var btn = $("nav ul li");
        btn.mouseenter(function() {
          $(this).children(".drop").stop(true, true).slideDown();
        }).mouseleave(function() {
          $(this).children(".drop").stop(true, true).slideUp();
        });
        
		var pink = $(".pink");
		var purple = $(".purple");
		
        var link = $(".drop li");
        link.mouseenter(function() {
			
	
			if(purple) {
				$(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#9c298c"});
			}
			else if(pink) {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "e9187e"});
			}
			else {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#333"});
			}
						
		 }).mouseleave(function() {
			 
			 
			if(purple) {
				$(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#c371b7"});
			}
			else if(pink) {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "f56dab"});
			}
			else {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#333"});
			}

        });	
			
			
			
		
      });

Open in new window

0
Comment
Question by:Kyle Hamilton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
6 Comments
 
LVL 16

Expert Comment

by:BurnieP
ID: 34947878
Hi,

I just want to confirm that your Partners is actually pink, and About Us is purple.  So everything looks fine to me.
0
 
LVL 25

Author Comment

by:Kyle Hamilton
ID: 34947933
Sorry, I should clarify...

Yes, "About Us" is purple and "Partners" is pink to begin with.

The Partners submenu items start out pink. Then the jquery css takes effect on mouse over, and they become purple. They should stay pink (with a darker pink on mouse over).

Thanks for looking at this,
Kyle
0
 
LVL 25

Author Comment

by:Kyle Hamilton
ID: 34947954
I also tried this with no luck:


<script> 
      $(function () {
        $(".drop").hide();
        var btn = $("nav ul li");
        btn.mouseenter(function() {
          $(this).children(".drop").stop(true, true).slideDown();
        }).mouseleave(function() {
          $(this).children(".drop").stop(true, true).slideUp();
        });
        
		
		
			var link = $(".drop li");
			link.mouseenter(function() {
	
			if($(this).hasClass(".purple")) {
				$(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#9c298c"});
			}
			else if($(this).hasClass(".pink" )) {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "e9187e"});
			}
			else {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#333"});
			}
						
		 }).mouseleave(function() {
			 
			 
			if($(this).hasClass(".purple" )) {
				$(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#c371b7"});
			}
			else if($(this).hasClass(".pink" )) {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "f56dab"});
			}
			else {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#333"});
			}

        });	
			
			
			
		
      });
    </script>

Open in new window

0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 0 total points
ID: 34947979
Fixed it.. The second version is correct. I had a typo.

Here's the working code:


<script> 
      $(function () {
        $(".drop").hide();
        var btn = $("nav ul li");
        btn.mouseenter(function() {
          $(this).children(".drop").stop(true, true).slideDown();
        }).mouseleave(function() {
          $(this).children(".drop").stop(true, true).slideUp();
        });
        
		
		
			var link = $(".drop li");
			link.mouseenter(function() {
	
			if($(this).hasClass("purple")) {
				$(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#9c298c"});
			}
			else if($(this).hasClass("pink" )) {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#e9187e"});
			}
			else {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#333"});
			}
						
		 }).mouseleave(function() {
			 
			 
			if($(this).hasClass("purple" )) {
				$(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#c371b7"});
			}
			else if($(this).hasClass("pink" )) {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#f56dab"});
			}
			else {
				 $(this).css({"text-decoration" : "underline","color" : "white", "background-color" : "#333"});
			}

        });	
			
			
			
		
      });
    </script>

Open in new window

0
 
LVL 25

Author Comment

by:Kyle Hamilton
ID: 34947991
And the working page for whoever's interested:

http://kyle-hamilton.com/ULI_menus/fullbg_dd4.html
0
 
LVL 25

Author Closing Comment

by:Kyle Hamilton
ID: 35410420
I figured it out
0

Featured Post

Understanding Linux Permissions

Linux for beginners: How to view the permissions associated with files and directories and also how you can change them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question