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
1058 posts

Uber Geek
+1 received by user: 73


  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/

7358 posts

Uber Geek
+1 received by user: 408


  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.

7358 posts

Uber Geek
+1 received by user: 408


  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.

70 posts

Master Geek
+1 received by user: 5


  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 tech item prices are listed in our price comparison site:





Trending now »

Hot discussions in our forums right now:

Snap refuses to replace faulty gear
Created by Brendan, last reply by sorceror on 26-Oct-2014 21:19 (33 replies)
Pages... 2 3


House Auctions
Created by t0ny, last reply by Geektastic on 26-Oct-2014 22:28 (70 replies)
Pages... 3 4 5


Speed limit when overtaking? Teach me please.
Created by nakedmolerat, last reply by Hobchild on 26-Oct-2014 00:11 (92 replies)
Pages... 5 6 7


VDSL, which router/modem sub $200?
Created by TeaLeaf, last reply by NonprayingMantis on 25-Oct-2014 19:48 (28 replies)
Pages... 2


Neon - Sky's new streaming service
Created by JarrodM, last reply by JimmyH on 25-Oct-2014 17:37 (29 replies)
Pages... 2


Snap have failed our company!
Created by dafman, last reply by kornflake on 23-Oct-2014 17:41 (37 replies)
Pages... 2 3


Thief taunts 12 year old via stolen laptop
Created by macuser, last reply by charsleysa on 22-Oct-2014 23:49 (12 replies)

iPad Air 2 and iPad Mini 3. Gonna get one?
Created by Dingbatt, last reply by dickytim on 26-Oct-2014 12:32 (116 replies)
Pages... 6 7 8



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.