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
476 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
  • 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

861 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now