Geekzone: technology news, blogs, forums
Guest
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.



192 posts

Master Geek


Topic # 106244 20-Jul-2012 10:19 Send private message

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 :)

Create new topic
917 posts

Ultimate Geek
+1 received by user: 30


  Reply # 659032 20-Jul-2012 12:55 Send private message

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/ 

464 posts

Ultimate Geek
+1 received by user: 6
Inactive user


  Reply # 659188 20-Jul-2012 16:01 Send private message

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/

6092 posts

Uber Geek
+1 received by user: 208


  Reply # 659198 20-Jul-2012 16:09 Send private message

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.



192 posts

Master Geek


  Reply # 659213 20-Jul-2012 16:28 Send private message

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.

6092 posts

Uber Geek
+1 received by user: 208


  Reply # 659235 20-Jul-2012 17:03 Send private message

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.

12 posts

Geek


  Reply # 664270 30-Jul-2012 21:50 Send private message

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.

50 posts

Geek
+1 received by user: 1


  Reply # 667051 3-Aug-2012 16:04 Send private message

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.



192 posts

Master Geek


  Reply # 667091 3-Aug-2012 16:54 Send private message

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 :)

Create new topic








Twitter »
Follow us to receive Twitter updates when new discussions are posted in our forums:



Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:



Follow us to receive Twitter updates when new jobs are posted to our jobs board:



Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:




News »

Trending now »
Hot discussions in our forums right now:

galaxy s4 now on 4.4.2
Created by nzrock, last reply by tanivula on 18-Apr-2014 22:33 (50 replies)
Pages... 2 3 4


Forms of government for New Zealand
Created by charsleysa, last reply by Kyanar on 18-Apr-2014 20:55 (98 replies)
Pages... 5 6 7


Snap suffering Trans-Tasman congestion 18/04?
Created by Lias, last reply by CaseyDan on 18-Apr-2014 22:18 (23 replies)
Pages... 2


MH370 - Call for Search & Rescue Help
Created by DS248, last reply by Sideface on 17-Apr-2014 17:28 (735 replies)
Pages... 47 48 49


why does the tax payer have to pay for the prince and princess' 6 star holiday?
Created by joker97, last reply by Geektastic on 17-Apr-2014 15:49 (67 replies)
Pages... 3 4 5


Watching overseas content on my TV
Created by beenz, last reply by freitasm on 18-Apr-2014 19:00 (13 replies)

Help ! Home business connection and VDSL dead. yikes.
Created by Scotsman, last reply by Scotsman on 17-Apr-2014 21:10 (26 replies)
Pages... 2


Free connection to Ultra Fibre not true
Created by kapitikarl, last reply by cbrpilot on 15-Apr-2014 13:24 (27 replies)
Pages... 2



Geekzone Live »
Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.

Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.

Alternatively, you can receive a daily email with Geekzone updates.