Search jQuery

jQuery Forum

tn.tylern..

Better Approach? Menu Box Switch

in Getting Started • 11 years ago

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>

Replies(3)

jakecigar

Re: Better Approach? Menu Box Switch

11 years ago

I put the text into the HTML. No array, no switch, no vars, no problem with many menu items.

…

<script>
$(function() {
$('#main>ul>li').click(function() {
$('<p class="item">' +$(this).data('text') + '</p>').appendTo('#container').fadeIn(1000)
})
})
</script>
</head>
<body>
<div id="main">
<ul>
<li data-text='Items in menu 1'>Menu Item</li>
<li data-text='Items in menu 2'>Menu Item</li>
<li data-text='Items in menu 3'>Menu Item</li>
</ul>
<div id="container"></div>
</div>
</body>
</html>

JΛ̊KE

tn.tylern..

Re: Re: Better Approach? Menu Box Switch

11 years ago

thanks for the advice Jake.. maybe it would be better left in html.. though what if the items are recieved from a server.. (that a prob a different story all together..)

jakecigar

Re: Better Approach? Menu Box Switch

11 years ago

if it was received via JSON or AJAX, it would be a different story! Would you like to go into that?

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Better Approach? Menu Box Switch

Replies(3)

Re: Better Approach? Menu Box Switch

Re: Re: Better Approach? Menu Box Switch

Re: Better Approach? Menu Box Switch

Statistics

Tags

Actions

Related Posts