Hey people
I'm seeking an js menu like the link below.
jQuery would be a plus!
A:
Ohh yes sry :-)
When you mouseover the top menu "Shows", it shows many other menu options.
are there any tutorials/ open source js/jquery scripts for a menu like that one ?
You need to edit your question with this information, not add an answer. I voted to close because I thought you had not asked a question!
John Saunders
2009-07-20 01:23:07
+1
A:
Instead of linking to someone else's menu, I thought I'd give some pointers as to how you might go about making your own from scratch.
You probably already understand how web-pages are divided into blocks (divs), and you can style those blocks using CSS. Knowing this you can ask yourself -- what's so special about the "Shows" menu? Ignoring the JavaScript needed to show it, hide it, and change its colours; could you write the static HTML and CSS to display it on an empty page?
To make things easier to visualise, grab yourself a sheet of paper and a pencil and get scribbling! As you start writing more and more complex code, a notepad will become one of your most valued tools. I won't even start a GUI project these days until I've drawn out a basic storyboard for it.
Now you can start to think about how to programmatically create what you have drawn and coded statically. By far the best place to start is by defining the data-structures that represent the menu-items themselves, for example:
In the main "Shows" menu I can see only 4 arrays: One that represents the standard-menu on the far left:
SideMenu = [ 'TV Schedule', 'MTV Shows Gossip', etc... ]
And three more that represent the "Shows", "Specials", and "Classic Shows" menus respectively:
Shows = [ '16 and Pregnant', 'America\'s Best Dance Crew', etc... ]
Specials = [ '2009 Video Music Awards', '2009 Movie Awards', etc... ]
Classics = [ 'Aeon Flux', 'Beavis and Butt Head', etc... ]
From here you can think about how you would iterate over each array and the special-cases you need to take care of. Particularly, the "Shows" submenu is split over two columns. Before you think about the HTML involved, think about how your for-loop would know when it reaches the end of a "page" in your array, and how it would start a new one.
Finally, once you've dealt with your data-structures and drawing-routines, you can think about event-handling. ie; what to do when the mouse moves about the page. As you probably know, CSS can be used to change colours when the mouse moves over items, and you can use jQuery to apply handlers and show/hide your divs.
Sorry this ended up being a bit of an essay/rant -- I did not intend it as such! The Internet is a great resource for cut/pasting snippets of code that "just work" (I'm looking at you, gurus of SO ;-) but it can make us lazy and dependant. While that's fine for quick-fixes (and such things are very prevalent in the world of web design) it should not be your basis for development.
Remember The Law of Leaky Abstractions! Strive for understanding of what you are trying to achieve at the most fundamental level that your tools and abilities will allow -- this is the secret to getting the most out of abstractions (like jQuery) designed to make your day-to-day coding life easier.
brownstone
2009-07-19 21:32:06
For common problems, it's usually best to look for common solutions such as libraries first. Re-inventing the wheel can be fun and is useful in school for the educational aspects, but is a waste of valuable time in practice.Better to spend your limited time adding value than recreating already available value (eg library code).Of course, blindly cutting and pasting without be able to understand the underlying sw will often lead to problems as you mention. But building from the ground up is usually not productive (a different sort of problem).
Larry K
2009-07-19 21:44:19
I do agree with what you say, although I'm not keen on phrases like "waste of time" when talking about ones education. If one seeks to more fully understand the fundamentals of the problem now, this will be beneficial both as the project progresses, and of course for future projects. I wouldn't encourage completely reinventing the wheel as you say, but if a little while is spent understanding the wheel and how it's attached to the car then one is better equipped for when it eventually falls off. :D
brownstone
2009-07-20 09:24:16