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
478 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

808 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