PDA

View Full Version : Help on how to implement Slashdot menu



Adjust
07-19-2007, 03:36 PM
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
07-19-2007, 09:44 PM
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
07-19-2007, 10:50 PM
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
07-19-2007, 11:45 PM
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
07-20-2007, 09:11 AM
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
07-20-2007, 04:13 PM
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
07-20-2007, 04:45 PM
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
07-20-2007, 05:55 PM
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
07-20-2007, 06:19 PM
UNREAL! WOOT! :D

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
07-20-2007, 06:39 PM
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>

Adjust
07-20-2007, 09:31 PM
Veronica

Thanks for your reply. First of all, can I just clarify that the code I've referenced is not my own work. It's been extracted from the Actinic ecomm software that I'm using to build my site. Actinic automatically creates the links in js when a section/subsection is created.

Guess I'll have to keep trying and hope that in the meantime someone else on the forum would be able to help me out.



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



Hi Sliight

The link you've given comes up with Page not found. Could you please repost the link?



Thanks in advance.

Sam

Veronica
07-20-2007, 09:59 PM
Sam,
One problem with using javascript to generate your links is that people can turn javascript off (for security reasons) which means your site would have no navigation for them.

So if there's any way you can simply hard code your links, you would really be better off. Again, you would put those links into an "includes" file, so any time you made changes, you would only have to edit that one file.

If you have to use javascript to generate links, people would probably need to see your entire page's code to understand how it works.

Veronica

PS - Sliight, it sounds as if you have the ssi thing working, even if that link didn't :)

Sliight
07-20-2007, 10:59 PM
Oops... http://www.usejeff.com/linktesting.shtml

I've already reworked my site implementing everything from the .txt files into already created pages. I left up the "testlink" page, but you may as well just go to the main site and check out any page now for the source. The pages with the least amount of source will be any page other than the home page. I deleted about 65 pages that I had up previously in preperation for content. Due to your simple .txt stuff I can just change the links and appearance as I add pages.

To look at the source go to http://www.usejeff.com

The only thing I had to add because of this was an additional <span></span> at the end of the list before the </ul> The reason for this is because I had rounded corners and a background set up. It was messed up til I added the spans.

Also for Adjust, regarding people who disable JS. My main top menu is JS, however I hard coded links into the main bar in addition to links that actually drop down. I will then create menu pages that will essentially give them all of the drop down options they would have had, if they used JS.

Let me know if you want to see any of the .txt files I am now using to control the appearance and links of all three menus. (I made 4.txt files. Two for the javascript drop down menus, and 1 each for the list menu)

Regardless of if it's your code Veronica, it was your insight that posted it... so thank you again! :)

Sliight
07-20-2007, 11:59 PM
Heh you helped again ;) Me posting the wrong link reminded me to get my 404 page created. Now http://www.usejeff.com/dfljdslfjdsfjkdsfkljdsj should get you to my site :) (well once the domain updates that is ;)

Adjust
07-21-2007, 02:55 PM
Sam,
One problem with using javascript to generate your links is that people can turn javascript off (for security reasons) which means your site would have no navigation for them.


Good point.:eek: I think I'll hardcode the links and hold them separately in an included file and take it from there. No doubt, I'll shout for help if I get stuck.

Thanks ever so much for your time and help :)


Sliight - thanks for your suggestions too. I'll have a look at your site and see if I can get any ideas for implementing slashdot.


Sam

vagrant
07-21-2007, 07:05 PM
Is there a good way to make a link within the menu structure without any sub items? In other words:

I have 10 menu categories and only 5 have sub menus.

example: Home is just "index.html" no sub items.

Thanks for any input

Adjust
07-25-2007, 11:39 AM
Is there a good way to make a link within the menu structure without any sub items? In other words:

I have 10 menu categories and only 5 have sub menus.

example: Home is just "index.html" no sub items.

Thanks for any input

I'd be interested in that if anyones got a solution.

Adjust
07-25-2007, 11:45 AM
So far so good. I've managed to implement the sdmenu on my site. :) :) :)

The only problem I'm now having is how to get expandall() and collapseall() to work. I don't want to have a button on my page. I want to to have text that says "Expand all" or "collapse all" with a <a href="...." ></a>.

I've tried setting it to use the same code as the button but it doesn't do anything. :(

Does anyone know what I'm doing wrong please?

Thanks in advance

Sam

Adjust
07-25-2007, 03:20 PM
Is there a good way to make a link within the menu structure without any sub items? In other words:

I have 10 menu categories and only 5 have sub menus.

example: Home is just "index.html" no sub items.

Thanks for any input

You need to look here (http://www.dynamicdrive.com/forums/showthread.php?t=20460) - ictinus has a solution which works very nicely.

Veronica
07-25-2007, 05:27 PM
Sam,
Glad it's all working. For text links, just replace the buttons with



<a href="#" onclick="myMenu.expandAll(); return false;">Expand All</a>
<a href="#" onclick="myMenu.collapseAll(); return false;">Collapse All</a>

Adjust
07-25-2007, 09:00 PM
Sam,
Glad it's all working. For text links, just replace the buttons with



<a href="#" onclick="myMenu.expandAll(); return false;">Expand All</a>
<a href="#" onclick="myMenu.collapseAll(); return false;">Collapse All</a>


Veronica

What a star you are. Thank you ssssooooooo much. It's easy when you know how huh? Spent three hours last night trying to get it to work :mad: Wish I'd asked earlier. Thank you..thank you...thank you...:D :D :D

Give yourself a virtual hug from me.

Sliight
07-25-2007, 09:12 PM
Is there a good way to make a link within the menu structure without any sub items? In other words:

I have 10 menu categories and only 5 have sub menus.

example: Home is just "index.html" no sub items.

Thanks for any input


My top menu has a .txt file, and I have a seperate .txt file for the sub menus.

Here is the code for the top menu that I used.

The first two lines are just links that have no action associated with them. Not sure if this is quite the answer you were looking for, but it works fine for me.


<li><a href="http://www.usejeff.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.usejeff.com/why_use_me.shtml" title="Why Use Me"><span>Why Use Me?</span></a></li>
<li><a href="http://www.usejeff.com/general_mortgage_info.shtml" title="General Mortgage Info" rel="dropmenu2_c"><span>Mortgage Education</span></a></li>
<li><a href="http://www.usejeff.com/credit_help.shtml" title="Credit Education" rel="dropmenu1_c"><span>Credit Education</span></a></li>
<li><a href="http://www.usejeff.com/first_time.shtml" title="First time homebuyer" rel="dropmenu9_c"><span>First time homebuyer?</span></a></li>
<li><a href="http://www.usejeff.com/computer_help.shtml" title="Computer Help" rel="dropmenu3_c"><span>Computer Help</span></a></li>
<li><a href="http://www.usejeff.com/avoid.shtml" title="How to avoid..." rel="dropmenu7_c"><span>How to avoid...</span></a></li>
<li><a href="http://www.usejeff.com/usefull_links.shtml" title="Usefull Links" rel="dropmenu8_c"><span>Usefull Links</span/></a></li>

mothilal
05-15-2011, 07:25 PM
Hi all here your all updates will be so good it's helpful for all and i am also give you the small suggestion to you i know one website to check the internet speed test the site is ip-details.com (http://www.ip-details.com/internet-speed-test/) this is the one of the best website to check the internet speed.