堆栈内存溢出
  繁体   English   中英

切换菜单时更改导航栏背景颜色jQuery

[英]Change nav bar background color when menu is toggled jQuery

 原文  2015-12-01 05:55:16  8   2    javascript/ jquery/ html/ css

问题描述

我试图在导航前的页面顶部放置导航栏，以允许在切换导航菜单时将背景颜色从透明更改为白色。 我尝试添加类.whitenavbar和jQuery来陪（/ navbar切换颜色 /），但是它不起作用，现在完全阻止菜单切换？

任何帮助表示赞赏！

https://jsfiddle.net/43taovan/

CSS： 

.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
}
/*----/----navlist*/

/*global styles*/
 body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}

/*----/----global styles*/

/*navigation icon*/
 #toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/

/*navigation background transition*/
 .bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}

#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}

.whitenavbar {
background: #fff;
}
/*----/----navigation background transition*/

/*navigation icon animation*/
 #toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out,     opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active     span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/

/*Nav Bar*/
 .header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 0.5px solid rgba(0, 0, 0, .2);
border-top: 0.5px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}

.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
.instbtn-cont {
  display: inline-block;
  text-align: center;
  margin-top: 10px;
  padding-bottom: 30px;
}
.instbtn-cont .instbtn {
  position: relative;
  padding: 15px 20px;
  border: 1px solid grey;
  color: grey;
  -webkit-font-smoothing: antialiased;
}
.instbtn-cont .instbtn:hover {
  border: none;
}
.instbtn-cont .instbtn:hover .line-1 {
  -webkit-animation: move1 1500ms infinite ease;
      animation: move1 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-2 {
  -webkit-animation: move2 1500ms infinite ease;
      animation: move2 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-3 {
  -webkit-animation: move3 1500ms infinite ease;
      animation: move3 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-4 {
  -webkit-animation: move4 1500ms infinite ease;
      animation: move4 1500ms infinite ease;
}
.instbtn-cont .line-1 {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  background-color: grey;
  left: 0;
  bottom: 0;
}
.instbtn-cont .line-2 {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  background-color: grey;
  left: 0;
  top: 0;
}
.instbtn-cont .line-3 {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  background-color: grey;
  right: 0;
  top: 0;
}
.instbtn-cont .line-4 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
right: 0;
bottom: 0;
}

@-webkit-keyframes move1 {
  0% {
height: 100%;
bottom: 0;
  }
  54% {
height: 0;
bottom: 100%;
  }
  55% {
height: 0;
bottom: 0;
  }
  100% {
height: 100%;
bottom: 0;
  }
}

@keyframes move1 {
  0% {
height: 100%;
bottom: 0;
  }
  54% {
height: 0;
bottom: 100%;
  }
  55% {
height: 0;
bottom: 0;
  }
  100% {
height: 100%;
bottom: 0;
  }
}
@-webkit-keyframes move2 {
  0% {
width: 0;
left: 0;
  }
  50% {
width: 100%;
left: 0;
  }
  100% {
width: 0;
left: 100%;
  }
}
@keyframes move2 {
  0% {
width: 0;
left: 0;
  }
  50% {
width: 100%;
left: 0;
  }
  100% {
width: 0;
left: 100%;
  }
}
@-webkit-keyframes move3 {
  0% {
height: 100%;
top: 0;
  }
  54% {
height: 0;
top: 100%;
  }
  55% {
height: 0;
top: 0;
  }
  100% {
height: 100%;
top: 0;
  }
}
@keyframes move3 {
  0% {
height: 100%;
top: 0;
  }
  54% {
height: 0;
top: 100%;
  }
  55% {
height: 0;
top: 0;
  }
  100% {
height: 100%;
top: 0;
  }
}
@-webkit-keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
  }
  100% {
width: 0;
right: 100%;
  }
}
@keyframes move4 {
  0% {
width: 0;
right: 0;
  }
  55% {
width: 100%;
right: 0;
  }
  100% {
width: 0;
right: 100%;
  }
}


/*----/----Nav Bar*/

/*in*/
 .in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/

/*logo*/
 .logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/

/****landscape****/
@media only screen and (max-width: 555px) { 
.nav li{
display: block;
padding: 30px;
}
}
/*----/----Landscape*/

jQuery的 

/*navigation icon animation*/
var trigger = 'X';

jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
    trigger = 'X';
    $(this).toggleClass('menu-is-active')

});

/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {


    if (trigger == 'X') {
        $("#toggle-menu").toggleClass();
        trigger = 'ham';
    }



});
$("nav").click(function (e) {
    e.stopPropagation();
    return false;
});

/*----/----navigation icon animation*/

/*toggle menu*/
jQuery("#toggle-menu").click(function () {
    jQuery(".nav").slideToggle();

});
/* click outside of nav to close toggle*/
$(document).click(function () {
    $(".nav").hide();
});
$("#toggle-menu").click(function (e) {
    e.stopPropagation();
    return false;
});
/*----/----toggle menu*/

/*navbar toggle color*/
 $("#toggle-menu").click(function (e) {
  $(".nav").addClass(".whitenavbar");
  $('.nav').addClass('navfade');
    }
    else {
        $('.nav').removeClass(".whitenavbar");
    }
});
/*----/----navbar toggle color*/

/*Jump Scroll*/
$(function () {
    var $window = $(window),
        $document = $(document),
        transitionSupported = typeof document.body.style.transitionProperty === "string",
        scrollTime = 1; // scroll time in seconds

    $(document).on("click", "a[href*=#]:not([href=#])", function (e) {
        var target, avail, scroll, deltaScroll;

        if (location.pathname.replace(/^\//, "") ==     this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
            target = $(this.hash);
            target = target.length ? target : $("[id=" +     this.hash.slice(1) + "]");

            if (target.length) {
                avail = $document.height() - $window.height();

                if (avail > 0) {
                    scroll = target.offset().top;

                    if (scroll > avail) {
                        scroll = avail;
                    }
                } else {
                    scroll = 0;
                }

                deltaScroll = $window.scrollTop() - scroll;

                if (!deltaScroll) {
                    return; // do nothing
                }
                e.preventDefault();

                if (transitionSupported) {
                    $("html").css({
                        "margin-top": deltaScroll + "px",
                            "transition": scrollTime + "s ease-in-out"
                    }).data("transitioning", scroll);
                } else {

                    $("html, body").stop(true, true)
                        .animate({
                        scrollTop: scroll + "px"
                    }, scrollTime * 1000);

                    return;
                }
            }
        }
    });

    if (transitionSupported) {
        $("html").on("transitionend webkitTransitionEnd msTransitionEnd     oTransitionEnd", function (e) {
            var $this = $(this),
                scroll = $this.data("transitioning");

            if (e.target === e.currentTarget && scroll) {
                $this.removeAttr("style").removeData("transitioning");

                $("html, body").scrollTop(scroll);
            }
        });
    }
});
/*----/----Jump Scroll*/

/*contact let me know toggle*/ 
$("#container").hide();

$("#button").on('click', function() {

    if($("#button").val() == 'thank you')
        return false;

if($("#container").is(":visible"))
return false;

$("#container").toggle();
this.value = this.value == 'send me a message' ? 'contact' : 'send me a     message';
});

 $("#button2").on('click', function(e) {
    $("#container").toggle();
    $("#button").val('thank you');
 });     
/*----/-----contact let me know toggle*/

/*navigation background fade in fade out */
$(window).scroll(function () {
    var dist = $('#panel2').offset().top;
    console.log(dist);
    if ($(window).scrollTop() > dist) {
        $('.header').addClass('bg');
        $('.header').addClass('navfade');
    }
    else {
        $('.header').removeClass('bg');
    }


});


$('.scroll').on('click', function (e) {
    e.preventDefault()

    $('html, body').animate({
        scrollTop: $(this.hash).offset().top
    }, 1500);
});

/*----/-----navigation background fade in fade out */

});
</script>

HTML： 

<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;"> 
<svg class="navinstagram" version="1.1" id="Layer_1"      xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;"      xml:space="preserve">
<path  d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6- 12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h- 21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2- 11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-     0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v- 1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7- 3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3- 3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>

<a href="" class="logo logocolorchng" style="display: inline- block;">Logo     </a>

<a id="toggle-menu">
<div> 
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>

</div>
<div class="nav">

<div class="navigation">
<ul>
<li class="navlist"><a href="" style="display: inline-block; width:100%;">Home</a></li>            
<li class="navlist"><a href="#panel2" style="display: inline-block;     width:100%;">Work</a></li>
<li class="navlist"><a href="#wrapper" style="display: inline-block;  width:100%;">Contact</a></li>
</ul>
</div>

<div id="navpromo">
        <ul>
            <li class="seemore">Want to see more? Check out my    instagram!</li>
            </li>

            <div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
            </li>
        </ul>
    </div>
</div>
</div>

2 个解决方案

解决方案1
 1  2015-12-01 06:11:58

我不确定，但是我认为它之所以不切换是因为else语句，因为它看起来像是单击时添加了这些类，如果未单击则删除了它们，但是如果如果没有单击，则不是首先将它们添加（如果有意义的话），也许这就是为什么它不进行切换的原因。

我在尝试运行JSFiddle时遇到错误（我可能只是单击错误的东西），但是如果您想在单击导航栏时将其变成白色，则可以更改CSS，因为更改CSS是更简单的解决方案首先可能不会引起触发问题。 

$(".nav").css("background", "white");

解决方案2
 1 已采纳  2015-12-01 08:31:27

尝试以下操作在为元素定义的CSS之后定义whitenavbar css。 如果要应用于其他元素，则进行相应更改。 如果您更改.nav背景，则将不可见。 下一个选项是更改.navigation 

/*toggle menu*/

jQuery("#toggle-menu").click(function () {
    jQuery(".nav").slideToggle();
    if($("div.header").hasClass("whitenavbar") == false){
        $("div.header").addClass("whitenavbar");
    }else{
    $("div.header").removeClass("whitenavbar");
    }

});

css注意到它在.header {} css之后 

    /*Nav Bar*/
     .header {
        /*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        background-color: rgb(184, 184, 184);
        /*background: none;*/
    }
    .whitenavbar {

        background: teal;
    }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery .slideToggle切换时更改&#39;x&#39;类背景 如何使用 jquery 更改导航链接的颜色或背景颜色？ 当我滚动时，我的导航栏颜色不想随 jquery 改变？ 动态菜单背景颜色与jQuery的变化 使用Bootstrap：导航栏切换时，JS功能停止工作 单击/切换时更改div的背景 仅使用 Javascript 单击导航菜单选项时，如何使导航菜单选项更改颜色或背景？ 如何在到达下一个 div 时更改导航栏颜色 当背景图像改变时改变菜单颜色 滚动到顶部时如何将导航背景颜色更改为透明？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM