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
475 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 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

13 Experts available now in Live!

Get 1:1 Help Now