Focus / active event in a header

Question

Focus / active event in a header

Navigation

#1 by (1 votes)

1

I have a traditional header, which thanks to @hugocsl, which helped me in this question , a transition of colors, when a menu item is in hover . Everything works fine, what I want now is to keep the same effect, in addition to hover , also with focus/active

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>

css

asked by anonymous 28.05.2018 / 20:22

1 answer

ParseInt () is returning NaN menu overlap the entire document

score 1 · Accepted Answer

First you need to clarify the difference between :focus and :active : the first is when the element gains focus, either by clicking on it or by using the TAB key; the second is when you click and hold the button, and when you drop it, the element loses :active .

In this case you do not need much of :active (except you want to do some other effect to the element at the moment of the click).

Actually only CSS has no way because it does not have as a pseudo ::after to be on top of the other, since all have the same z-index: -1 , ie always the last visible will be over the previous ones.

In this case I was able to develop code in jQuery using events and hover , click and focus . It was also necessary to change the CSS (see the parts commented on it), more specifically the classes that alter the background color of the element.

See:

var focado; // variável para guardar a classe do botão com foco
$(".menu-item a").on("focus click", function(e){
   if(e.type == "focus"){
      var id = $(this).parent().attr("id");
      $(".header-content").addClass(id);
      focado = id;
   }else{
      e.stopPropagation(); // excluo os botões do evento click
   }
});

$(".menu-item a").hover(
   function(){
      var id = $(this).parent().attr("id");
      if(focado != id){
         $(".header-content").addClass(id).removeClass(focado);
      }
   },
   function(){
      var id = $(this).parent().attr("id");
      if(focado){
         $(".header-content").removeClass(id).addClass(focado);
      }else{
         $(".header-content").removeClass(id);
      }
   }
);

// ao clicar na página, reseto tudo
$(document).click(function(){
   $(".header-content").attr("class", "header-content");
   var focado;
});

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 a:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: 1s;
}*/

.header-content.menu-item-1{
    background: gray;
}
.header-content.menu-item-2{
    background: green;
}
.header-content.menu-item-3{
    background: blue;
}
.header-content.menu-item-4{
    background: red;
}
.header-content.menu-item-5{
    background: gold;
}
.header-content.menu-item-6{
    background: lime;
}

/*
.nav ul li#menu-item-1 a:hover::after{
    background: gray;
}

.nav ul li#menu-item-2 a:hover::after{
    background: green;
}

.nav ul li#menu-item-3 a:hover::after{
    background: blue;
}
.nav ul li#menu-item-4 a:hover::after{
    background: red;
}
.nav ul li#menu-item-5 a:hover::after{
    background: gold;
}
.nav ul li#menu-item-6 a: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
}

<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 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>