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.