AJAX

horizontal menu

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2008

Posts: 3

Reputation: cskinpg is an unknown quantity at this point

Solved Threads: 0

cskinpg

Offline

Newbie Poster

horizontal menu

Aug 25th, 2008

hello everyone

iam new in this forum, i want to create horizontal menu contains p1,p2,p3 if iam click or move mouse to p1 new window open in right hand side show the details,and move on to p2 p1 window is get invisible and new window for p2 show the details same way in p3.

how to create above any one find it sent me the complete source code or link details
thankyou

pls refer below like same as using java script:

http://www.cssplay.co.uk/menu/one_page.html

Last edited by cskinpg; Aug 25th, 2008 at 3:12 am.

•

Join Date: Aug 2008

Posts: 380

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: horizontal menu

Aug 25th, 2008

•

Originally Posted by cskinpg

how to create above any one find it sent me the complete source code or link details
thankyou

If I understand correctly, the goal of this forum is to help you learn how to do things or fix things, not to do those things for you.

There are some great books and online tutorials on how to learn to write javascript ... check them out. :-)

•

Originally Posted by cskinpg

pls refer below like same as using java script:

http://www.cssplay.co.uk/menu/one_page.html

Why not use the CSS method? It will be better supported than a JavaScript one.

Having said all that, here's one way you might do this ...

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<style type="text/css">
 
 /* FOR DEMONSTRATION PURPOSES ONLY */
 
body {
  padding: 30px;
  font-family: Arial;
}
 
.tab {
  cursor: pointer;
  padding: 10px;
  border: 1px solid indigo;
  background: orange;
}
 
.show {
  display: none;
  position: relative;
  top: 30px;
  width: 100px;
  height: 100px;
  padding: 20px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid indigo;
  background: silver;
}
 
</style>
<script type="text/javascript">
window.onload = function () {
  show_div('one');
}
 
function show_div ( id ) {
  var divs = document.getElementsByTagName('div');
  for ( var i = 0; i < divs.length; i ++ ) {
    var div = divs.item(i);
    if ( /show/.test( div.className ) ) {
      if ( div.id == id ) {
        div.style.display = 'block'; 
      } else {
        div.style.display = 'none';
      }
    }
  }
} 
</script>
</head>
<body>
<div>
  <span class="tab" onmouseover="show_div('one')">one</span>
  <span class="tab" onmouseover="show_div('two')">two</span>
  <span class="tab" onmouseover="show_div('three')">three</span>
</div>
<div class="show" id="one">one</div>
<div class="show" id="two">two</div>
<div class="show" id="three">three</div>
</body>
</html>
<html>
<head>
<style type="text/css">

 /* FOR DEMONSTRATION PURPOSES ONLY */
 
body {
  padding: 30px;
  font-family: Arial;
}

.tab {
  cursor: pointer;
  padding: 10px;
  border: 1px solid indigo;
  background: orange;
}

.show {
  display: none;
  position: relative;
  top: 30px;
  width: 100px;
  height: 100px;
  padding: 20px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid indigo;
  background: silver;
}

</style>
<script type="text/javascript">
window.onload = function () {
  show_div('one');
}

function show_div ( id ) {
  var divs = document.getElementsByTagName('div');
  for ( var i = 0; i < divs.length; i ++ ) {
    var div = divs.item(i);
    if ( /show/.test( div.className ) ) {
      if ( div.id == id ) {
        div.style.display = 'block'; 
      } else {
        div.style.display = 'none';
      }
    }
  }
} 
</script>
</head>
<body>
<div>
  <span class="tab" onmouseover="show_div('one')">one</span>
  <span class="tab" onmouseover="show_div('two')">two</span>
  <span class="tab" onmouseover="show_div('three')">three</span>
</div>
<div class="show" id="one">one</div>
<div class="show" id="two">two</div>
<div class="show" id="three">three</div>
</body>
</html>