Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
482 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
Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

721 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