HORIZANTAL MENU LEFT RIGHT NOT ADD
<html>
<head>
<script type="text/javascript" src="menuscroll/jquery.min.js"></script>
<script type="text/javascript">
/*var previousElement = null;
function changeClass (newElement) {
if (previousElement != null) {
previousElement.className = "";
}
newElement.className = "selected";
previousElement = newElement;
}
// just add a call to this function on the load of the page
function onload() {
lis = document.getElementById("nav").getElementsByTagName("a");
for (var i=0; i<lis.length; i++) {
if (lis[i].className == "selected")
previousElement = lis[i];
}
}*/
$(document).ready( function()
{
$("a").click( function()
{
$(".selected").removeClass("selected");
$(this).addClass("selected");
} );
$("#left").click( function()
{
alert('left');
$('#left').style.background-color='#100';
} );
$("#right").click( function()
{
alert('right');
$('#right').style.background-color='#100';
} );
});
</script>
<style type="text/css">
.selected {
background: #cccccc;
border-bottom:2px solid #000;
}
#nav
{
width:200px;
overflow:hidden;
content: "»";
margin-right: 6px;
}
ul
{
width:400px;
overflow:hidden;
top:0;
}
li
{
float:left;
padding-right:5px;
}
#left
{
postion:relative;
float:left;
}
#right
{
postion:relative;
float:right
}
</style>
</head>
<body onload="onload()">
<div id="nav">
<ul><label id="left"><<</label> <label id="right">>></label>
<li><a href="#" onclick="changeClass(this)" class="selected">Main</a></li>
<li><a href="#" onclick="changeClass(this)">Downloads</a></li>
<li><a href="#" onclick="changeClass(this)">News</a></li>
<li><a href="#" onclick="changeClass(this)">Forums</a></li>
<li><a href="#" onclick="changeClass(this)">Proposals</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="menuscroll/jquery.min.js"></script>
<script type="text/javascript">
/*var previousElement = null;
function changeClass (newElement) {
if (previousElement != null) {
previousElement.className = "";
}
newElement.className = "selected";
previousElement = newElement;
}
// just add a call to this function on the load of the page
function onload() {
lis = document.getElementById("nav").getElementsByTagName("a");
for (var i=0; i<lis.length; i++) {
if (lis[i].className == "selected")
previousElement = lis[i];
}
}*/
$(document).ready( function()
{
$("a").click( function()
{
$(".selected").removeClass("selected");
$(this).addClass("selected");
} );
$("#left").click( function()
{
alert('left');
$('#left').style.background-color='#100';
} );
$("#right").click( function()
{
alert('right');
$('#right').style.background-color='#100';
} );
});
</script>
<style type="text/css">
.selected {
background: #cccccc;
border-bottom:2px solid #000;
}
#nav
{
width:200px;
overflow:hidden;
content: "»";
margin-right: 6px;
}
ul
{
width:400px;
overflow:hidden;
top:0;
}
li
{
float:left;
padding-right:5px;
}
#left
{
postion:relative;
float:left;
}
#right
{
postion:relative;
float:right
}
</style>
</head>
<body onload="onload()">
<div id="nav">
<ul><label id="left"><<</label> <label id="right">>></label>
<li><a href="#" onclick="changeClass(this)" class="selected">Main</a></li>
<li><a href="#" onclick="changeClass(this)">Downloads</a></li>
<li><a href="#" onclick="changeClass(this)">News</a></li>
<li><a href="#" onclick="changeClass(this)">Forums</a></li>
<li><a href="#" onclick="changeClass(this)">Proposals</a></li>
</ul>
</div>
</body>
</html>
No comments:
Post a Comment