javascript - HTML/CSS Panel icon shows panel but doesn't close it -


ive created panel using html , css only. want panel on bottom div of screen , when tap image (that used replace default text) panel rises bottom. i've got down part, however, rather new panels can't figure out how use same image close panel well.

i'm not against using javascript or jquery, im learning two, skills not quite of yours!

here html , css

<nav id="nav" role="navigation">   <ul>      <li>         <a class="findme" href="#" aria-haspopup="true"><img   src="assets/whitegearicon.png" /></a>         <ul>             <li ><a href="#"><img class="thedudeabides"  src="assets/tools/timericon.png" /></a></li>             <li><a href="#"><img class="obviouslyyourenotagolfer"  src="assets/tools/flashicon.png" /></a></li>          </ul>     </li>  </ul> </nav>  nav { /* container */ } #nav > {     display: none;  } #nav li {     position: relative; }  /* first level */  #nav > ul {     height: 3.75em; }     #nav > ul > li     {         width: 25%;         height: 100%;         float: left;     }  /* second level */  #nav li ul {     display: none;     padding: 0;     float: right !important;     position: relative;     background-color: grey;     width: 65%;     height: 35%; }     #nav li:hover ul     {         display: block;     }  .findme img{ position: absolute; left: 300%; top: 50%; width: 45%; } 

thank time.


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -