Toggle header colors based on menu Hover

Asked

Viewed 283 times

2

I have a traditional header, with logo and links menu, I would like to change 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

Since early on, I’m researching this, I found something interesting, which I was left open-mouthed, given its simplicity. It works, but not as expected, not with the whole html structure, it doesn’t work if the links are inside another element, div, Nav, header...

codepen.io/johnquimera/pen/Ryeowb

javascript jquery
  • 1

    John says this option with the selector ~ was the first thing I thought rss, but with the menu using ul>li vc will not be able to use this selector. I made an option only with css tb, but a little different, the detailed explanation is in my answer. []’s

4 answers

2

You can use the method .hover jQuery. The first function is the event mouseenter and the second paragraph mouseleave. Then you send the color as a parameter to another function that will change the background color of the element.

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

Behold:

$(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>
	<div class="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>

  • very good, I intend to use this in a wordpress theme, so it would be better to use IDS instead of the color names in the code. menu-item-01, menu-item-02, etc.

  • I didn’t use color names, I used the index das Lis

  • type like: https://codepen.io/johnquimera/pen/RyEOWB only that it does not work within the elements, alias I was really impressed by this simple solution with only css, works even in IE7. How is that possible?

  • With this codepen structure it is easy only with CSS because Lis are sisters of the div main-header... in this case here there is no way to select a parent from children with CSS

2


John got a way to do only with CSS without having to mess with the HTML structure, actually I didn’t touch HTML to put another class or anything.

The technique does not use the adjacent selector ~ as the menu is structured in ul>li would not work. So I did using pseudo element ::after and put a .nav ul li:nth-child(1) to select colors in the Hover. One detail is that I needed to withdraw position:relative of 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>

  • Simply Perfect. I will use them with IDS, it is more convenient, since it is for a wordpress theme. It works as expected. Thx.

  • 1

    Good that it served you @Johnquimera already accepted the edition to stay as a reference if you need it again here.

  • hugocsl, it would be possible to maintain the same effect, also with :phocus?

  • @Johnquimera you want to keep the color after you click right? I think with Focus would work on mobile maybe, on the desktop I tested here and it didn’t work. With target tb will not give pq is in the after element... Unfortunately this model with CSS believe only work that way. But if you will have this menu on different pages, like a.html, b.html, you can create a class . active and leave the color marked. Type .nav ul li#menu-item-3.active::after { } ai on the item3 page the color becomes green understands

  • Exactly, I understand. You know, is something like superfish employee? I am trying to implement the js-track-Focus here, it is almost similar to superfish, lighter I think.

  • @Johnquimera I think I can’t help you, I don’t know these plugins :/

  • 1

    I understand. Usually when we have a normal menu with submenu, and we focus on it with the left mouse button, it closes right? that js-track-Focus prevents this from happening. I’m trying to apply it to your code, I’m not getting it for some reason. See a demo of this plugin: https://codepen.io/vmitsaras/pen/ozOdYm

  • 1

    @Johnquimera understood what you want, in the last case I think that with "preventDefault()" and "setTimeout()" you can do something very similar without the need for a plugin. I don’t know anything about JS and pretty much anything about jQuery, but right now I’d advise you to open up another question if that’s exactly what you want. Then someone with more experience than me in this area will be able to help you ;)

  • Thank you, I’ll do it. ^^

Show 4 more comments

2

I commented in JS code what each command does to help you understand and in CSS moved the instruction background-color to the header. Thus, any header (except the one that is setting color "above" it, as with the link bar) will receive the new color.

Plus, I’ve 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>
	<div class="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>
    <div class="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>

  • 1

    Wesley Gonçalves, your solution is perfect, but see, I intend to use this in a wordpress theme, therefore, would be better use of IDS instead of color names. menu-item-01, menu-item-02, etc.

  • Since early on, I’m researching this, I found something interesting, which I was left open-mouthed, given its simplicity. It works, but not as expected, not with the whole html structure, it doesn’t work if the links are inside another element. see: https://codepen.io/johnquimera/pen/RyEOWB

  • Thank you, @John Chimera. In fact your codepen example doesn’t work because it uses next element selector ~. I’ve updated the answer by selecting the item from the id navigation bar, see if that’s what you need. In jQuery, instead of an array, I used an object that relates the item ID to the CSS class that will be added to the header.

-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 the cssjust 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}

In the Jquery, here you change the color:

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

Here back to standard color:

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

    Thanks, but that’s not it. The menu’s Hover should be just the cue to toggle the Header! color is in the header that the magic should happen. I want an effect similar to tecmundo.

  • I edited the answer there with a possibility

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.