View Full Version : Resolved Slashdot Menu: In Two Frames?

08-13-2012, 09:58 PM
1) Script Title:

2) Script URL (on DD):

3) Describe problem:
Is there a way to have the slashdot menu in two separate frames?

Here is the example that I'm working with http://www.optimalinc.com/preview/131.html. The first section "Engineering Services" works great. However, if I try to put it into another frame "Case Studies FEA/CFD/CAE" I cannot get the same expand/collapse effect.

Any suggestions would be greatly appreciated.


08-14-2012, 03:38 AM
I'm thinking something like a separate id for each menu...

<div id="my_menu1" class="sdmenu">


<div id="my_menu2" class="sdmenu">

08-14-2012, 03:41 AM
Here's a thought, you could switch the id's to classes and have the same CSS for both of them still.

08-14-2012, 03:47 AM
Here's a thought, you could switch the id's to classes and have the same CSS for both of them still.

Thank you for the response. Unfortunately, I'm really green at this and am confused by the suggestion. Sorry for getting lost so soon in the chain.

08-14-2012, 03:52 AM
Alright, so change all the id= tags to class= retaining the name inside.

<div id="id">


<div class="id">

Then, in the CSS, when there is for example


Change the sharp to a dot


If that makes sense

08-14-2012, 03:57 AM
I think I see the light.

<div class="sdmenu1">

<div class="sdmenu2">


08-14-2012, 04:00 AM
That's right, however the advantage of this, is that you can do it with only one CSS class, ie, only .slashdot1, and that CSS will reference both of them, you can then put the positioning inline if your so inclined.

08-14-2012, 04:03 AM
Bernie - Thank you so much for the advice! I will give it a small rewrite and let you know how it goes.

I really appreciate the help. I've been having fun figuring it out, but was really stumped on this one.


08-14-2012, 04:23 AM
Remember, you can apply styles inline if you need individual styles.

08-14-2012, 04:26 AM
And if you want to close the thread, You can set the thread to resolved by editing the post, gong to advanced options and set the prefix to resolved.

08-14-2012, 12:55 PM
Dirty but I solved it.

Thanks again Bernie. You really helped me through a tight one there... CHEERS!


.tab { margin-left: 5px; }
<link rel="stylesheet" type="text/css" href="http://www.optimalinc.com/uploaded/images/Scripts/Navigation/sdmenu_001.css" /></p>
<script type="text/javascript" src="http://www.optimalinc.com/uploaded/images/Scripts/Navigation/sdmenu.js">
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
</script><script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu1");
// ]]>
<div id="my_menu1" class="sdmenu">
<div><span>Computer Aided Engineering (CAE)</span> <a href="http://www.optimalinc.com/15.html">Overview</a> <a href="http://www.optimalinc.com/18.html">FE Modeling</a> <a href="ttp://www.optimalinc.com/19.html">FEA Services</a> <a href="http://www.optimalinc.com/45.html">Computational Fluid Dynamics</a> <a href="http://www.optimalinc.com/21.html">Engineering Optimization</a></div>
<div><span>Reverse Engineering</span> <a href="http://www.optimalinc.com/16.html">Overview</a> <a href="http://www.optimalinc.com/48.html">Competitive Benchmarking</a> <a href="http://www.optimalinc.com/49.html">Inspection</a> <a href="http://www.optimalinc.com/51.html">Metrology</a> <a href="http://www.optimalinc.com/52.html">Tools</a></div>
<div class="collapsed"><span>Design Support</span> <a href="http://www.optimalinc.com/94.html">Overview</a> <a href="http://www.optimalinc.com/48.html">Competitive Benchmarking</a> <a href="http://www.optimalinc.com/49.html">Inspection</a> <a href="http://www.optimalinc.com/51.html">Metrology</a> <a href="http://www.optimalinc.com/52.html">Tools</a></div>
<div><span>Training</span> <a href="http://www.optimalinc.com/17.html">Overview</a> <a href="http://www.optimalinc.com/19.html">CAE Modeling</a> <a href="http://www.optimalinc.com/30.html">FIDES</a></div>

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TD WIDTH="225" HEIGHT="31" BACKGROUND="" VALIGN="bottom">

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TD WIDTH="225" HEIGHT="31" BACKGROUND="http://www.optimalinc.com/uploaded/images/right_top.jpg" VALIGN="middle">

</p><span style="font-size: 10pt;"><strong style="color: rgb(245, 245, 245);"><span style="font-family: Verdana, Geneva, sans-serif;"><p class="tab">Case Studies FEA/CFD/CAE</p></span></strong>

<div class="collapsed"><span>FEA: Contact & Stresses</span>
<a href="http://www.optimalinc.com/54.html">Background</a>
<a href="http://www.optimalinc.com/55.html">Objective</a>
<a href="http://www.optimalinc.com/56.html">Approach</a>
<a href="http://www.optimalinc.com/57.html">Loads & Boundary Conditions</a>
<a href="http://www.optimalinc.com/58.html">Results - von Mises Stresses</a>
<a href="http://www.optimalinc.com/59.html">Results - Contact Stress Profile</a>
<a href="http://www.optimalinc.com/60.html">Conclusion</a></div>
<div class="collapsed"><span>FEA: Fatigue</span>
<a href="http://www.optimalinc.com/61.html">Background</a>
<a href="http://www.optimalinc.com/62.html">Objective</a>
<a href="http://www.optimalinc.com/63.html">Analysis Procedure</a>
<a href="http://www.optimalinc.com/64.html">Results - Baseline Design</a>
<a href="http://www.optimalinc.com/65.html">Results - Iterations I & II</a>
<a href="http://www.optimalinc.com/66.html">Conclusion</a></div>
<div class="collapsed"><span>FEA: Impact (FMVSS)</span>
<a href="http://www.optimalinc.com/67.html">Background & Objective</a>
<a href="http://www.optimalinc.com/68.html">Approach</a>
<a href="http://www.optimalinc.com/69.html">Loads & Boundary Conditions</a>
<a href="http://www.optimalinc.com/70.html">Results - Baseline Design</a>
<a href="http://www.optimalinc.com/71.html">Recommended Design - Iteration I</a>
<a href="http://www.optimalinc.com/72.html">Results - Iteration I</a>
<a href="http://www.optimalinc.com/73.html">Recommended Design - Iteration II</a>
<a href="http://www.optimalinc.com/74.html">Results - Iteration II</a>
<a href="http://www.optimalinc.com/75.html">Conclusions</a></div>
<div class="collapsed"><span>FEA: Test Correlation</span>
<a href="http://www.optimalinc.com/76.html">Background & Objective</a>
<a href="http://www.optimalinc.com/77.html">Approach</a>
<a href="http://www.optimalinc.com/78.html">Results & Conclusions</a></div>
<div class="collapsed"><span>CFD: Thermal Analysis Flow</span>
<a href="http://www.optimalinc.com/79.html">Background</a>
<a href="http://www.optimalinc.com/80.html">Objectives</a>
<a href="http://www.optimalinc.com/81.html">Approach</a>
<a href="http://www.optimalinc.com/82.html">Results - Temperature Distribution</a>
<a href="http://www.optimalinc.com/83.html">Results - Heat Transfer Coefficients</a>
<a href="http://www.optimalinc.com/84.html">Results - Velocity Contour</a>
<a href="http://www.optimalinc.com/85.html">Conclusions</a></div>
<div class="collapsed"><span>CFD: Vibration Analysis</span>
<a href="http://www.optimalinc.com/86.html">Background</a>
<a href="http://www.optimalinc.com/87.html">Objectives</a>
<a href="http://www.optimalinc.com/88.html">Approach</a>
<a href="http://www.optimalinc.com/89.html">Results - Velocity Vectors</a>
<a href="http://www.optimalinc.com/90.html">Results - 3D Streamlines</a>
<a href="http://www.optimalinc.com/91.html">Results - Relative Pressure</a>
<a href="http://www.optimalinc.com/92.html">Conclusions</a></div>
<div class="collapsed"><span>Modeling: Body In White</span>
<a href="http://www.optimalinc.com/93.html">Background</a>
<a href="http://www.optimalinc.com/95.html">Unique Modeling Requirements I</a>
<a href="http://www.optimalinc.com/96.html">Unique Modeling Requirements II</a>
<a href="http://www.optimalinc.com/97.html">Model Delivery</a></div>
<div class="collapsed"><span>Modeling: Transmission Housing</span>
<a href="http://www.optimalinc.com/98.html">Customer Modeling Request</a>
<a href="http://www.optimalinc.com/99.html">Model Construction</a>
<a href="http://www.optimalinc.com/96.html">Model Delivery</a></div>
<div class="collapsed"><span>Optimization: Crossmember</span>
<a href="http://www.optimalinc.com/101.html">Background & Objective</a>
<a href="http://www.optimalinc.com/102.html">Results - Baseline</a>
<a href="http://www.optimalinc.com/103.html">Design Optimization - Proposal I</a>
<a href="http://www.optimalinc.com/104.html">Design Optimization - Proposal II</a>
<a href="http://www.optimalinc.com/105.html">Summary of Results</a></div>
<div class="collapsed"><span>Optimization: Engine Cover</span>
<a href="http://www.optimalinc.com/106.html">Background</a>
<a href="http://www.optimalinc.com/107.html">Modification Proposal by Design Team</a>
<a href="http://www.optimalinc.com/108.html">Design Space Definition</a>
<a href="http://www.optimalinc.com/109.html">DSA & Optimization Results</a>
<a href="http://www.optimalinc.com/110.html">Optimal's Design Proposal</a>
<a href="http://www.optimalinc.com/111.html">Results - Proposed Design</a></div>
<div class="collapsed"><span>Optimization: Motor Holder</span>
<a href="http://www.optimalinc.com/112.html">Background</a>
<a href="http://www.optimalinc.com/113.html">Baseline Correlation Model Analysis</a>
<a href="http://www.optimalinc.com/114.html">Topology Optimization Model</a>
<a href="http://www.optimalinc.com/115.html">Results & Proposed Design</a>
<a href="http://www.optimalinc.com/116.html">Results - Proposed Design</a></div>

08-14-2012, 08:15 PM
Remember to encase your code in
I think the problem OS that in the script it is referecncing to an id ie:
this.menu = document.getElementById(id);

The problem is you have different id's so you will have to modify this.

08-14-2012, 09:36 PM
One quick note tribangle -

You shouldn't use tables for your webpage layout. They are depricated for anything except tabular data... You should use css and divs instead!

If this thread is finished, please set it to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.

Edit -
@Bernie - Yes, but now I'm pretty sure the thread is actually finished...

08-14-2012, 11:54 PM
And if you want to close the thread, You can set the thread to resolved by editing the post, gong to advanced options and set the prefix to resolved.

I've already posted that keyboard....