Hi there, I created a menu box which basically changes the div content for each click of the menu list. Though my method is not efficient/proper and I'm hoping to improve it some how with the help of someone. For example, if I were to add another menu then I would have to add another case to match up against.
-
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
- w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Examples</title>
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <style type="text/css">
- ul, li, div, p {
- margin: 0;
- padding: 0;
- font-size: 100%;
- }
- #main {
- width: 380px;
- height: 400px;
- padding: 3px;
- }
- #main ul {
- width: auto;
- max-width: 90%;
- height: 19px;
- padding-left: 5px;
- padding-top: 1px;
- overflow: hidden;
- }
- #main ul li {
- display: inline;
- list-style-type: none;
- border: 1px solid grey;
- background-color: grey;
- border-bottom: none;
- padding: 0 5px;
- padding-bottom: -10px;
- font-family: Arial "sans-serif";
- color: white;
- }
- #main ul li selected {
- font-family: Arial "sans-serif";
- color: grey;
- background-color: white;
- margin-top: 1px;
- }
- #main #container {
- border: 1px solid grey;
- background-color: whit;
- height: inherit;
- margin-top: -2px;
- padding: 5px;
- overflow: hidden;
- }
- p.item {
- display: none;
- }
-
- </style>
- <script src="../../script/jquery-1.6.3.min.js"></script>
- <script>
- $(document).ready(function() {
- var menuItem = ['Items in menu 1', 'Items in menu 2','Items in menu 3']; //array containing different items for each menu
- $menu = $('#main ul li');
- $container = $('#main div#container');
-
- $menu.click(function() {
- var targetli = $(this).index();
- switch (targetli) {
- case 0:
- $('<p class="item">' + menuItem[0] + '</p>').appendTo($container).fadeIn(1000);
- break;
- case 1:
- $('<p class="item">' + menuItem[1] + '</p>').appendTo($container).fadeIn(1000);
- break;
- case 2:
- $('<p class="item">' + menuItem[2] + '</p>').appendTo($container).fadeIn(1000);
- break;
- }
- });
- });
- </script>
- </head>
- <body>
- <div id="main">
- <ul>
- <li id="menu1">Menu Item</li>
- <li id="menu2">Menu Item</li>
- <li id="menu3">Menu Item</li>
-
- </ul>
- <div id="container"></div>
- </div>
- </body>
- </html>