<!-- javascript --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#resmenu").click(function(){ $("#menudo").slideToggle("slow"); }); }); </script>
<div id="menu"> <ul> <li><a class="active" href="#">Menu 1</a> <ul> <li><a href="#">Menu 1.1</a></li> <li><a href="#">Menu 1.2</a> <ul> <li><a href="#">Menu 1.2.1</a></li> <li><a href="#">Menu 1.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Menu 2.1</a></li> <li><a href="#">Menu 2.2</a> <ul> <li><a href="#">Menu 2.2.1</a></li> <li><a href="#">Menu 2.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> </ul> </div> <div id="resmenu"> <div id="lineline"> <div id="linebar"> </div> <div id="linebar"> </div> <div id="lastline"> </div> </div> Menu </div> <div id="menudo"> </div>
<script type="text/javascript"> var MyDiv1 = document.getElementById('menu'); var MyDiv2 = document.getElementById('menudo'); MyDiv2.innerHTML = MyDiv1.innerHTML; </script>
body { margin: 0; font-family: arial; line-height: 1.5em; } #menu ul li:hover > ul { display: block; } #menu ul li a:hover > ul { display: block; } #menu{ width: auto; margin-top: 11px; margin-left: 20px; } #menu ul ul { text-align:left !important; display: none; } #menu ul { list-style: none outside none; display: block; line-height:1px; padding:0; } #menu ul:after { display: block; } #menu ul li { float: left; position:relative; line-height:19px; } #menu > ul > li > a:hover { border-bottom: 4px solid #0097C4 !important; color:#0097C4; background-repeat: repeat; } #menu ul li a { color: #666666; font-size: 12px; padding: 27px 15px 33px 15px; text-decoration: none; text-transform: uppercase; border-bottom: 4px solid #00FF00 !important; display: block; position: relative; transition: all 0.2s linear 0s; position:relative; } #menu .active{ border-bottom: 4px solid #0097C4 !important; color:#0097C4; background-repeat: repeat; } #menu ul ul { border-top: 1px solid #ECECEC !important; position: absolute; z-index:1; background-color: #FFFFFF; border: 1px solid #ECECEC; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-left:-1px !important; margin-top: 1px !important; } #menu ul ul li { float: none; position: relative; margin-right: 0 !important; width:230px; line-height:19px; margin: -1px 0 0; border-left: medium none; } #menu ul ul li a { font-size: 12px; padding: 8px 10px !important; text-transform: uppercase; border: medium none !important; border-bottom: 1px solid #ECECEC !important; } #menu > ul > li > ul > li > a:hover { color: #0097C4 !important; } #menu ul ul ul { position: absolute; left: 100%; top:0; width:230px; } #menu ul ul ul li a { padding: 8px 10px; } #menu ul ul ul li a:hover { color: #0097C4 !important; } #resmenu{ display: none; background-color: #555555; color: #FFFFFF; cursor: pointer; font-size: 23px; padding: 10px; } #linebar { background-color: #FFFFFF; height: 4px; margin-bottom: 4px; } #lineline { float: left; height: 19px; margin-right: 7px; width: 20px; margin-top: 1px; } #lastline { background-color: #FFFFFF; height: 4px; } #menudo{ display: none; background-color: #555555; } a { text-decoration: none; } #menudo ul { margin: 0; padding: 0; list-style: none; } #menudo ul ul li a { padding-left: 20px; } #menudo ul ul ul li a { padding-left: 30px; } #menudo ul li { border-top: 1px solid #747474; } #menudo ul li a { color: #FFFFFF; display: inline-block; font-size: 17px; padding: 10px 0 10px 10px; } @media only screen and (max-width: 767px) { #menu { display: none; } #resmenu{ display: block; } } @media only screen and (min-width: 480px) and (max-width: 767px) { #menu { display: none; } #resmenu{ display: block; } }
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.