943,771 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Look for suggestion for changed color menu
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Aug 11th, 2009
0

Look for suggestion for changed color menu

Expand Post »
I have a menu and I want when I mouseover them it change their color and style .Are the any suggestion?
Similar Threads
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
polo_coins is offline Offline
63 posts
since Oct 2008
Permalink
Aug 11th, 2009
0

Re: Look for suggestion for changed color menu

Hi polo,

do you have a ready document? Or you need if from the scratch?
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 11th, 2009
0

Re: Look for suggestion for changed color menu

html Syntax (Toggle Plain Text)
  1. <form name="menu">
  2. <font face="Comic Sans MS " size="4" >
  3. <table id="menutable" name="table1" frame="void" rules="none" >
  4. <ul>
  5. <tr ><li><a href="main.html" onmouseover="ChangeCol();" id="ch1"  target="main">Main Page</a><br/></tr>
  6. <tr><li><a href="photos.html" name="photos" target="main">Photos of Australia</a><br/></tr>
  7. <tr><li><a href="immigration.html" name="immigration" target="main">Immigration</a><br/></tr>
  8. <tr><li><a href="question.html" name="q" target="main">Questions</a><br/></tr>
  9. <tr><li><a href="job.html" name="job" target="main">All about Job</a><br/></tr>
  10. <tr><li><a href="studies.html" name="study" target="main">All about Studies</a><br/></tr>
  11. <tr><li><a href="chat.html" name="chat" target="main">Chat</a><br/></tr>
  12. <tr><li><a href="forum.html" name="forum" target="main">Forum about Anything</a><br/><tr>
  13. <tr><li><a href="links.html" name="link" target="main">Intresting Links</a><br/></tr>
  14. <tr><li><a href="price.html" name="price" target="main">Prices in Australia</a><br/></tr>
  15. <tr><li><a href="house.html" name="house" target="main">Apartments/Houses/Rent </a><br/></tr>
  16. <tr><li><a href="communitee.html" name="israel" target="main">Israel Communitee </a><br/></tr>
  17. <tr><li><a href="#main" name="end" >To Top Menu</a><br/>
  18.  
  19.  
  20.  
  21. </table>

here is some code (I think it's code you already see) it' my menu
and I want when client over it with mouse it will change it face style,and color
Last edited by peter_budo; Aug 11th, 2009 at 2:21 pm. Reason: Keep It Organized - Avoid using an excessive amount of [bbcode] to alter font styles or to draw more attention to your post.
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
polo_coins is offline Offline
63 posts
since Oct 2008
Permalink
Aug 11th, 2009
0

Re: Look for suggestion for changed color menu

Here is the code-sample:
javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css_level21" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  6. <head>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <title>www.daniweb.com :: DHTML / JavaScript / AJAX</title>
  12. <style id="css21" type="text/css" media="all">
  13. /* <![CDATA[ */
  14. a { text-decoration : none; letter-spacing : 1px; color : #00FF00; }
  15.  
  16. ul {
  17.   list-style : none; 
  18.   margin : 0; 
  19.   width : auto; 
  20.   background-color : transparent !important; }
  21.  
  22. li { 
  23.   list-style : none; 
  24.   margin : 0; 
  25.   width : auto; 
  26.   background-color : #000; 
  27.   padding : .200em .200em .200em .600em; }
  28.  
  29. #table-one {
  30.   text-align : left;
  31.   line-height : 1.5;
  32.   border-collapse : collapse;
  33.   border : none;
  34.   margin : 0 auto;
  35.   background-color : transparent !important;
  36.   width : 100%;
  37. }
  38. /* ]]> */
  39. </style>
  40. <script type="text/javascript">
  41. // <![CDATA[
  42.  
  43. var bgcolors = "lime";
  44. var colors = "white"; 
  45.  
  46. var setRule = function( e ) { 
  47.    var e = e ? e : window.event;
  48.    var li = this;
  49.    li.setAttribute( "style", "background-color : " + bgcolors + "; margin : 0 0 0 12px" + "; color : " + colors + "; padding : .200em .200em .200em .600em; border-top : 1px solid #eee" ); 
  50.    var a = li.firstChild;
  51.    a.setAttribute( "style", "color : " + colors + "; font-family : 'Bernard MT Condensed', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;" );
  52.    this.onmouseout = ( function() {
  53.    this.removeAttribute("style");
  54.    this.firstChild.removeAttribute("style");
  55.    } ); 
  56. (( "cancelBubble" in e ) ? e.cancelBubble = true : e.stopPropagation()); 
  57.  
  58. }; window.onload = function( ) {
  59.    var lists = (( lists = document.getElementById("lists-0")) ? lists : document.all[ "lists-0" ] );
  60.    if ( lists.hasChildNodes() ) {
  61.    var node = lists.childNodes;
  62.       for ( var x = 0; x < node.length; x++ ) {
  63.          if ( node[ x ].nodeName.toLowerCase() === "li" ) {
  64.             if ( window.addEventListener ) {
  65.             node[ x ].addEventListener( "mouseover", setRule, false );
  66.            } else if ( window.attachEvent ) {
  67.             node[ x ].attachEvent( "onmouseover", setRule ); 
  68.             } else { node[ x ].onmouseover = setRule; } 
  69.          }
  70.       }
  71.    }
  72. }
  73.  
  74. // ]]>
  75. </script>
  76. </head>
  77. <body id="xhtml11">
  78. <div id="main">
  79.  
  80. <!-- 
  81. <form id="menu" name="menu" action="#" onsubmit="return false;"> 
  82. -->
  83.  
  84. <table id="table-one" frame="void" rules="none" cellpadding="0" cellspacing="0" summary="JavaScript :: Live Demo!">
  85. <tr>
  86. <td style="width : 30%; overflow : show">
  87. <ul id="lists-0">
  88. <li><a href="forum.html">Forum About Anything</a></li>
  89. <li><a href="links.html">Interesting Links</a></li>
  90. <li><a href="price.html">Prices in Australia</a></li>
  91. <li><a href="house.html">Apartments/Houses/Rent</a></li>
  92. <li><a  href="comunitee.html">Israel Communitee</a></li>
  93. </ul>
  94. </td><td style="width : auto; padding-left : 1em;"><h2>DEMO PAGE</h2></td></tr>
  95. </table>
  96. </div>
  97. </body>
  98. </html>

Opera-Tested
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 12th, 2009
0

Re: Look for suggestion for changed color menu

hi essential..........
doesn't this work in IE 6 ??
didn't work for me...
Reputation Points: 10
Solved Threads: 9
Junior Poster
aashishn86 is offline Offline
184 posts
since Jun 2008
Permalink
Aug 12th, 2009
0

Re: Look for suggestion for changed color menu

Hi aashishn,

i bring up a simple lines for polo, so that he would be able adapt all the lines easily. But since you also need it, then i will provide a new example later.

Good day...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 12th, 2009
0

Re: Look for suggestion for changed color menu

[COLOR="Red"][var li = this;/COLOR]
it give me an erroro in this line
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
polo_coins is offline Offline
63 posts
since Oct 2008
Permalink
Aug 12th, 2009
0

Re: Look for suggestion for changed color menu

Hi,

here's the demo, you should atleast have IE6 to be able for this to work.

javascript Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Style-Type" content="text/css">
  7. <meta http-equiv="Content-Script-Type" content="text/javascript">
  8. <title>http://www.daniweb.com</title>
  9. <style type="text/css">
  10. <!--
  11. li a {
  12.   font-family : Arial, san-serif; 
  13.   color : #FFFFFF;
  14.   text-decoration : none;
  15.   letter-spcing : 2px; }
  16.  
  17. li {
  18.   border : none; 
  19.   background-color : #365d95;
  20.   padding : .300em .300em .300em 1em; 
  21.   display : block; 
  22.   margin : 0; }
  23.  
  24. ul, li { list-style : none }
  25.  
  26. ul {
  27.   background-color : #FFFFFF;
  28.   margin : 0;
  29.   padding : 0;
  30.   text-align : left; }
  31. li.onHover a { 
  32.   color : #365d95; 
  33.   font-family : "Bernard MT Condensed", "Trebuchet MS"; }
  34. li.onHover {
  35.   border : 1px solid #373832;
  36.   width : 160px; 
  37.   background-color : #F80;
  38.   padding : .300em .300em .300em 1em; 
  39.   display : block; 
  40.   margin-left : 1em; }
  41. -->
  42. </style>
  43. <script type="text/javascript">
  44. <!--
  45. var addEvent = function( isEvent, isElement, isFunction, isAttachedTo ) { 
  46. var eventSupported = (( window.attachEvent ) ? 1 : ( window.addEventListener ? 2 : 3 )) || 0;
  47. var installer = {
  48.    1 : ( function( obj ) {
  49.       return obj.attachEvent( "on" + isEvent, isFunction );
  50.    } ),
  51.    2 : ( function( obj ) {
  52.       return obj.addEventListener( isEvent, isFunction, false );
  53.    } ),
  54.    3 : ( function( obj ) {
  55.       return obj[ "on" + isEvent ] = isFunction;
  56.    } )
  57. }[ eventSupported ];
  58.    if ( eventSupported ) {
  59.       if ( typeof( isAttachedTo ) !== "undefined" ) {
  60.          for ( var x = 0; x < isAttachedTo; x++ ) {
  61.             installer( isElement[ x ] );
  62.          }
  63.       } else {
  64.         installer( isElement );
  65.       } 
  66.    } else {
  67.       alert("\nunsupported features: please update your browser");
  68.    }
  69. };
  70. var on_hover = function() {
  71.    var setClass = document.createAttribute("class");
  72.    setClass.nodeValue = "onHover";
  73.    if ( this.parentNode.parentNode.id === "demo" ) 
  74.       this.parentNode.setAttributeNode( setClass );
  75.    else
  76.       return false;
  77. };
  78.  
  79. var off_hover = function() {
  80.    if ( this.parentNode.getAttribute("class")) {
  81.       this.parentNode.removeAttribute("class"); }
  82. };
  83. var installMenu = function() {
  84. var menu;
  85.    if ( document.all )
  86.       menu = document.all.tags("a");
  87.    else {
  88.       menu = document.getElementsByTagName("a")
  89.    } 
  90.    addEvent( "mouseover", menu, on_hover, menu.length );
  91.    addEvent( "mouseout", menu, off_hover, menu.length );
  92. };
  93. window.onload = installMenu;
  94. // --> 
  95. </script>
  96. </head>
  97. <body>
  98. <div>
  99. <div>
  100. <table id="table_0" frame="void" rules="none" border="0" width="100%" cellpadding="0" cellspacing="0">
  101. <tr>
  102. <td style="width : 180px; overflow : auto;"><ul id="demo" style="width : 180px; overflow : show;">
  103. <li><a href="#">Sample Link 1</a></li>
  104. <li><a href="#">Sample Link 2</a></li>
  105. <li><a href="#">Sample Link 3</a></li>
  106. <li><a href="#">Sample Link 4</a></li>
  107. <li><a href="#">Sample Link 5</a></li>
  108. </ul></td>
  109. <td></td>
  110. </tr>
  111. </table>
  112. </div>
  113. </body>
  114. </html>

supported in all major browser: ( Firefox/Opera/Chrome/Safari/IE7+)
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 13th, 2009
0

Re: Look for suggestion for changed color menu

the <table> is redundant only <ul> is required
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Aug 13th, 2009
0

Re: Look for suggestion for changed color menu

Click to Expand / Collapse  Quote originally posted by essential ...
Hi,

here's the demo, you should atleast have IE6 to be able for this to work.

javascript Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Style-Type" content="text/css">
  7. <meta http-equiv="Content-Script-Type" content="text/javascript">
  8. <title>http://www.daniweb.com</title>
  9. <style type="text/css">
  10. <!--
  11. li a {
  12.   font-family : Arial, san-serif; 
  13.   color : #FFFFFF;
  14.   text-decoration : none;
  15.   letter-spcing : 2px; }
  16.  
  17. li {
  18.   border : none; 
  19.   background-color : #365d95;
  20.   padding : .300em .300em .300em 1em; 
  21.   display : block; 
  22.   margin : 0; }
  23.  
  24. ul, li { list-style : none }
  25.  
  26. ul {
  27.   background-color : #FFFFFF;
  28.   margin : 0;
  29.   padding : 0;
  30.   text-align : left; }
  31. li.onHover a { 
  32.   color : #365d95; 
  33.   font-family : "Bernard MT Condensed", "Trebuchet MS"; }
  34. li.onHover {
  35.   border : 1px solid #373832;
  36.   width : 160px; 
  37.   background-color : #F80;
  38.   padding : .300em .300em .300em 1em; 
  39.   display : block; 
  40.   margin-left : 1em; }
  41. -->
  42. </style>
  43. <script type="text/javascript">
  44. <!--
  45. var addEvent = function( isEvent, isElement, isFunction, isAttachedTo ) { 
  46. var eventSupported = (( window.attachEvent ) ? 1 : ( window.addEventListener ? 2 : 3 )) || 0;
  47. var installer = {
  48.    1 : ( function( obj ) {
  49.       return obj.attachEvent( "on" + isEvent, isFunction );
  50.    } ),
  51.    2 : ( function( obj ) {
  52.       return obj.addEventListener( isEvent, isFunction, false );
  53.    } ),
  54.    3 : ( function( obj ) {
  55.       return obj[ "on" + isEvent ] = isFunction;
  56.    } )
  57. }[ eventSupported ];
  58.    if ( eventSupported ) {
  59.       if ( typeof( isAttachedTo ) !== "undefined" ) {
  60.          for ( var x = 0; x < isAttachedTo; x++ ) {
  61.             installer( isElement[ x ] );
  62.          }
  63.       } else {
  64.         installer( isElement );
  65.       } 
  66.    } else {
  67.       alert("\nunsupported features: please update your browser");
  68.    }
  69. };
  70. var on_hover = function() {
  71.    var setClass = document.createAttribute("class");
  72.    setClass.nodeValue = "onHover";
  73.    if ( this.parentNode.parentNode.id === "demo" ) 
  74.       this.parentNode.setAttributeNode( setClass );
  75.    else
  76.       return false;
  77. };
  78.  
  79. var off_hover = function() {
  80.    if ( this.parentNode.getAttribute("class")) {
  81.       this.parentNode.removeAttribute("class"); }
  82. };
  83. var installMenu = function() {
  84. var menu;
  85.    if ( document.all )
  86.       menu = document.all.tags("a");
  87.    else {
  88.       menu = document.getElementsByTagName("a")
  89.    } 
  90.    addEvent( "mouseover", menu, on_hover, menu.length );
  91.    addEvent( "mouseout", menu, off_hover, menu.length );
  92. };
  93. window.onload = installMenu;
  94. // --> 
  95. </script>
  96. </head>
  97. <body>
  98. <div>
  99. <div>
  100. <table id="table_0" frame="void" rules="none" border="0" width="100%" cellpadding="0" cellspacing="0">
  101. <tr>
  102. <td style="width : 180px; overflow : auto;"><ul id="demo" style="width : 180px; overflow : show;">
  103. <li><a href="#">Sample Link 1</a></li>
  104. <li><a href="#">Sample Link 2</a></li>
  105. <li><a href="#">Sample Link 3</a></li>
  106. <li><a href="#">Sample Link 4</a></li>
  107. <li><a href="#">Sample Link 5</a></li>
  108. </ul></td>
  109. <td></td>
  110. </tr>
  111. </table>
  112. </div>
  113. </body>
  114. </html>

supported in all major browser: ( Firefox/Opera/Chrome/Safari/IE7+)
Well, not really! [I use IE6]

Why not try something efficient, readable and crossbrowser compatible like:

--------------------------- 8< ----------------------------
<body>
<div>
 <ul id="demo" style="width : 180px;">
  <li><a href="#">Sample Link 1</a></li>
  <li><a href="#">Sample Link 2</a></li>
  <li><a href="#">Sample Link 3</a></li>
  <li><a href="#">Sample Link 4</a></li>
  <li><a href="#">Sample Link 5</a></li>
 </ul>
</div>

<script type="text/javascript">
document.initMenu = function(id){
  var menulist = document.getElementById(id).getElementsByTagName("li")
 for (var i=0; i<menulist.length; i++){ 
      menulist[i].onmouseover = function(){this.className='onHover'} 
      menulist[i].onmouseout = function(){this.className=''} } }

document.initMenu("demo")
</script>
</body>
</html>
and cut the 1.51KB long script short, to 300bytes of working code instead?
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is online now Online
511 posts
since Jun 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: Auto select current day/month in a dropdown
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Print Page





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


Follow us on Twitter


© 2011 DaniWeb® LLC