CODEWITHSUNDEEP
javascriptjqueryhtmlcss
o_s_a_k_a
o_s_a_k_a

Reputation: 71

How to apply css rules for hidden submenu?

How to apply the css rules for hidden submenu? I've tried to add some JS, but there is a problem as it doesn't work. Below there are the samle of the code I work about. Idea is that on the click to anchor text 'A' it should be shown a submenu. Thanks in advance for any advices.

var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
  if (subToggle){
    subToggle.addEventListener("click",
      function(e){
          if(sub.className=="open"){
          sub.className="";
      }else{
        sub.className="open";
        }
        e.preventDefault();
        }, false );
  }
body {
	background: #fff;
	font-family: 'Verdana', sans;
	color: #fff;
	text-align: center;
}

@media only screen and (max-width:768px){
	body{font-size:16px;}
}

@media only screen and (min-width:769px){
	body{font-size:32px;}
}

ul li{list-style-type: none;}

li{display:inline;}

a, li a{
  text-decoration: none;
	outline: none;
  color:#fff;
}

#menu{  
  width:100vw;
  height:100vh;
  display:block;
  position:absolute;
  top:0;
  left:0;
  background:#eacebe;
  overflow:hidden;
}

#subBox{
  max-width:0;
  max-height:0;
  overflow:hidden;
}

#subBox .open{
  width:200px;
  height:200px;
  display:block;
  position:relative;
  background:gray;
  color:#fff;
}

.skip{
	clip: rect(0 0 0 0);
	margin: -1px;	
	overflow:hidden;
	display: none;
	position: absolute; 
  top: -1px; 
  left: -1px;
	z-index: -1;
}
<body>
  <h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
  <div id='nav'>
    <nav nav ul>
      <h2 class='skip'>Menu with one submenu</h2>
       <div id='menu'>
         <ul>
           <li id='submenu'>
            <a href='/a'>A  <!--A-->
              <div id="subBox">
                 <ul>
                  <li><a href='/aOne'>1</a><li>    <!--A/1-->
                  <li><a href='/aTwo'>2</a></li>   <!--A/2-->
                  <li><a href='/aThree'>3</a></li> <!--A/3-->
                </ul>
              </div>
             </a>
           </li>
           <li><a href='/b'>B</a><li>    <!--B-->
           <li><a href='/c'>C</a></li>   <!--C-->
          </ul>
        </div>
      </nav>
    </div>
</body>

Upvotes: 0

Views: 419

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You were close. You're applying the .open class to #subBox, so change your selector to #subBox.open. 

var sub=document.querySelector("#subBox"),
subToggle=document.querySelector("#submenu");
  if (subToggle){
    subToggle.addEventListener("click",
      function(e){
          if(sub.className=="open"){
          sub.className="";
      }else{
        sub.className="open";
        }
        e.preventDefault();
        }, false );
  }
body {
  background: #fff;
  font-family: 'Verdana', sans;
  color: #fff;
  text-align: center;
}

@media only screen and (max-width:768px) {
  body {
    font-size: 16px;
  }
}

@media only screen and (min-width:769px) {
  body {
    font-size: 32px;
  }
}

ul li {
  list-style-type: none;
}

li {
  display: inline;
}

a,
li a {
  text-decoration: none;
  outline: none;
  color: #fff;
}

#menu {
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #eacebe;
  overflow: hidden;
}

#subBox {
  max-width: 0;
  max-height: 0;
  overflow: hidden;
}

#subBox.open {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
  background: gray;
  color: #fff;
  overflow: visible;
  max-height: 100%;
  min-height: 100%;
}

.skip {
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  display: none;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: -1;
}
<body>
  <h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
  <div id='nav'>
    <nav nav ul>
      <h2 class='skip'>Menu with one submenu</h2>
      <div id='menu'>
        <ul>
          <li id='submenu'>
            <a href='/a'>A  <!--A-->
              <div id="subBox">
                 <ul>
                  <li><a href='/aOne'>1</a>
            <li>
              <!--A/1-->
              <li><a href='/aTwo'>2</a></li>
              <!--A/2-->
              <li><a href='/aThree'>3</a></li>
              <!--A/3-->
        </ul>
      </div>
      </a>
      </li>
      <li><a href='/b'>B</a>
        <li>
          <!--B-->
          <li><a href='/c'>C</a></li>
          <!--C-->
          </ul>
  </div>
  </nav>
  </div>
</body>

Upvotes: 1

Related Questions