Advanced Search

Faked Selectbox

/ Published in: XHTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
  3. <head>
  4. 	<title></title>
  5. 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  6. 	<script type="text/javascript">document.documentElement.className += 'js';</script>
  7. 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  8. 	<style type="text/css">		
  9. 		ul#state-menu {
  10. 			width: 240px;
  11. 			background: #ccc;
  12. 		}
  13. 		ul#state-menu li {
  14. 			list-style-type: none;
  15. 		}
  16.                 ul#state-menu ul,
  17. 		ul#state-menu li.first,
  18. 		.js ul#state-menu li.last {
  19. 			display: none;
  20. 		}		
  21. 		ul#state-menu li.last,
  22. 		.js ul#state-menu li.first,
  23. 		ul#state-menu li.expand ul {
  24. 			display: block;
  25. 		}
  26. 	</style>
  27. 	<script type="text/javascript">
  28. 		$(document).ready(function() {	
  29. 			$('ul#state-menu li.first').toggle(function() {
  30. 				$(this).addClass('expand');
  31. 			}, function() {
  32. 				$(this).removeClass('expand');
  33. 			});
  34. 		 });
  35. 	</script>
  36. </head>
  37. <body>
  38. 	<ul id="state-menu">
  39. 		<li class="first"><a href="#">Main Item</a>
  40. 			<ul>
  41. 				<li><a href="#">Item 1</a></li>
  42. 				<li><a href="#">Item 2</a></li>
  43. 				<li><a href="#">Item 3</a></li>
  44. 			</ul>
  45. 		</li>
  46. 		<li class="last"><a href="#">Noscript Item</a></li>
  47. 	</ul>
  48. </body>
  49. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.