944,103 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > add sub menu items to css menu?
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Feb 18th, 2007
0

add sub menu items to css menu?

Expand Post »
I will be using this one. I want to add sub items to each category(button) how do I do it but maintain the style?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <style>
  2. #message div.menuBar2,
  3. #message div.menuBar2 a.menuButton {
  4.   font-family: Verdana, Arial, sans-serif;
  5.   font-size: 8pt;
  6.   color: #000000;
  7. }
  8.  
  9. #message div.menuBar2 {
  10.   background-image: url(http://i14.photobucket.com/albums/a345/Instar/escher_background.gif); 
  11.  
  12.   padding: 6px 2px 6px 2px;
  13.   text-align: center;
  14.   margin-left:20px;
  15. }
  16.  
  17. #message div.menuBar2 a.menuButton {
  18.   background-color: transparent;
  19.   border: 1px solid;
  20.   border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  21.   color: #000000;
  22.   cursor: pointer;
  23.   left: 0px;
  24.   margin: 1px;
  25.   padding: 2px 6px 2px 6px;
  26.   xposition: relative;
  27.   text-decoration: none;
  28.   top: 0px;
  29.   z-index: 100;
  30. }
  31.  
  32. #message div.menuBar a.menuButton:hover {
  33.   background-color: transparent;
  34.   border-color: #909090 #f0f0f0 #f0f0f0 #909090;
  35.   color: #000000;
  36. }
  37. </style>
  38.  
  39.  
  40.  
  41.  
  42. <center><table><tr><td>
  43. <DIV id="message"><div class="menuBar2">
  44. <a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=home">Home</a>
  45.  
  46. <a class="menuButton" href="{ibf.script_url}act=Search&CODE=getnew">New Posts</a>
  47. <a class="menuButton" href="{ibf.script_url}act=UserCP&CODE=01">Profile</a>
  48. <a class="menuButton" href="{ibf.script_url}act=UserCP&CODE=04">Settings</a>
  49. <a class="menuButton" href="JavaScript:full()">FullScreen</a>
  50. <a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=ST&f=31&t=1873&st=0#entry6049">Link Us</a>
  51. <a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=ST&f=18&t=932">About Us</a>
  52.  
  53. </div></div>
  54. </td></tr></table></center>
Similar Threads
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Feb 18th, 2007
0

Re: add sub menu items to css menu?

If you are talking about drop down menu refer to this link....you may alter and get what you want

http://www.daniweb.com/tutorials/tutorial55309.html
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
Feb 18th, 2007
0

Re: add sub menu items to css menu?

Thanks But I dont want to use List tag, I want the drop down menu for each menu link shown above in the same style. Only appears on mouseover. no bullets etc
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Feb 18th, 2007
0

Re: add sub menu items to css menu?

But why you dont want to use list...it would be better cause it wil be easy to organise it...and yes bullets wont be displayed. And if you dont want to take headache of altering this one, then you see it wont take time. Styles are styles afterall could be reused.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
Feb 18th, 2007
0

Re: add sub menu items to css menu?

Under each of those menu choices above, I want a dropdown of sub menu items, directly under its parent and only on mouseover, with the same style.

I tried adding <ul> and <li> but sub items appearred below (visible without mouseover) and with ugly black bullets. I want the thing to look neat like the one above.

I will be altering targets of parent items to url of my forums categorys and sub items will be urls of forums within those categorys.

The whole thing should appear as the one above does excepting it will be wider horizontally ofcourse.
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Feb 18th, 2007
0

Re: add sub menu items to css menu?

see below <ul> <li> example destroys the style

http://www.jmarshall.com/easy/html/testbed.html

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <style>
  2. #message div.menuBar2,
  3. #message div.menuBar2 a.menuButton {
  4.   font-family: Verdana, Arial, sans-serif;
  5.   font-size: 8pt;
  6.   color: #000000;
  7. }
  8.  
  9. #message div.menuBar2 {
  10.   background-image: url(http://i14.photobucket.com/albums/a345/Instar/escher_background.gif); 
  11.  
  12.   padding: 6px 2px 6px 2px;
  13.   text-align: center;
  14.   margin-left:20px;
  15. }
  16.  
  17. #message div.menuBar2 a.menuButton {
  18.   background-color: transparent;
  19.   border: 1px solid;
  20.   border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  21.   color: #000000;
  22.   cursor: pointer;
  23.   left: 0px;
  24.   margin: 1px;
  25.   padding: 2px 6px 2px 6px;
  26.   xposition: relative;
  27.   text-decoration: none;
  28.   top: 0px;
  29.   z-index: 100;
  30. }
  31.  
  32. #message div.menuBar a.menuButton:hover {
  33.   background-color: transparent;
  34.   border-color: #909090 #f0f0f0 #f0f0f0 #909090;
  35.   color: #000000;
  36. }
  37. </style>
  38.  
  39.  
  40.  
  41.  
  42. <center><table><tr><td>
  43. <DIV id="message"><div class="menuBar2">
  44. <ul id="message"><li>
  45. <a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=home">Home</a><ul>
  46. <li><a href="#">qrayg</a></li>
  47. <li><a href="#">qArcade</a></li>
  48.           <li><a href="#">qLoM</a></li>
  49.           <li><a href="#">qDT</a></li>
  50.         </ul>
  51.       </li>
  52.  
  53. <a class="menuButton" href="{ibf.script_url}act=Search&CODE=getnew">New Posts</a>
  54. <a class="menuButton" href="{ibf.script_url}act=UserCP&CODE=01">Profile</a>
  55. <a class="menuButton" href="{ibf.script_url}act=UserCP&CODE=04">Settings</a>
  56. <a class="menuButton" href="javascript:full()">FullScreen</a>
  57. <a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=ST&f=31&t=1873&st=0#entry6049">Link Us</a>
  58. <a class="menuButton" href="http://herproom.5.forumer.com/index.php?act=ST&f=18&t=932">About Us</a>
  59.  
  60. </div></div>
  61. </td></tr></table></center>
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Feb 18th, 2007
0

Re: add sub menu items to css menu?

For that you will have to alter a bit of styles. Try it yourself and post what you dont get, afterall practice make a man perfect.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Permalink
Feb 19th, 2007
0

Re: add sub menu items to css menu?

If I asked you to try to design an elaborate building where would you start if you were not an architect?
I understand your intention of encouragement mate, but its like me handing you a screwdriver and saying try to make a rocket!
please just give me an idea/example if how to add style for <ul> <li> tags if thats what you say I need.

I did try to add the same styling for #UL and #LI as for menuBar but it did not work.
Last edited by Inny; Feb 19th, 2007 at 12:04 am.
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Permalink
Feb 19th, 2007
0

Re: add sub menu items to css menu?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. .listbuster {list-style: none;}
  2. .....
  3.  
  4. <ul class="listbuster">
  5.  <li>thing 1</li>
  6.  <li>thing 2</li>
  7. </ul>
gets rid of the bullets.
Last edited by MidiMagic; Feb 19th, 2007 at 7:31 pm.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Feb 20th, 2007
0

Re: add sub menu items to css menu?

Thanks that gets rid of bullets but the submenu is still visible. do I put submenu style:none or something?
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005

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: when use ".js" files
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: why dont it work?





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


Follow us on Twitter


© 2011 DaniWeb® LLC