Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Menu Colors

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Menu Colors

    I'm trying to figure out how to make it so the main nav buttons stay orange as the drop down items are hovered. For example, when you hover over Volunteer under "How You Can Help", I would like How You Can Help to stay orange: http://www.dwwebdesigns.com/custom/
    Deborah
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Use this as a start:
    Code:
    <li><a id="how_you_can_help" >How You Can Help</a>
    <ul >
    <li id="how_you_can_help1"><a>Donate</a></li>
    <li id="how_you_can_help2"><a>Volunteer</a></li>
    <li id="how_you_can_help3" ><a>Connect</a></li>
    </ul>
    </li>
    
    
    <!-- Immediatey before the closing body tag -->
    <script>
    document.getElementById("how_you_can_help").addEventListener("mouseover", function(){document.getElementById("how_you_can_help").style.background="#f68e1e"});
    document.getElementById("how_you_can_help").addEventListener("mouseout", function(){document.getElementById("how_you_can_help").style.background="#003d7d"});
    document.getElementById("how_you_can_help1").addEventListener("mouseover", function(){document.getElementById("how_you_can_help").style.background="#f68e1e"});
    document.getElementById("how_you_can_help1").addEventListener("mouseout", function(){document.getElementById("how_you_can_help").style.background="#003d7d"});
    document.getElementById("how_you_can_help2").addEventListener("mouseover", function(){document.getElementById("how_you_can_help").style.background="#f68e1e"});
    document.getElementById("how_you_can_help2").addEventListener("mouseout", function(){document.getElementById("how_you_can_help").style.background="#003d7d"});
    document.getElementById("how_you_can_help3").addEventListener("mouseover", function(){document.getElementById("how_you_can_help").style.background="#f68e1e"});
    document.getElementById("how_you_can_help3").addEventListener("mouseout", function(){document.getElementById("how_you_can_help").style.background="#003d7d"});
    </script>
    then try to simplify the code.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If a javascript solution is acceptable, I see the page is already using jQuery 1.8.3, which would make things considerably simpler.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Here's a shorter way that uses document.querySelectorAll:
    Code:
    <li onmouseover="orange()" onmouseout="blue()"><a id="how_you_can_help">How You Can Help</a>
    <ul>
    <li id="how_you_can_help1"><a>Donate</a></li>
    <li id="how_you_can_help2"><a>Volunteer</a></li>
    <li id="how_you_can_help3" ><a>Connect</a></li>
    </ul>
    </li>
    End of body section:
    Code:
    <script>
    var x = document.querySelectorAll("a#how_you_can_help, li#how_you_can_help1, li#how_you_can_help2, li#how_you_can_help3");
    function orange() {
    for (i = 0; i < x.length; i++)
    {x[i].style.background="#f68e1e";}
    }
    function blue() {
    var y = x;
    for (i = 0; i < y.length; i++)
    {y[i].style.background="#003d7d";}
    }
    </script>

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    If I understand correctly, I think ul li:hover > a { background:gold } is all you need.

    Basic example http://jsbin.com/zenutixopa/
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. The Following User Says Thank You to Beverleyh For This Useful Post:

    molendijk (01-18-2017)

  7. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Of course! Of course! Thanks Beverleyh.
    In this particular case: ul li:hover > a { background:#f68e1e }

  8. #7
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    Thanks everyone for all of the assistance on this, but I'm using a template and corresponding stylesheet for responsive design which I'm trying to learn and understand line by line. When I tried adding the above coding I wasn't able to get it to work properly. Here is the main test page: http://www.dwwebdesigns.com/custom/. The stylesheet is here: http://www.dwwebdesigns.com/custom/responsee.css and what I believe to be the relative coding is below.

    Code:
    .top-nav ul { padding:0; } 
    .top-nav ul ul { position:absolute; background:#ff0000; } /* Have not yet determined what this background color affects */
    
    .top-nav li { float:left; list-style:none outside none; cursor:pointer; } 
    .top-nav li a { padding:1.0em; display:block; color:#fff; background:#003d7d; } /* Original padding 1.25em, background color affects main nav items */
    .top-nav li ul li a { background:none repeat scroll 0 0 #f68e1e; min-width:100%; padding:0.625em; } /* Resting drop down menu color, first level */
    .top-nav li a:hover, .aside-nav li a:hover { background:#f68e1e; } /* Main nav bar mouse-over color */
    .top-nav li ul li a:hover, .aside-nav li a:hover { background:#808080; } /* Added class for drop down nav item mouse-over color */
    
    .top-nav li ul { display:none; }
    .top-nav li ul li { float:none; list-style:none outside none; min-width:100%; padding:0; }
    .top-nav li ul li ul li { float:none; list-style:none outside none; min-width:100%; padding:0; }
    
    .top-nav .active-item a { background:none repeat scroll 0 0 #999; }
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  9. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I tried adding the above coding I wasn't able to get it to work properly
    I think I see where you've gone wrong. You've used this in your stylesheet; .top-nav ul li:hover > a:hover { background:gold; }

    But if you check my example, you'll see that there aren't two :hover selectors - just the one.

    .top-nav ul li:hover > a { background:gold; } works in dev tools.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. The Following User Says Thank You to Beverleyh For This Useful Post:

    dmwhipp (01-19-2017)

  11. #9
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    Thank you so much! I came close when trying to figure this out, but never had the right arrow/greater than. BTW, what is the correct term for that operator when coding?
    Again, thanks!
    Deborah
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  12. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    No problem - in CSS, its a child combinator selector
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  13. The Following User Says Thank You to Beverleyh For This Useful Post:

    dmwhipp (01-19-2017)

Similar Threads

  1. HV menu question - different colors
    By waynefrank in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-25-2009, 06:35 PM
  2. Replies: 3
    Last Post: 09-23-2008, 10:31 PM
  3. Colors of menu?
    By phil519 in forum CSS
    Replies: 1
    Last Post: 12-16-2007, 12:17 PM
  4. Any link DD menu - colors
    By GocFonStrauss in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-29-2005, 05:46 PM
  5. HV Menu Sub Sub Colors
    By bessensinger in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-18-2004, 05:05 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •