943,192 Members | Top Members by Rank

Ad:
Aug 25th, 2008
0

horizontal menu

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
cskinpg is offline Offline
3 posts
since Aug 2008
Aug 25th, 2008
0

Re: horizontal menu

Click to Expand / Collapse  Quote 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. :-)

Click to Expand / Collapse  Quote 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 ...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.  
  5. /* FOR DEMONSTRATION PURPOSES ONLY */
  6.  
  7. body {
  8. padding: 30px;
  9. font-family: Arial;
  10. }
  11.  
  12. .tab {
  13. cursor: pointer;
  14. padding: 10px;
  15. border: 1px solid indigo;
  16. background: orange;
  17. }
  18.  
  19. .show {
  20. display: none;
  21. position: relative;
  22. top: 30px;
  23. width: 100px;
  24. height: 100px;
  25. padding: 20px;
  26. color: white;
  27. font-size: 18px;
  28. font-weight: bold;
  29. border: 1px solid indigo;
  30. background: silver;
  31. }
  32.  
  33. </style>
  34. <script type="text/javascript">
  35. window.onload = function () {
  36. show_div('one');
  37. }
  38.  
  39. function show_div ( id ) {
  40. var divs = document.getElementsByTagName('div');
  41. for ( var i = 0; i < divs.length; i ++ ) {
  42. var div = divs.item(i);
  43. if ( /show/.test( div.className ) ) {
  44. if ( div.id == id ) {
  45. div.style.display = 'block';
  46. } else {
  47. div.style.display = 'none';
  48. }
  49. }
  50. }
  51. }
  52. </script>
  53. </head>
  54. <body>
  55. <div>
  56. <span class="tab" onmouseover="show_div('one')">one</span>
  57. <span class="tab" onmouseover="show_div('two')">two</span>
  58. <span class="tab" onmouseover="show_div('three')">three</span>
  59. </div>
  60. <div class="show" id="one">one</div>
  61. <div class="show" id="two">two</div>
  62. <div class="show" id="three">three</div>
  63. </body>
  64. </html>
Maybe this will get you pointed in the right direction ...

Cheers
Last edited by langsor; Aug 25th, 2008 at 3:16 pm.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Aug 27th, 2008
0

Re: horizontal menu

thank you..cool tutorial
Reputation Points: 10
Solved Threads: 0
Newbie Poster
indiecorporate is offline Offline
4 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Sending mail througth js
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Counter for selectbox





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC