Programming Blog
Web development , php , ajax , symfony, framework, zend
How to Build and Enhance a 3-Level Navigation Menu
In: web resources
2 Mar 2010Perhaps more than any other topic, I’m most often contacted about how to build cross-browser navigation menus. Understandably, the reason is because every web designer has built one at some point, if not during every project! Nonetheless, it can absolutely be a tricky task. In this video tutorial, I’ll teach you how to build an attractive cross-browser navigation menu; notable features include CSS3 gradients, multiple sub-menus, and jQuery animations.
Other Viewing Options
Write a Plus Tutorial
Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Comment Form
About this blog
This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.
5 Responses to How to Build and Enhance a 3-Level Navigation Menu
Alec
March 5th, 2010 at 12:55 pm
Well, you'll need at least 3 tables.
Tasks:
taskID, completed, task info cols,
Projects:
ProjectID, completed, project info
Dependencies:
ID
SubjectID – task or project with dependencies
SubjectType – is the subject a task or project
DepID – id of the dependency
DepType – is the subject a task or project
There are other ways but you need at least that much.
Michel
March 16th, 2010 at 9:36 am
Your page must be a least 2 years old, and must have a lot of visitor and must support a _blank_ (i forgat thename) structure, if you go to google analytics they will explain you there and they will help you setup what you need.
ernststavroblofeld
March 21st, 2010 at 10:19 pm
On Internet Explorer 7, there are forward and back arrows to the left of the address bar. (On previous version of IE, they were located on the command bar.) Refresh and Stop are to the right of the address bar.
Also on IE7, you can add or delete buttons from the command bar: Right-click the command bar, and select 'Customize Command Bar' >> 'Add or Remove Commands…'
For Firefox, the usual navigation buttons are all on the navigation bar. If you want to add more, right-click on it and click 'Customize…' Then drag a command from the Customize Toolbar dialong and drop it on the navigation toolbar.
PayneLessDesigns.com
May 8th, 2010 at 9:37 am
You have a LOT of coding errors which is screwing up a lot of browsers:
CSS –
HTML –
The 3 HTML errors are the worse because you are not telling the browsers what character encoding to use and worse still, you are not using a document type which is causing every browser to operate in Quirks Mode. In Quirks Mode, they pretty much parse your pages the way the developers of the browser want as the browsers fall back on their default way of parsing a page.
Always use Firefox to view your pages. It is as close to a CSS2.1 compliant browser as you can get. IE is very, very sloppy about how it reads and parses the code on a page.
I see NO images on the other pages as there are no links to any. Checked with my web tool which locates broken images and none were found because there are no links to any.
Ron
The Assassin
May 21st, 2010 at 7:44 am
You don't say which Photoshop you are using. If Elements, reask the question and I will tell you about some really good online courses. In the meantime, here is a link to some really great video tutorials, hope they fit your version.
BTW, you will not be producing psd's for web sites as psd will not display on the internet. Only jpeg, gif and in many instances png.