CODEWITHSUNDEEP
javascripthtmlcss
Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Pure CSS dropdown menu click to hide or show div?

I made the following. I want to click on list item to toggle next div.

JSFiddle Demo

When click on list item,

<li><a href="#">Create/Read/Manipulate</a></li>

next div.submenu display, again click to hide to reflect toggle like effect in jQuery.

<div class="submenu"> 
    <a href="#">DOM</a><br /> 
    <a href="#">Reader/Writer</a><br /> 
    <a href="#">SimpleXML</a><br /> 
</div>

I do not want to use jQuery. Pure CSS or JavaScript is welcome.

#leftcolumn {
    width: 18%;
    margin: 3px;
    padding: 0;
    display: inline;
}
#leftcolumn ul.leftmenu {
    list-style: none;
    text-align: left;
    margin: 0 5px 3px 10px;
    padding: 0px;
}
#leftcolumn ul.leftmenu li {
    border-bottom: 1px solid #EFF0F1;
    font-size:14px;
    padding: 1px 0px;
}
#leftcolumn ul.leftmenu li a {
    line-height: 20px;
    color: #333;
    text-decoration: none;
}
#leftcolumn ul.leftmenu li a:hover {
    color: #FA7837;
}
#leftcolumn ul.leftmenu li#activemenu a {
    color: #FA7837;
}
#leftcolumn ul.leftmenu .submenu {
    margin: 3px 0 3px 7px;
}
#leftcolumn ul.leftmenu .submenu a {
    color: #333;
    font-weight: normal;
    font-size:14px;
    text-decoration: none;
    line-height: 1.3em;
}
#leftcolumn ul.leftmenu .submenu a:hover {
    color: #F9864D;
    text-decoration:underline;
}
#leftcolumn ul.leftmenu .submenu a#activesubmenu {
    color: #F9864D;
}
<table id="maintable" cellspacing="0" cellpadding="0">
  <tr>
    <td id="leftcolumn" >
      <ul class="leftmenu">			
        <li><a href="#">CDATA</a></li>	
        <li><a href="#">Create/Read/Manipulate</a></li>
        <div class="submenu"> 
          <a href="#">DOM</a><br /> 
          <a href="#">Reader/Writer</a><br /> 
          <a href="#">SimpleXML</a><br /> 
        </div>
        <li><a href="#">Entity Declaration</a></li>	
        <li><a href="#">Create/Read/Manipulate</a></li>
        <div class="submenu"> 
          <a href="#">DOM</a><br /> 
          <a href="#">Reader/Writer</a><br /> 
          <a href="#">SimpleXML</a><br /> 
        </div>
      </ul>
    </td>
  </tr>
</table>

Upvotes: 1

Views: 5275

Answers (4)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

I found two different solution,

1.) Use <input/> type checkbox,

li input[id][type="checkbox"] {
    position: absolute;
    left: -1000px;
    top: -1000px;
}
input[id] ~ div[id] {
    display: none;
}
input[id]:checked ~ div[id] {
    display: block;
}

View demo jsFiddle

2.) Open submenu, when mouse hover,

#leftcolumn ul.leftmenu #submenu a:hover {
  color: #F9864D;
  text-decoration:underline;
}
#leftcolumn ul.leftmenu #submenu {
  display: none;
}
#leftcolumn ul.leftmenu li:hover #submenu {
  display: block;
}
#leftcolumn ul.leftmenu #submenu a#activesubmenu {
  color: #F9864D;
}

View demo jsFiddle

Upvotes: 1

techy-coder
techy-coder

Reputation: 83

Check Out this, This is will work. use,
    <li><a href="#" onclick="enableDiv();">Create/Read/Manipulate</a></li>   

                      <style>
                        #leftcolumn {
                        width: 18%;
                        margin: 3px;
                        padding: 0;
                        display: inline;
                    }
                    #leftcolumn ul.leftmenu {
                        list-style: none;
                        text-align: left;
                        margin: 0 5px 3px 10px;
                        padding: 0px;
                    }
                    #leftcolumn ul.leftmenu li {
                        border-bottom: 1px solid #EFF0F1;
                        font-size:14px;
                        padding: 1px 0px;
                    }
                    #leftcolumn ul.leftmenu li a {
                        line-height: 20px;
                        color: #333;
                        text-decoration: none;
                    }
                    #leftcolumn ul.leftmenu li a:hover {
                        color: #FA7837;
                    }
                    #leftcolumn ul.leftmenu li#activemenu a {
                        color: #FA7837;
                    }
                    #leftcolumn ul.leftmenu #submenu {
                        margin: 3px 0 3px 7px;
                    }
                    #leftcolumn ul.leftmenu #submenu a {
                        color: #333;
                        font-weight: normal;
                        font-size:14px;
                        text-decoration: none;
                        line-height: 1.3em;
                    }
                    #leftcolumn ul.leftmenu #submenu a:hover {
                        color: #F9864D;
                        text-decoration:underline;
                    }
                    #leftcolumn ul.leftmenu #submenu a#activesubmenu {
                        color: #F9864D;
                    }
                    </style>
                    <script>
                    function enableDiv()
                    {
                         var e = document.getElementById("submenu");
                           if(e.style.display == 'block')
                              e.style.display = 'none';
                           else
                              e.style.display = 'block';
                    }
                    </script>
                    <table id="maintable" cellspacing="0" cellpadding="0">
                      <tr>
                        <td id="leftcolumn" >
                            <ul class="leftmenu">       
                                            <li><a href="#">Syntax/Rules</a></li>               
                                            <li><a href="#">Data</a></li>   
                                            <li><a href="#">CDATA</a></li>  
                                            <li><a href="#"  
                                           onclick="enableDiv();">Create/Read/Manipulate</a></li>
                                <div id="submenu" style="display:none;"> 
                                    <a href="#">DOM</a><br /> 
                                    <a href="#">Reader/Writer</a><br /> 
                                    <a href="#">SimpleXML</a><br /> 
                                </div>
                                            <li><a href="#">Entity Declaration</a></li> 
                                            <li><a href="#">How To Write</a></li>
                                    </ul>
                        </td>
                      </tr>
                    </table>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

As you specifically mentioned using the 'click' event:

Your corrected HTML (only <li> elements are valid children of a <ul> or <ol> element):

<li>
    <input id="demo" type="checkbox" />
    <label for="demo">Create/Read/Manipulate</label>
    <div id="submenu"> <a href="#">DOM</a>

        <br /> <a href="#">Reader/Writer</a>

        <br /> <a href="#">SimpleXML</a>

        <br />
    </div>
</li>

And additional CSS:

/* to emulate the 'feel' of the other <a> elements: */
label {
    cursor: pointer;
}

/* move the checkbox outside of the visual field to hide it: */
li input[id][type="checkbox"] {
    position: absolute;
    left: -1000px;
    top: -1000px;
}

/* styling <div> elements with an [id] attribute that are a subsequent
   sibling of an <input> with an [id]: */
input[id] ~ div[id] {
    display: none;
}

/* styling the subsequent sibling <div> element of a :checked <input>
   that has an [id]: */
input[id]:checked ~ div[id] {
    display: block;
}

JS Fiddle demo.

This employs the ability of <input /> elements, of types checkbox and radio to preserve a state outside of :hover events, and use of the :checked pseudo-class to style elements based upon that state.

Bringing the relevant <div> element inside of the <li> then allowed use of the general-sibling combinator (the ~) to target that <div> based on the state (:checked/unchecked) of the checkbox.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You can use hover.

#leftcolumn {
  width: 18%;
  margin: 3px;
  padding: 0;
  display: inline;
}
#leftcolumn ul.leftmenu {
  list-style: none;
  text-align: left;
  margin: 0 5px 3px 10px;
  padding: 0px;
}
#leftcolumn ul.leftmenu li {
  border-bottom: 1px solid #EFF0F1;
  font-size:14px;
  padding: 1px 0px;
}
#leftcolumn ul.leftmenu li a {
  line-height: 20px;
  color: #333;
  text-decoration: none;
}
#leftcolumn ul.leftmenu li a:hover {
  color: #FA7837;
}
#leftcolumn ul.leftmenu li#activemenu a {
  color: #FA7837;
}
#leftcolumn ul.leftmenu #submenu {
  margin: 3px 0 3px 7px;
}
#leftcolumn ul.leftmenu #submenu a {
  color: #333;
  font-weight: normal;
  font-size:14px;
  text-decoration: none;
  line-height: 1.3em;
}
#leftcolumn ul.leftmenu #submenu a:hover {
  color: #F9864D;
  text-decoration:underline;
}
#leftcolumn ul.leftmenu #submenu {
  display: none;
}
#leftcolumn ul.leftmenu li:hover #submenu {
  display: block;
}
#leftcolumn ul.leftmenu #submenu a#activesubmenu {
  color: #F9864D;
}
<table id="maintable" cellspacing="0" cellpadding="0">
  <tr>
    <td id="leftcolumn" >
      <ul class="leftmenu">		
        <li><a href="#">Syntax/Rules</a></li>				
        <li><a href="#">Data</a></li>	
        <li><a href="#">CDATA</a></li>	
        <li><a href="#">Create/Read/Manipulate</a>
          <div id="submenu"> 
            <a href="#">DOM</a><br /> 
            <a href="#">Reader/Writer</a><br /> 
            <a href="#">SimpleXML</a><br /> 
          </div></li>
        <li><a href="#">Entity Declaration</a></li>	
        <li><a href="#">How To Write</a></li>
      </ul>
    </td>
  </tr>
</table>

Upvotes: 5

Related Questions