tabbed website navigation with xml

Posted on 2005-03-02
Medium Priority
Last Modified: 2008-02-26
I'm new to xml....or I'm researching it because I've heard that you can use it to design website navigation tools...such as the tabbed navigation that apple.com uses

Only using xml...which will populate the tabs with the proper titles....and also change the content of the page with the appropriate data using xsl

Any way...I just need to know if there are any tutorials on how to design this way using xml and how it works.

Any hyperlinks to tutorials would be sufficient enough to get me started...so I can later ask more specific questions requarding xml for tabbed website navigation

Thanks in advance
Question by:since1983
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
LVL 15

Expert Comment

ID: 13443876
hm...you can certanly generate your site from XML source via XSLT, but why don't use something like Plone? (www.plone.org)

regarding links:


Author Comment

ID: 13443953
I'd just like to know how to do it all myself..using the underlying xml technologies.

Besides, I don't want to be depend on any programs....and I want this to not only a useful program for web navigation, but also as a project for me to learn xml.

I'm trying to learn xml, and the tabbed website navigation is one of the practical things that I need to have completed any way...so therefore that's why I want to know what the best way to do it with xml is...especially for updating content on my website...via xml files...using XSLT I suppose...or whatever would be best
LVL 10

Expert Comment

ID: 13444145
The harder part of doing the tabbed is making the HTML look ok.  If you look at the source code of the apple site, they just play simple tricks with swapping GIF images.  This is something that's very easy to do without XML.  Sure, you could use XML, but if I wanted to clone Apple's appearance, I wouldn't bother (even though I know how to do it with XML data).

XML isn't a UI technology.  You'll need to figure out what UI technology to use (HTML, dynamic HTML, flash, java applet, ...), then you can figure out how to use XML (with XSL, avascript using data islands, ...) with your UI technology.

If you want to pursue XML using XSLT, here's a quick place to start:

Using the little example from that site, you can have a working XSL transformed XML file in just a few minutes (or 30 seconds if you knew exactly what to do)
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 13444213
Hmmm...maybe apple was a bad example....how about something like firstgov.gov

They have a navigation menu on the left...that has links....then in the middle of the page...it has the tabs...and you click on tabs to get to more links.

I want this site I'm working on to look like that...because I'm basically making a portal.

What I like too is how when you click on the tab it doesn't reload the whole page...just switches the tab, without modifying or reloading any of the other content on the page.

How it is possible to use xml to populate these tab menus...and how is that it can be done without reloading the page?
LVL 10

Expert Comment

ID: 13444651
firstgov.gov is also very low tech.  

This what one of their menu items looks like:
                <td><a href="http://www.gov.com/agency/dhs/index.html" class="faqnavleft">Homeland Defense</a></td></tr>

The thing is that they have little data to manage.  They play slightly funny (old school) image map tricks with the tabbed GIF at the top, and low tech tricks (change the <TD> bgcolor on mouseover) for the stuff on the left.  If you had changing XML for the stuff on the left, you could easily generate the HTML for it but changing the HTML would be just as easy (if the XML was not shared).
LVL 15

Expert Comment

ID: 13447281
>What I like too is how when you click on the tab it doesn't reload the whole page...just switches the tab, without modifying or reloading any of the other content on the page

there are nothing for XML :)  this is JavaScript coding.

You can use XML to describe your site content, and then write XSLT to perform transformation from description to HTML-ready site, but before you do that, you should prepare all HTML/JavaScript/and so on stuff, or how do you know what do you want to transform to?

Author Comment

ID: 13447310
Well...there was this one website that was used as an example in this XML book I was reading...and it had tabs..etc....but the names in the tabs, were populated using XML..according to the article.  

Also..XML was used to populate all the content and links on that page..or whichever page you navigated to, via the tabs.

So...I'm thinking I want to know how to do something like that with XML,...and yes...also being able to change the document area on the website...while leaving the navigation part alone(..aside from just switching to the appropriate tab)...so only the part of the page that I want to new document or new content to show up, will have to change...without refreshing the whole web page.

Is there a tutorial that covers all these things?  I mean...I'd think that some of this stuff went hand in hand
LVL 15

Assisted Solution

dualsoul earned 1000 total points
ID: 13448811
probably you need to get some tutorials for begginers at www.w3cshools.com  to get better understand of what the xml and xslt is.
LVL 10

Accepted Solution

BobSiemens earned 1000 total points
ID: 13450735
<<<Is there a tutorial that covers all these things?  I mean...I'd think that some of this stuff went hand in hand>>>

'These things' is probably less defined than you think.

Here's what you should do (I think).

Start with a page you'd like to emulate.  Do a view source to see what the HTML looks like.  Look to see the underlying technologies behind the HTML (maybe some javascript, maybe applets).  Only then might XML come into play.  And it might come into play in a few different ways: JavaScript, Input to a java applet, client side generation of HTML, server side generation of HTML, ...

The two you pointed out are low tech.  If you wanted to, you could take an XML file that represented the links in the menu and use XSL to generate the HTML for the menu tree.  The link I pointed to shows how to do that.  Instead of a table of CDs in a collection, you'd make the menu links.  The bulk of the XSL would be just the HTML (XHTML actually).

So I'd suggest you:
1 duplicate that example
2 change the example data from CD collection to menu link data
3 Change the example XSL code to format for menu links
4 Add in the rest of the web page that isn't menu links

#3 is the hard step (not too hard).  #4 can be done incrementally.

In summary, these technologies are a broad set of tools.  If you want to start learning the tools, you have to have in mind what you might be trying to build.

Featured Post

Python: Series & Data Frames With Pandas

Learn the basics of Python’s pandas library of series & data frames and how we can use these tools for data manipulation.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsing the questions asked to the Experts of this forum, you will be amazed to see how many times people are headaching about monster regular expressions (regex) to select that specific part of some HTML or XML file they want to extract. The examp…
Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question