JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

add sub menu items to css menu?

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

•
•
Join Date: Oct 2005
Posts: 240
Reputation: Inny is an unknown quantity at this point 
Solved Threads: 6
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

add sub menu items to css menu?

 
0
  #1
Feb 18th, 2007
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>
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation: vishesh is on a distinguished road 
Solved Threads: 36
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

Re: add sub menu items to css menu?

 
0
  #2
Feb 18th, 2007
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2005
Posts: 240
Reputation: Inny is an unknown quantity at this point 
Solved Threads: 6
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

Re: add sub menu items to css menu?

 
0
  #3
Feb 18th, 2007
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
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation: vishesh is on a distinguished road 
Solved Threads: 36
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

Re: add sub menu items to css menu?

 
0
  #4
Feb 18th, 2007
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2005
Posts: 240
Reputation: Inny is an unknown quantity at this point 
Solved Threads: 6
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

Re: add sub menu items to css menu?

 
0
  #5
Feb 18th, 2007
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.
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2005
Posts: 240
Reputation: Inny is an unknown quantity at this point 
Solved Threads: 6
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

Re: add sub menu items to css menu?

 
0
  #6
Feb 18th, 2007
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>
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation: vishesh is on a distinguished road 
Solved Threads: 36
vishesh's Avatar
vishesh vishesh is offline Offline
Nearly a Posting Virtuoso

Re: add sub menu items to css menu?

 
0
  #7
Feb 18th, 2007
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2005
Posts: 240
Reputation: Inny is an unknown quantity at this point 
Solved Threads: 6
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

Re: add sub menu items to css menu?

 
0
  #8
Feb 19th, 2007
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.
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: add sub menu items to css menu?

 
0
  #9
Feb 19th, 2007
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2005
Posts: 240
Reputation: Inny is an unknown quantity at this point 
Solved Threads: 6
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

Re: add sub menu items to css menu?

 
0
  #10
Feb 20th, 2007
Thanks that gets rid of bullets but the submenu is still visible. do I put submenu style:none or something?
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close cookies createrange() cursor dependent disablefirebug dom dropdown editor element embed engine events explorer ext file form forms google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe image() images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math matrixcaptcha media microsoft mimic object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post progressbar rated regex runtime scroll search security session shopping size software sql star stars synchronous text textarea unicode validation web website window windowofwords windowsxp wysiwyg xml \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC