Toggle header colors, based on menu hover

Question

Toggle header colors, based on menu hover

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)
#4 by (-1 votes)

2

I have a traditional header, with a logo and links menu, I would like to switch the header colors based on the hover of each link in the menu.

h1 {
    padding: 0;
    margin: 0;
    color: #fff
}

header {
    padding: 0;
    margin: 0;
}

.header-content {
    background: grey;
    padding: 30px;
}

.nav {
    background: #333;
    height: 60px;
    position: relative;
}

.nav ul {
    float: left;
}

.nav ul,
.nav ul li {
    line-height: none;
    padding: 0;
    margin: 0;
}

.nav ul li {
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.nav ul li a {
    display: block;
    line-height: 60px;
    text-decoration: none;
    padding: 0 30px;
    color: #fff;
}

.nav ul li a:hover {
    color: #AAA
}

<header>
	<div class="header-content">
		<h1 class="logo">Header Colorido on Hover</h1>
	</div>
<nav class="nav">
	<ul>
            <li class="menu-item" id="menu-item-1"><a href="#">Header Cinza</a></li>
            <li class="menu-item" id="menu-item-2"><a href="#">Verde</a></li>
            <li class="menu-item" id="menu-item-3"><a href="#">Azul</a></li>
            <li class="menu-item" id="menu-item-4"><a href="#">Vermelho</a></li>
            <li class="menu-item" id="menu-item-5"><a href="#">Gold</a></li>
            <li class="menu-item" id="menu-item-6"><a href="#">Lime</a></li>
	</ul>
</nav>
</header>

EDIT

From an early age, I'm researching this, I found something interesting, that I kept my mouth open, given its simplicity. It works, but not as expected, not with the entire html structure, it does not work if the links are inside another element, div, nav, header ...

codepen.io/johnquimera/pen/RyEOWB

javascript jquery

asked by anonymous 19.05.2018 / 15:25

4 answers

2

I commented in the JS code what each command does to help you understand and in CSS I moved the background-color statement to header . So the entire header (except what is setting its color "over" it, as with the links bar) will receive the new color.

In addition, I have created CSS classes that will define the new colors. See if that's what you need and any questions, I can try to help you.

var $header = $("header");
var colors = ["verde", "azul", "vermelho", "etc"];

function removeCores() {
  $.each(colors, function(i, colr) {  // Para cada cor no vetor 'colors'
      $header.removeClass(colr);  // Remove a classe do header, se houver
   });
   
}

$("header li").on("mouseleave", removeCores);

$("header li").on("mouseover", function() {
   var color = $(this).attr("data-color"); // Coleta valor do atributo 'data-color'
   
   removeCores();

   if (color == "cinza") // se for cinza, sai da funcao (pois já está definida por padrão no css.
     return;
     
   $header.addClass(color); // Adiciona a classe ao header 
});

h1 {
    padding: 0;
    margin: 0;
    color: #fff
}

header {
    background: grey; /* CHANGED */
    padding: 0;
    margin: 0;
}

.header-content {
    padding: 30px; /* CHANGED */
}

.nav {
    background: #333;
    height: 60px;
    position: relative;
}

.nav ul {
    float: left;
}

.nav ul,
.nav ul li {
    line-height: none;
    padding: 0;
    margin: 0;
}

.nav ul li {
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.nav ul li a {
    display: block;
    line-height: 60px;
    text-decoration: none;
    padding: 0 30px;
    color: #fff;
}

.nav ul li a:hover {
    color: #AAA
}


/* Colors classses */
.verde {
   background-color: green;
}
.azul{
   background-color: blue;
}
.vermelho {
    background-color: red
}
.etc {
    background-color: etc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><divclass="header-content">
		<h1 class="logo">Header Colorido on Hover</h1>
	</div>
<nav class="nav">
	<ul>
<li data-color="cinza"><a href="#">Header Cinza</a></li>
<li data-color="verde"><a href="#">Verde</a></li>
<li data-color="azul"><a href="#">Azul</a></li>
<li data-color="vermelho"><a href="#">Vermelho</a></li>
<li data-color="etc"><a href="#">Etc</a></li>
	</ul>
</nav>
</header>

Selection by ID

 $header = $("header");
var colors = {
    "menu-item-01" : "cinza", 
    "menu-item-02" : "verde", 
    "menu-item-03" : "azul", 
    "menu-item-04" : "vermelho", 
    "menu-item-05" : "etc"
};

function removeCores() {
    $.each(colors, function (i, colr) {  // Para cada cor no objeto 'colors'
        $header.removeClass(colr);  // Remove a classe do header, se houver
    });

}

$("header li").on("mouseleave", removeCores);

$("header li").on("mouseover", function () {
    var id = $(this).attr("id"); // Coleta valor do atributo 'id'
    var color = colors[id];      // Seleciona o nome da classe no objeto colors.

    removeCores();

    if (color == "cinza") // se for cinza, sai da funcao (pois já está definida por padrão no css.
        return;

    $header.addClass(color); // Adiciona a classe ao header 
});

h1 {
    padding: 0;
    margin: 0;
    color: #fff
}

header {
    background: grey; /* CHANGED */
    padding: 0;
    margin: 0;
}

.header-content {
    padding: 30px; /* CHANGED */
}

.nav {
    background: #333;
    height: 60px;
    position: relative;
}

.nav ul {
    float: left;
}

.nav ul,
.nav ul li {
    line-height: none;
    padding: 0;
    margin: 0;
}

.nav ul li {
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.nav ul li a {
    display: block;
    line-height: 60px;
    text-decoration: none;
    padding: 0 30px;
    color: #fff;
}

.nav ul li a:hover {
    color: #AAA
}


/* Colors classses */
.verde {
   background-color: green;
}
.azul{
   background-color: blue;
}
.vermelho {
    background-color: red
}
.etc {
    background-color: etc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><divclass="header-content">
        <h1 class="logo">Header Colorido on Hover</h1>
	</div>
    <nav class="nav">
        <ul>
            <li id="menu-item-01"><a href="#">Header Cinza</a></li>
            <li id="menu-item-02"><a href="#">Verde</a></li>
            <li id="menu-item-03"><a href="#">Azul</a></li>
            <li id="menu-item-04"><a href="#">Vermelho</a></li>
            <li id="menu-item-05"><a href="#">Etc</a></li>
        </ul>
    </nav>
</header>

19.05.2018 / 19:12

2

You can use the .hover method of jQuery. The 1st function is the event mouseenter and the 2nd the mouseleave . Here you send the color as a parameter to another function that will change the background color of the element.

Then you get the index of the element and use that value in switch to choose its color.

See:

$(function(){
   function C(c){
      $(".header-content")
      .css("background-color", c);
   }
   
   $(".nav ul li").hover(
      function(){
         var idx = $(this).index(); // pego o índice do elemento
         var cor;
   
         switch(idx){
            case 0: // cinza
               cor = "gray";
               break;
            case 1: // verde
               cor = "green";
               break;
            case 2: // azul
               cor = "blue";
               break;
            case 3: // vermelho
               cor = "red";
               break;
            case 4: // etc
               cor = "lime";
               break;
         }
   
         C(cor);
      },
      function(){
         C("gray");
      }
   );
});

h1 {
    padding: 0;
    margin: 0;
    color: #fff
}

header {
    padding: 0;
    margin: 0;
}

.header-content {
    background: grey;
    padding: 30px;
}

.nav {
    background: #333;
    height: 60px;
    position: relative;
}

.nav ul {
    float: left;
}

.nav ul,
.nav ul li {
    line-height: none;
    padding: 0;
    margin: 0;
}

.nav ul li {
    display: inline-block;
    position: relative;
    vertical-align: top;
}

.nav ul li a {
    display: block;
    line-height: 60px;
    text-decoration: none;
    padding: 0 30px;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><divclass="header-content">
		<h1 class="logo">Header Colorido on Hover</h1>
	</div>
   <nav class="nav">
      <ul>
          <li><a href="#">Header Cinza</a></li>
          <li><a href="#">Verde</a></li>
          <li><a href="#">Azul</a></li>
          <li><a href="#">Vermelho</a></li>
          <li><a href="#">Etc</a></li>
      </ul>
   </nav>
</header>

19.05.2018 / 21:49

-1

Assigning an id for each color:

<li id="Cinza"><a href="#">Header Cinza</a></li>
<li id="Verde"><a href="#">Verde</a></li>
<li id="Azul"><a href="#">Azul</a></li>
<li id="Vermelho"><a href="#">Vermelho</a></li>
<li id="Etc"><a href="#">Etc</a></li>

In css just use the ids to solve the problem:

#Cinza:hover{background-color:grey}
#Verde:hover{background-color:green}
#Azul:hover{background-color:blue}
#Vermelho:hover{background-color:red}
#Etc:hover{background-color:etc}

No Jquery , here you change the color:

$('li').on('mouseover',function(){
    var cor = $(this).attr('id');
    $('header').css('background-color',cor);
});

Here it returns to the default color:

$('header').on('mouseleave',function(){
    $('header').css('background-color','COR PADRÃO');//onde vc coloca a cor padrão do menu
});

19.05.2018 / 15:30

ScrollTop does not work after some scrolling Input limiting file type

score 2 · Accepted Answer

John got a way to do just with CSS without having to tweak the structure of HTML, actually did not even lean on HTML to put another class or anything.

The technique does not use the adjacent ~ selector because with the menu structured in ul>li it would not work. So I did using pseudo element ::after and put .nav ul li:nth-child(1) to select the colors in the hover. One detail is that I needed to remove position:relative from some elements, but this did not affect the layout as you can see

See in the example below that you will understand better.

h1 {
    padding: 0;
    margin: 0;
    color: #fff
}

header {
    padding: 0;
    margin: 0;
    position: relative;
}
header::after {
    content: "";
    position: absolute;
    background: gray;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.header-content {
    /* background: gray; */
    padding: 30px;
}

.nav {
    background: #333;
    height: 60px;
    /* position: relative; */
}

.nav ul {
    float: left;
}

.nav ul,
.nav ul li {
    line-height: none;
    padding: 0;
    margin: 0;
}

.nav ul li {
    display: inline-block;
    /* position: relative; */
    vertical-align: top;
}
/* cores no hover */
.nav ul li:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: 1s;
}
.nav ul li#menu-item-1:hover::after {
    background: gray;
}
.nav ul li#menu-item-2:hover::after {
    background: green;
}
.nav ul li#menu-item-3:hover::after {
    background: blue;
}
.nav ul li#menu-item-4:hover::after {
    background: red;
}
.nav ul li#menu-item-5:hover::after {
    background: gold;
}
.nav ul li#menu-item-6:hover::after {
    background: lime;
}

.nav ul li a {
    display: block;
    line-height: 60px;
    text-decoration: none;
    padding: 0 30px;
    color: #fff;
}

.nav ul li a:hover {
    color: #AAA
}

<header>
    <div class="header-content">
        <h1 class="logo">Header Colorido on Hover</h1>
    </div>
    <nav class="nav">
        <ul>
            <li class="menu-item" id="menu-item-1"><a href="#">Header Cinza</a></li>
            <li class="menu-item" id="menu-item-2"><a href="#">Verde</a></li>
            <li class="menu-item" id="menu-item-3"><a href="#">Azul</a></li>
            <li class="menu-item" id="menu-item-4"><a href="#">Vermelho</a></li>
            <li class="menu-item" id="menu-item-5"><a href="#">Gold</a></li>
            <li class="menu-item" id="menu-item-6"><a href="#">Lime</a></li>
        </ul>
    </nav>
</header>