The moose likes HTML, CSS and JavaScript and the fly likes CSS navigation Menu Big Moose Saloon
  Search | Java FAQ | Recent Topics
Register / Login


Win a copy of The Mikado Method this week in the Agile and other Processes forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Reply Bookmark "CSS navigation Menu" Watch "CSS navigation Menu" New topic
Author

CSS navigation Menu

Angela D'souza
Ranch Hand

Joined: Jan 16, 2002
Posts: 469
posted private message
0
Quote
I want to use multiple navigation menu using same css in same page. Somehow it is not working i mean it will work only one menu but rest are not working or using functionality of CSS. Why??? Here is the HTML code:
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="en-us">

<TITLE>index</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<script type="text/javascript" src="javascripts/expandingMenu.js"></script>
<link rel="stylesheet" type="text/css" href="css/machines.css">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (index.psd) -->
<TABLE WIDTH=1003 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="558">
<TR>
<TD ROWSPAN=2 height="99">
<IMG SRC="images/index_01.jpg" WIDTH=453 HEIGHT=99 ALT=""></TD>
<TD COLSPAN=4 height="76">
<IMG SRC="images/index_02.jpg" WIDTH=550 HEIGHT=76 ALT=""></TD>
</TR>
<TR>
<TD height="23">
<IMG SRC="images/index_03.jpg" WIDTH=225 HEIGHT=23 ALT=""></TD>
<TD height="23">
<IMG SRC="images/index_04.jpg" WIDTH=82 HEIGHT=23 ALT=""></TD>
<TD height="23">
<IMG SRC="images/index_05.jpg" WIDTH=113 HEIGHT=23 ALT=""></TD>
<TD height="23">
<IMG SRC="images/index_06.jpg" WIDTH=130 HEIGHT=23 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5 height="459">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" height="439">
<tr>
<td width="18%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>MACHINES</B>
</span></font>
<ul id="menu">
<li>Saws
<ol>
<li><a href="saw_machines.html">Rock Rascal</a></li>
<li><a href="hi_ball.html">Hi Ball</a></li>
<li><a href="#">Tagit</a></li>
<li><a href="#">All in one unit</a></li>
</ol>
</li>
<li>Grinders
<ol>
<li><a href="grinders.html">Rock Rascal</a></li>
</ol>
</li>
<li>Combination Units
<ol>
<li><a href="#">Rock Rascal</a></li>
</ol>
</li>
<li>Tumblers
<ol>
<li><a href="gy_roc.html">Gyroc</a></li>
<li><a href="#">Lorton</a></li>
<li><a href="#">Thumbler</a></li>
<li><a href="#">Import</a></li>
</ol>
</li>
<li>Casting Machines
<ol>
<li><a href="#">Ney Craft</a></li>
</ol>
</li>
<li>Ultrasonic Cleaner
<ol>
<li><a href="#">Rock Rascal</a></li>
</ol>
</li>
<li>Lapping Machines
<ol>
<li><a href="#">Lapping Machines</a></li>
</ol>
</li>
<li>Dop Pot
<ol>
<li><a href="dop_pot.html">Rock Rascal</a></li>
</ol>
</li>
</ul>



</td>
<td width="61%" height="439" rowspan="4">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="417">
<tr>
<td width="33%" height="68">
<p align="center">
<img border="0" src="images/front_unknown.jpg" width="106" height="132"></td>
<td width="33%" height="68">
<p align="center">
<img border="0" src="images/front_diamond_tool.jpg" width="130" height="78"></td>
<td width="34%" height="68">
<p align="center">
<img border="0" src="images/front_pro_slicer.jpg" width="130" height="150"></td>
</tr>
<tr>
<td width="33%" height="97">
<p align="center">
<img border="0" src="images/front_dop_pot.jpg" width="130" height="133"></td>
<td width="33%" height="97">
<p align="center">
<img border="0" src="images/front_vibrators.jpg" width="130" height="149"></td>
<td width="34%" height="97">
<p align="center">
<img border="0" src="images/front_saws.jpg" width="130" height="124"></td>
</tr>
<tr>
<td width="33%" height="113">
<p align="center">
<img border="0" src="images/adhesives.jpg" width="130" height="145"></td>
<td width="33%" height="113">
<p align="center">
<img border="0" src="images/tumbling_supplies.jpg" width="130" height="138"></td>
<td width="34%" height="113">
<p align="center">
<img border="0" src="images/grit_kits.jpg" width="130" height="171"></td>
</tr>
<tr>
<td width="33%" height="136">
<p align="center">
<img border="0" src="images/front_abrasives.jpg" width="156" height="150"></td>
<td width="33%" height="136">
<p align="center">
<img border="0" src="images/front_grinding_wheels.jpg" width="130" height="135"></td>
<td width="34%" height="136">
<p align="center">
<img border="0" src="images/display_product.jpg" width="130" height="136"></td>
</tr>
</table>
</td>
<td width="21%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Abrasives / Polishing Supplies</B>
</span></font>
<ul id="menu">
<li>Grit Kits
<ol>
<li><a href="#">Grit Kits</a></li>
</ol>
</li>
<li>Grits
<ol>
<li><a href="#">Grits</a></li>
</ol>
</li>
<li>Polishes
<ol>
<li><a href="#">Polishes</a></li>
</ol>
</li>
<li>Medias
<ol>
<li><a href="#">Medias</a></li>
</ol>
</li>
<li>WD Belts
<ol>
<li><a href="#">WD Belts</a></li>
</ol>
</li>
<li>Diamond Belts
<ol>
<li><a href="#">Diamond Belts</a></li>
</ol>
</li>
<li>Leather Discs
<ol>
<li><a href="#">Leather Discs</a></li>
</ol>
</li>
<li>Micro Finishing Belts
<ol>
<li><a href="#">Micro Finising Belts</a></li>
</ol>
</li>
</ul>
</td>
</tr>
<tr>
<td width="18%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>DIAMOND TOOLS</B>
</span></font>
<ul id="menu">
<li>Saw Blades
<ol>
<li><a href="#">Saw Blades</a></li>
</ol>
</li>
<li>Drills
<ol>
<li><a href="drills.html">Drills</a></li>
</ol>
</li>
<li>Grinding Wheels
<ol>
<li><a href="#">Grinding Wheels</a></li>
</ol>
</li>
<li>Resin Bond Belts
<ol>
<li><a href="#">Resin Bond Belts</a></li>
</ol>
</li>
<li>Metal Bond Belts
<ol>
<li><a href="#">Metal Bond Belts</a></li>
</ol>
</li>
<li>Burrs
<ol>
<li><a href="#">Burrs</a></li>
</ol>
</li>
</ul>
</td>
<td width="21%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Display Products</B>
</span></font>
<ul id="menu">
<li>Trays
<ol>
<li><a href="#">Trays</a></li>
</ol>
</li>
<li>Flocke Tray
<ol>
<li><a href="#">Flocke Tray</a></li>
</ol>
</li>
<li>Tray Liners
<ol>
<li><a href="#">Tray Liners</a></li>
</ol>
</li>
<li>Perky Boxes
<ol>
<li><a href="#">Perky Boxes</a></li>
</ol>
</li>
<li>Round Jars
<ol>
<li><a href="#">Round Jars</a></li>
</ol>
</li>
<li>Necklace Stands
<ol>
<li><a href="#">Necklance Stands</a></li>
</ol>
</li>
<li>Ring Trays
<ol>
<li><a href="#">Ring Trays</a></li>
</ol>
</li>
<li>Magnifying Boxes
<ol>
<li><a href="#">Magnifying Boxes</a></li>
</ol>
</li>
<li>Storage Boxes
<ol>
<li><a href="#">Storage Boxes</a></li>
</ol>
</li>
</ul>
</td>
</tr>
<tr>
<td width="18%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>GLUES</B>
</span></font>
<ul id="menu">
<li>Hot Stuff
<ol>
<li><a href="#">Hot Stuff</a></li>
</ol>
</li>
<li>FDA
<ol>
<li><a href="#">FDA</a></li>
</ol>
</li>
<li>Tarnishield
<ol>
<li><a href="#">Tarnishield</a></li>
</ol>
</li>
<li>NCF
<ol>
<li><a href="#">NCF</a></li>
</ol>
</li>
</ul>
</td>
<td width="21%" height="110" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Misc. Products</B>
</span></font>
<ul id="menu">
<li>Lube Cool
<ol>
<li><a href="#">Lube Cool</a></li>
</ol>
</li>
<li>Flocke Tray
<ol>
<li><a href="#">Flocke Tray</a></li>
</ol>
</li>
<li>Tray Liners
<ol>
<li><a href="#">Tray Liners</a></li>
</ol>
</li>
</ul>

</td>
</tr>
<tr>
<td width="18%" height="109" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Rockhounding supplies</B>
</span></font>
<ul id="menu">
<li>Estwing
<ol>
<li><a href="#">Estwing</a></li>
</ol>
</li>
</ul>

</td>
<td width="21%" height="109" align="center">
<font color="#FFFFFF"><span style="background-color: #000080"><B>Jewelry Tools</B>
</span></font><P>
<font color="#FFFFFF"><span style="background-color: #000080"><B>Beading Tools</B>
</span></font>


</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
---------------------------------------------------------------------------
Here is CSS CODE:
ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}

ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}

ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}

ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}

ul#menu ol li {
border-bottom: none;
}

ul#menu ol li:before {
content: "- ";
}

ul#menu a {
text-decoration: none;
outline: none;
}

ul#menu a:hover {
color: #539dbc;
}

ul#menu a.active {
color: #be5028;
}
l#tools {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}

ul#tools ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}

ul#tools li,
ul#tools a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}

ul#tools li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}

ul#tools ol li {
border-bottom: none;
}

ul#tools ol li:before {
content: "- ";
}

ul#tools a {
text-decoration: none;
outline: none;
}

ul#tools a:hover {
color: #539dbc;
}

ul#tools a.active {
color: #be5028;
}
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 413
posted private message
0
Quote
it may have something to do that the elements should not really have same ids. try ti use a class attribute instead
Angela D'souza
Ranch Hand

Joined: Jan 16, 2002
Posts: 469
posted private message
0
Quote
Originally posted by Yuriy Fuksenko:
it may have something to do that the elements should not really have same ids. try ti use a class attribute instead


i am sorry but where should i use class attribute? Can you give me example?
Yuriy Fuksenko
Ranch Hand

Joined: Feb 02, 2001
Posts: 413
posted private message
0
Quote
instead of <ul id="menu">
use <ul class="menu">

and in CSS definition replace "#" with ".", i.e. ul.menu
 
I agree. Here's the link: http://ej-technologies/jprofiler - if it wasn't for jprofiler, we would need to run our stuff on 16 servers instead of 3.
 
subject: CSS navigation Menu
 
Similar Threads
Page displaying in IE6 and older versions but not in Higher versions, chrome and firefox also.
Absolute Position in IE
CSS menu bug in IE6 - select drop down appears on top of menu
Problem with struts-menu for second level submenu
problem incrementing loop in jstl