954,173 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

horizontal menu

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

cskinpg
Newbie Poster
3 posts since Aug 2008
Reputation Points: 10
Solved Threads: 0
 
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 tohelp 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. :-)

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 ...

<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>

Maybe this will get you pointed in the right direction ...

Cheers

langsor
Posting Whiz
390 posts since Aug 2008
Reputation Points: 30
Solved Threads: 36
 

thank you..cool tutorial

indiecorporate
Newbie Poster
4 posts since Aug 2008
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You