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.
Buying anything on Amazon? Please use the Geekzone Amazon aff link.




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

Uber Geek
+1 received by user: 74


  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/

7599 posts

Uber Geek
+1 received by user: 433


  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.

7599 posts

Uber Geek
+1 received by user: 433


  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.

72 posts

Master Geek
+1 received by user: 6


  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:

Has Spark (Telecom) locked their iphone 6 ?
Created by anewguy2014, last reply by michaelmurfy on 17-Dec-2014 14:32 (25 replies)
Pages... 2


forgot how to unlock a car door
Created by joker97, last reply by joker97 on 19-Dec-2014 19:10 (49 replies)
Pages... 2 3 4


In defence of cats
Created by Rikkitic, last reply by DarthKermit on 17-Dec-2014 15:40 (68 replies)
Pages... 3 4 5


Slaughter of Innocents
Created by networkn, last reply by networkn on 19-Dec-2014 17:46 (64 replies)
Pages... 3 4 5


Police Camera Van Disguise
Created by Reanalyse, last reply by raytaylor on 20-Dec-2014 10:40 (41 replies)
Pages... 2 3


How is iParcel these days?
Created by peejayw, last reply by surfisup1000 on 18-Dec-2014 21:45 (19 replies)
Pages... 2


Spray Foam Insulation
Created by AACTech, last reply by timbosan on 19-Dec-2014 16:58 (36 replies)
Pages... 2 3


How to upload 150GB of photos to iCloud?
Created by josephhinvest, last reply by timbosan on 17-Dec-2014 15:05 (35 replies)
Pages... 2 3



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.