Help with a web page tree menu like the one on Computer Lounge's website

Forums › IT Pro and developers › Help with a web page tree menu like the one on Computer Lounge's website

RealityClash

192 posts

Master Geek

#106244 20-Jul-2012 10:19

Hey guys,
Just wondering if someone can link me to somewhere that explains how to create a tree menu for a webpage like the one that Computer Lounge use on the left side of their pages?

i.e. http://www.computerlounge.co.nz/components/

I've just started learning HTML and CSS and the main thing I'm having trouble with is trying to work out how to make one menu item close when you open another.

Thanks for any help you can provide

itxtme

2102 posts

Uber Geek
+1 received by user: 557

#659032 20-Jul-2012 12:55

It is a javascript based menu system, and would probably be intergrated with their ecommerce package.

If you did however want to create a similar system from scratch I suggest using a javascript framework like Jquery. You can then use somebody's pre-developed user interface and edit it accordinly. One such example would be

http://jquery.bassistance.de/treeview/demo/

menabassily

434 posts

Ultimate Geek
+1 received by user: 3
Inactive user

#659188 20-Jul-2012 16:01

This will be very helpful to you, codes for different menus, explaining the supported browsers and it has a demo for each one. If you are a UI/UX Developer you will find this very helpful:
http://www.cssplay.co.uk/menus/

mattwnz

20520 posts

Uber Geek
+1 received by user: 4797

#659198 20-Jul-2012 16:09

RealityClash: Hey guys,
Just wondering if someone can link me to somewhere that explains how to create a tree menu for a webpage like the one that Computer Lounge use on the left side of their pages?

i.e.?http://www.computerlounge.co.nz/components/

I've just started learning HTML and CSS and the main thing I'm having trouble with is trying to work out how to make one menu item close when you open another.

Thanks for any help you can provide?

What cms or eccomerce package are you using, as they will usually have forums where people may have setup such a menu. Either that or it could be a standard feature or plugin.

RealityClash

192 posts

Master Geek

#659213 20-Jul-2012 16:28

itxtme, Thanks for the link, I'm trying to edit the code for that page now so as to just use Sample 3 and work from that, just a matter of working out what code I need and what I can get rid of which is a little difficult seeing as I haven't been learning HTML and CSS long and have no experience with javascript.

Thanks menabassily, looks to be some pretty cool samples on that page.

Sorry mattwnz I'm not even sure what a cms or eccomerce package is, I've only been learning web site development for several weeks at school.

mattwnz

20520 posts

Uber Geek
+1 received by user: 4797

#659235 20-Jul-2012 17:03

RealityClash: itxtme, Thanks for the link, I'm trying to edit the code for that page now so as to just use Sample 3 and work from that, just a matter of working out what code I need and what I can get rid of which is a little difficult seeing as I haven't been learning HTML and CSS long and have no experience with javascript.

Thanks menabassily, looks to be some pretty cool samples on that page.

Sorry mattwnz I'm not even sure what a cms or eccomerce package is, I've only been learning web site development for several weeks at school.

Basically a CMS is the content management system that runs behind the website design. You use CSS to style it. Many CMSs have free templates avalaible and will come with a standard few templates. Wordpress, concrete5, silverstripe are all CMSs.

Daft

12 posts

Geek

#664270 30-Jul-2012 21:50

Regarding the menu, it is a javascript menu. I'd suggest learning some of this as it is INCREDIBLY useful. However, seeing as you're "just starting" I'd recommend nailing down your HTML/CSS first. The best approach is not to over complicate things if possible but if you *really* need cool sliding menus I'm sure there will be code to copy/paste in somewhere out there. Google is your friend

Here's some links to help you on your way.

http://www.w3schools.com/ - Official recommended standard tutorials for most things web. (including javascript and jquery)
http://validator.w3.org/ - Find errors in your code with this
https://addons.mozilla.org/en-us/firefox/addon/web-developer/ - Utility for most things web.

Lenovo

Shop now for Lenovo laptops and other devices (affiliate link).

LesF

176 posts

Master Geek
+1 received by user: 25

#667051 3-Aug-2012 16:04

If you want to learn JavaScript it could be a good idea to start with jQuery as a base library. It takes away some of the long-winded tricky bits in JavaScript, and also hides some of the inconsistencies across different browser types. I'm sure there are many who would argue for or against learning pure JavaScript first, but you can make a UL list into an active treeview with maybe less than 10 lines of code.

Check these demos: http://jquery.bassistance.de/treeview/demo/

The page source shows the HTML, and a downloadable JavaScript file referenced on the page shows how each HTML element was turned into a treeview.

--
Les

RealityClash

192 posts

Master Geek

#667091 3-Aug-2012 16:54

Thanks for the help everyone, I would really like to learn JavaScript but just don't have the time atm unfortunately. I did however manage to make a tree menu (although I've found that they seem to more often be called accordion menus) using a template that's built into Dreamweaver :)