Help on how to implement Slashdot menu

[Adjust]

1) Script Title: Help with slashdot menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

3) Describe problem:

This is my 1st post, so please go easy on me. I'm trying to implement the slashdot menu on my site by am really confused as I don't have any experience of js. The menu is really fantastic and I'd really like to use it on my site but I don't know how I should go about doing it.

I understand the css bit. I've copied the js file to my work folder. I just don't understand how to code the html to trigger it. Also do I need to hard code all the <a href=..." tags or does it get done automatically?

I'm really sorry for asking such dumbass questions, but I'm trying to learn and it just doesn't seem obvious to me as to what I should do. I'd really appreciate it someone would explain in pleb-term what I should code for my html.

Thanks in anticipation

Sam

[Veronica]

First, make sure you put the js and css file links in the head section of your file, with the correct DD attribution.

Then in the body section, copy and paste the html code. Or use this as a template (adding more links for each section as you want):

    <div style="float: left" id="my_menu" class="sdmenu">

<div>
<span>Your title</span>
<a href="http:www.whateverlink.com">Link</a>
<a href="http:www.whateverlink.com">Link</a>
</div>

<div>
<span>Your title</span>
<a href="http:www.whateverlink.com">Link</a>
<a href="http:www.whateverlink.com">Link</a>
</div>

<div>
<span>Your title</span>
<a href="http:www.whateverlink.com">Link</a>
<a href="http:www.whateverlink.com">Link</a>
</div>

<div>
<span>Your title</span>
<a href="http:www.whateverlink.com">Link</a>
<a href="http:www.whateverlink.com">Link</a>
</div>

</div>

Be careful that you don't lose any of the div or /div tags. (Which hopefully I haven't done either)

If you also want the menu action section, that's in the form on the html page.

[Adjust]

Veronica

Thank you VERY much for your post - I really appreciate it. I've actually managed to get something up. Yippee. I just need to add the actions from the html page - I'll play around with it tomorrow and will let you know if I get stuck!!

The other thing I wanted to know was whether the section headings and the links can be pulled in automatically? At the moment I don't have a whole heap of sections, so hard coding isn't that big an issue. BUT I will be adding new sections to my site over the coming weeks and I think it might become a nightmare to maintain.

Thanks once again for your time, and more importantly, your patience.

Sam

[Veronica]

No problem. If you have any issues, you can post a link to the page, so we can see your code.

As for your question about section headings and links - there are different ways you can pull in a common portion of the page (such as navigation, disclaimers, things that are the same on every single page) You should ask your hosting company if you can use things like server side includes, PHP, ASP, etc. If you can, it's not that hard to implement.

[Adjust]

As for your question about section headings and links - there are different ways you can pull in a common portion of the page (such as navigation, disclaimers, things that are the same on every single page) You should ask your hosting company if you can use things like server side includes, PHP, ASP, etc. If you can, it's not that hard to implement.

Hi

Yes I can use server side includes, PHP etc.. I'm hosting on a linux server with all the bells and whistles that usually come with the hosting packages.

Would someone point me in the right direction of getting the code to pull my sections and subsections in automatically please.

Thank you so much for your help, I really appreciate it.

Sam

[Veronica]

A server side include basically works on the same principle as any external script. That is, you cut the code from your html page, paste in into a separate document, and then link to that document in your html code. So, for example, if you have a div that contains navigation on all your pages, you would simply put all that code into a document, and replace it with a link to that document. That way, when you change the navigation, you only have to change that one document.

You may need to change the extension of your html pages to use server side includes, for example to .shtml or .php If you use .shtml, the code you would use to link to your external includes file would be:
<!--#include virtual="/path_relative_to_site/name_of_file.txt" -->
If the file is in the same directory as the ssi, you use:
<!--#include file="name_of_file.txt" -->

Two sites with more info that are fairly easy to understand are http://www.freewebmasterhelp.com/tutorials/ssi and http://bignosebird.com/ssi.shtml

Best bet is to create a test page and practice with that on your server, before you start to slice and dice your actual files!

[Adjust]

Hi Veronica

Thanks for that. I'll have a read up of it and try to understand it. I've already got a file with all the relative file paths for my sections and subsections. How would I incorporate that into slashdot menu? That's where I'm getting confused. I tried a number of different things today but nothing worked

What I've got is a js file with builds links for my section/subsection as I add them to my site:

var section_tree = new CreateArray(7);
section_tree[1].sName = "Books";
section_tree[1].sURL = "../../../Act_PreviewWarningPage.html?ACTION=SHOWCART";
section_tree[1].sImage = "";
section_tree[1].nSectionId = "1";
section_tree[1].nImageWidth = "13";
section_tree[1].nImageHeight = "13";
section_tree[2].sName = "Clothing";
section_tree[2].sURL = "../../../Act_PreviewWarningPage.html?ACTION=SHOWCART";
section_tree[2].sImage = "";
section_tree[2].nSectionId = "2";
section_tree[2].nImageWidth = "13";
section_tree[2].nImageHeight = "13";
section_tree[2].pChild= new CreateArray(1);
section_tree[2].pChild[1].sName = "Shoes";
section_tree[2].pChild[1].sURL = "../../../Act_PreviewWarningPage.html?ACTION=SHOWCART";
section_tree[2].pChild[1].sImage = "";
section_tree[2].pChild[1].nSectionId = "3";
section_tree[2].pChild[1].nImageWidth = "13";
section_tree[2].pChild[1].nImageHeight = "13";
section_tree[3].sName = "Homeware";
section_tree[3].sURL = "../../../Act_PreviewWarningPage.html?ACTION=SHOWCART";
section_tree[3].sImage = "";
section_tree[3].nSectionId = "4";
section_tree[3].nImageWidth = "13";
section_tree[3].nImageHeight = "13";
section_tree[4].sName = "Computers";
section_tree[4].sURL = "../../../Act_PreviewWarningPage.html?ACTION=SHOWCART";
section_tree[4].sImage = "";
section_tree[4].nSectionId = "5";
section_tree[4].nImageWidth = "13";
section_tree[4].nImageHeight = "13";
section_tree[5].sName = "Stationery";
section_tree[5].sURL = "../../../Act_PreviewWarningPage.html?ACTION=SHOWCART";
section_tree[5].sImage = "";
section_tree[5].nSectionId = "6";
section_tree[5].nImageWidth = "13";
section_tree[5].nImageHeight = "13";
section_tree[6].sName = "Best Sellers";
section_tree[6].sURL = "../../../Act_PreviewWarningPage.html?ACTION=SHOWCART";
section_tree[6].sImage = "";
section_tree[6].nSectionId = "7";
section_tree[6].nImageWidth = "13";
section_tree[6].nImageHeight = "13";
section_tree[7].sName = "New Products";
section_tree[7].sURL = "../../../Act_PreviewWarningPage.html?ACTION=SHOWCART";
section_tree[7].sImage = "";
section_tree[7].nSectionId = "8";
section_tree[7].nImageWidth = "13";
section_tree[7].nImageHeight = "13";

And then this bit of js code that grabs the section/subsesction headings from the above js file:

<script language="javascript" type="text/javascript">

function YahooSections(ar)
{
var strIDs = '';
for (var i=1;i<=ar.length;i++)
  {
  if (ar[i].sURL != null)
    {
    strIDs += '<a href="' + ar[i].sURL + '"><span class="sdmenu"><b>' + ar[i].sName + '</b></span></a><br />';
      {
      if (ar[i].pChild)
        {
        for (var j=1;j<=ar[i].pChild.length;j++)
          {
          if (ar[i].pChild[j].sURL != null)
            {
            strIDs += '<a href="' + ar[i].pChild[j].sURL + '"><span class="sdmenu">' + ar[i].pChild[j].sName + '</span></a><br />';
            }
          }
        }
      }
    strIDs += '<br />'
    }
  }
return strIDs
}
//
</script>

And this bit which displays it on the sidebar:

<script language="javascript" type="text/javascript">
			document.write(YahooSections(section_tree))

What I don't understand is HOW I can integrate this into SDMENU. Any suggestions would be appreciated.

Sorry for all the code - I'm hoping you'll be able to say chane x, y, z and wallop!!!

Thanks once again for all your help

Sam

[Veronica]

That, I'm not sure of.

The way I had been thinking was you put the SDMENU js and css into the head section of the html files. Then write out the links in a separate ssi file, using the format in my first post, and link to that ssi file in the body of all the html pages.

If you're using javascript to write the links, I'm not sure how to combine that with the SDMENU. Can you post a link to your page?

[Sliight]

UNREAL! WOOT!

Ok so I've been trying to find goot tutorials on PHP because I have over 72 pages expected for my website just to start. I created them all, and was concerned as I added things for changing the appearance of the links to reflect the content. I was also concerned for when I added more links, or simply needed to hide the inactive links I had created.

I followed your instructions of simply using this: <!--#include file="name_of_file.txt" --> in place of the text I cut out. Then took the removed text, threw it into a .txt file, and renamed the page .shtml instead of html and walla...it works in IE, Moz, Opera, and Firefox.

So basically, you saved me a ton of time learning PHP and resolved my issue just like that.

Thank you!

[Sliight]

Edit: After re-reading maybe you're not doing the exact same thing... however maybe just create a seperate .txt file for your stuff. See below if what I did helps and applies...

Adjust, you sound like you're doing the exact same thing I am...

If you want to look at my source code, and how it worked for me go here: http://www.usejeff.com/linktesting.shtml

do the CTRL+F and type in testimonials, sidenavigation, and slidemenu and it will take you directly to the code using Veronicas instruction.

I didn't make any changes to the header... it includes everything the script told me to put in there.

I simply cut out the list itself and left all DIVs in their normal places. I just did this to my top drop down menu, which is a script, and both left and right menus which are lists.

The drop down menu I had to be sure and include the last </div>. Initially I left the </div> in the HTML and it ended up including the next bit of normal text as a link. Once I removed it and placed it into the .txt menu it worked fine.

For reference to go with the source code of that page, here is the code that is inside the slidemenu.txt file that is on the server.

<!--2nd drop down menu -->
<div id="dropmenu2_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.usejeff.com/coming_soon.shtml">Mortgage Page 1</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Mortgage Page 2</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Mortgage Page 3</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Mortgage Page 4</a>
</div>


<!--3rd drop down menu -->
<div id="dropmenu3_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.usejeff.com/coming_soon.shtml">Computer Help 1</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Computer Help 2</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Computer Help 3</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Computer Help 4</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Computer Help 5</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Computer Help 6</a>
</div>


<!--1st drop down menu -->
<div id="dropmenu1_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.usejeff.com/coming_soon.shtml">Credit Score 1</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Credit Score 1</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Credit Score 1</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Credit Score 1</a>
</div>


<!--4th drop down menu -->
<div id="dropmenu4_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.usejeff.com/coming_soon.shtml">Restaurant Reviews</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Fun stuff to do</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Key Locations</a>
</div>


<!--5th drop down menu -->
<div id="dropmenu5_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.usejeff.com/coming_soon.shtml">Restaurant Reviews</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Fun stuff to do</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Key Locations</a>
</div>


<!--6th drop down menu -->
<div id="dropmenu6_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.usejeff.com/coming_soon.shtml">Restaurant Reviews</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Fun Stuff to do</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Key Locations</a>
</div>


<!--7th drop down menu -->
<div id="dropmenu7_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.usejeff.com/coming_soon.shtml">Recipes</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Home Owner Tips 1</a>
<a href="http://www.usejeff.com/coming_soon.shtml">Home Owner Tips 2</a>
</div>

<!--8th drop down menu -->
<div id="dropmenu8_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.webmd.com" target="_blank">WebMd.com (medical help)</a>
<a href="http://www.theultimates.com/white/" target="_blank">Ultimate White Pages</a>
<a href="http://www.theultimates.com/yellow/" target="_blank">Ultimate Yellow Pages</a>
<a href="http://www.mapquest.com" target="_blank">Maps and driving directions</a>
<a href="http://www.mail2web.com/" target="_blank">Access "your" e-mail from the web</a>
<a href="http://www.dslreports.com/speedtest" target="_blank">Internet speed test</a>
<a href="http://www.mysimon.com/" target="_blank">Online Shopping price comparison</a>
</div>

<!--9th drop down menu -->
<div id="dropmenu9_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.usejeff.com/coming_soon.shtml">First Time Homebuyer 1</a>
<a href="http://www.usejeff.com/coming_soon.shtml">First Time Homebuyer 2</a>
<a href="http://www.usejeff.com/coming_soon.shtml">First Time Homebuyer 3</a>
<a href="http://www.usejeff.com/coming_soon.shtml">First Time Homebuyer 4</a>
<a href="http://www.usejeff.com/coming_soon.shtml">First Time Homebuyer 5</a>
</div>