Faked Selectbox


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



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. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  4. <script type="text/javascript">document.documentElement.className += 'js';</script>
  5. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  6. <style type="text/css">
  7. ul#state-menu {
  8. width: 240px;
  9. background: #ccc;
  10. }
  11. ul#state-menu li {
  12. list-style-type: none;
  13. }
  14. ul#state-menu ul,
  15. ul#state-menu li.first,
  16. .js ul#state-menu li.last {
  17. display: none;
  18. }
  19. ul#state-menu li.last,
  20. .js ul#state-menu li.first,
  21. ul#state-menu li.expand ul {
  22. display: block;
  23. }
  24. </style>
  25. <script type="text/javascript">
  26. $(document).ready(function() {
  27. $('ul#state-menu li.first').toggle(function() {
  28. $(this).addClass('expand');
  29. }, function() {
  30. $(this).removeClass('expand');
  31. });
  32. });
  33. </script>
  34. </head>
  35. <ul id="state-menu">
  36. <li class="first"><a href="#">Main Item</a>
  37. <ul>
  38. <li><a href="#">Item 1</a></li>
  39. <li><a href="#">Item 2</a></li>
  40. <li><a href="#">Item 3</a></li>
  41. </ul>
  42. </li>
  43. <li class="last"><a href="#">Noscript Item</a></li>
  44. </ul>
  45. </body>
  46. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.