I have a css code for a navigation menu bar that I just copied.
.sub-header .sub-header-container-menu > li:hover .sub-header-hover-container {
display: block;
}
I'm trying to disable the dropdown or enable it base on the value of my Select object onChange action.
Let's say value is 1:
document.getElementById('sub-header-hover-container').style.display="block";
Let's say value is 2:
document.getElementById('sub-header-hover-container').style.display="none";
But it's not working...
Any ideas will be greatly appreciated.
function getValue(selectObject) {
if (selectObject.value == 1){
document.getElementById('navBar').style.display="block";
} else if (selectObject.value == 2){
document.getElementById('navBar').style.display="none";
}
}.sub-header .sub-header-container-menu > li:hover .sub-header-hover-container{
display: block;
}<select id="selectValue" onchange="getValue(this)">
<option value="1" selected>Show</option>
<option value="2">Hide</option>
</select>
<nav id="navBar" class="sub-header">
<ul>
<li>Hi</li>
<li>Hi</li>
</ul>
</nav>You have used "getElementById" with classes. Add an id attribute to the nav bar and set a value to it. Then change the id of "getElementById" to the nav bar's id.
Thanks and best regards!