バーガーメニューの色を、その背景色と同じにならないように変更します。

メニューを開くための固定ハンバーガーアイコンを持つ1ページのWebサイトを構築しています。バーガーアイコンは、一部のページの特定の背景色と同じ色をしています。したがって、バーガーアイコンがこれらのページにあるとき、それは見えません。私は同じ色のページにあるときにハンバーガーアイコンの色を変更できる方法を探しています。バーガーメニューの色を、その背景色と同じにならないように変更します。

バーガーアイコンは通常青色で、下のdivは白色ですが、ここでバーガーアイコンは青色のままです。バーガーアイコンがこのdivに達したときに次のdivが青い場合は、その色が白に変わります。

私のバーガーアイコンは、以下のCSSを持つ空のdivで、バーガーアイコンのように見えます。ハンバーガーのアイコンは、固定位置の他のdivにラップされています。私が欲しいもの

//HTML Code 
<section class="buttonset"> 
    <div id="nav_list"></div> 
</section> 

//CSS Code 
.buttonset 
{ 
    height: 50px; 
    position: fixed; 
    top: 53px; 
    left: 55px; 
    z-index: 1; 
} 

#nav_list 
{ 
    cursor: pointer; 
    height: 30px; 
    width: 41px; 
} 

#nav_list:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 2px; 
    width: 24px; 
    height: 0.17em; 
    background: #71ADBE; 
    box-shadow: 0 6px 0 0 #71ADBE, 0 12px 0 0 #71ADBE; 
    border-radius: 2px; 
}

は、その下のdivの背景色は、バーガーアイコンの背景色と同じであるときに、異なる色にバーガーアイコンの背景色を変更することです。

if（バーガーアイコン=青&ホームページ=青）{バーガーアイコンの背景色が白に変わります。 }

これを達成するには、バーガーアイコンの色を変更できるように、ページの背景色が何であるかをチェックするコードを継続して実行する必要があります。

どうすればよいですか？たぶん、ページがjavascriptまたはjqueryを使用している背景色を検出し、バーガーアイコンの色を変更しますか？

ありがとう

出典

2016-05-04 user3697612

私たちは、少なくともあなたを助けるために「バーガー」のHTML、および好ましくはいくつかのCSSを参照してくださいするつもりです。 – krillgar

あなたのコードの問題の解決に向けて、コードまたはjsFiddleの例を投稿してください。 – styke

HTML CSSとJavaScriptでいくつかの一般コードを使用することができます...最も可能性の高い解決策は、現在のbgの色を変数に保存し、この変数を使用してバーガーに追加することです。詳細を追加すると更新されました –

EDIT更新HTMLとCSS私はこれは、ボディカラーは、バーガーの色とそう白にバーガーボタンを変更した場合に一致するかどうかをチェックされている別のフィドルにhttps://jsfiddle.net/snpsp6as/4/

を作成しました。

var element = document.getElementsByTagName("BODY")[0]; 
    var style = window.getComputedStyle(element, ""); 
    var bgColor = style.getPropertyValue("background-color"); 
    var color = window.getComputedStyle(document.querySelector('#nav_list'), ':before').getPropertyValue('background-color'); 

    if (bgColor == color) { 
    document.styleSheets[0].addRule('#nav_list:before', 'background: white !important; box-shadow: 0 6px 0 0 white, 0 12px 0 0 white !important;'); 
    }

それは私が白

<div id="div1"> 
    <h1 id="myH1">Blue</h1> 
</div> 

<script> 
    var element = document.getElementById("div1"); 
    var style = window.getComputedStyle(element, ""); 
    var bgColor = style.getPropertyValue("background-color"); 
    alert("The background color is: " + bgColor); 
    if (bgColor === "rgb(0, 0, 255)") { 
    document.getElementById("myH1").style.color = "white"; 
    } 

</script>

出典

2016-05-04 16:54:11

これは私が必要とするものの近くにあります。つまり、ユーザーがバーガーアイコンと同じ背景色のページに到達すると、バーガーアイコンの色を変更したいということです。これは一度起こることはありませんが、ユーザーがウェブサイトを使用しているときは常に実行する必要があります – user3697612

@ user3697612はい、このスクリプトがページに配置されている限り、すべてのページで実行されます。 –

@ user3697612 cssの例と私はそれを働かせます –

-1

プログラムではありません。少なくとも、ブラウザやプラットフォームを問わず普遍的に働くような方法ではありません。最も合理的なアプローチ（そして無数の企業のウェブサイトで使用される手法）は、画像の2つのバージョンを持ち、背景の青の値をチェックする単純なifステートメントで（おそらく）javascriptを使用して呼び出すことです。

バックグラウンドが画像の場合は、少し厄介で、1ページあたりの手作業による介入が必要な場合があります。

出典

2016-05-04 16:47:22

免責事項：これは単なる一般的なコードであり、質問が詳細を取得すると更新されます。

var bgcol = $(this).css('background-color');

バックグラウンドのbgcolorを保存します。この例では背景が選択されています。

$(this).css('background-color', bgcol);

この例では、バーガーをバックグラウンドに追加します。この例では、バーガーが選択されています。

出典

2016-05-04 16:49:43

私は質問から推測できるものを使用して、バーガーアイコンが表示されているかどうかに基づいて背景色を自動的に変更するソリューションを探しています。

if ($(".logo").css('display') == 'none') { 
    $("html").css("background-color", "yellow", "!important"); 
}

ロゴがなしに特異的に設定されている場合、理論的には、この作業をする必要があります。

それ以外の場合は、ロゴが存在するかどうかを識別し、noneに変更する追加のJavascriptがあります。それが探しているものなら、あなたの質問を編集する必要があります。オフに基づいて

Fiddle Link

出典

2016-05-04 16:51:15

いいえ、バーガーアイコンが常に表示されます。私が望むのは、ユーザーがハンバーガーのアイコンと同じ背景色のページに達すると、バーガーのアイコンの色が変わることです。 – user3697612

にテキストを変更します青場合は、[はい、これは背景色青とその探しているフィドルhttps://jsfiddle.net/snpsp6as/

を見るでしょう必要な色成分の分析を使用します。（あなたは赤と青のアイコンを持っていた場合）ここでは赤色の一例です：

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<body style="background-color: #F00"> 
<P id=value></P> 
<script> 
var color = $('body').css("background-color"); 
var red = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)[1]; 
//if red is too intense, we might want to avoid using the red icon 
// (although it would be fine on a white background) 
if (red > 100) { 
    $('#value').html("too red - choose a blue icon"); 
} else { 
    $('#value').html("not too red - chose a red icon"); 
} 
</script> 
</body> 
</html>

出典

2016-05-04 16:56:56 Igor

バーガーメニューの色を、その背景色と同じにならないように変更します。

答えて

関連する問題