 | |
Navigation
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Navigation -
11-09-2006
, 08:17 AM
#2
| ||||
| ||||
|
|
right in thinking that if you wish to have nested navigation structures then each individual page of the web site must have a different navigation structure on it? |
SSI, or some publication-time merge process (a trivial CMS, a Perl
script, or even just a DOS batch file) that embeds a shared "menu" file
inside each "page" file.
It's usually easiest to have a slightly different structure on each
page to make it look perfect (you probably only need to set
class="current" on the relevant menu item). There's a CSS technique
though where you don't even need to do that much. Set a page id on the
<body> element and then in the CSS you have a number of selectors that
match each possible combination, i.e.
ul.nav-menu li.current,
#page1 #nav-page1,
#page2 #nav-page2,
#page3 #nav-page3,
#page4 #nav-page4,
{ background-colour: taupe; [...] }
Quote:
|
When building the site this would be okay, but what about when the site is updated with additional web pages this would require a lot of work. |
otherwise.
Quote:
|
seems to me that when the navigation structure is changed every web page, because it contains it's own respective navigation coding, will need to be updated. |
the same block for all pages.
Yes, you need to manually update something. Then you need to replicate
that onto all the pages -- but you can make the machines do that for
you.
Quote:
|
If the navigation pages were inside a frame on the left hand side of the web pages, the navigation pages could all be kept in one place. However I thought the use of DIV was supposed to make the use of frames obsolete. |
frames to solve this particular menu problem, even when frames were a
whizzy new feature.
#3
| |||
| |||
|
|
When building the site this would be okay, but what about when the site is updated with additional web pages this would require a lot of work. It seems to me that when the navigation structure is changed every web page, because it contains it's own respective navigation coding, will need to be updated. Am I missing some clever trick? |
--
Spartanicus
#4
| |||
| |||
|
|
Depending on your requirements, it is possible to have the same navigation in all pages with different parts visible or hidden as a result of style changes in the page rather then the navigation, but even then this is probably not the most common solution. |
understand this.
Quote:
|
Alternatively (or, indeed, in addition), the navigation can be generated by some server side scripting or included via server side includes. |
this, because it appears what I will have to do - if I can understand how to
do it.
Many thanks for your efforts so far.
EA
"Ben Bacarisse" <ben.usenet (AT) bsb (DOT) me.uk> wrote
Quote:
|
"EA" <NOSPAM (AT) twelve (DOT) me.uk> writes: I am sure I must be missing something about building navigation bars with CSS. Yes it is a very clever and efficient way to format navigation structures on simple one navigation level webs, i.e. six buttons which when clicked go to a separate web page. But here is where I must be missing something, am I right in thinking that if you wish to have nested navigation structures then each individual page of the web site must have a different navigation structure on it? Level 1 Level 1.1 Level 1.2 Level 2 Level 2.1 Level 2.1.1 Level 2.1.2 Level 2.2 Level 2.3 Level 2.3.1 Level 3 Level 4 When building the site this would be okay, but what about when the site is updated with additional web pages this would require a lot of work. It seems to me that when the navigation structure is changed every web page, because it contains it's own respective navigation coding, will need to be updated. Am I missing some clever trick? Depending on your requirements, it is possible to have the same navigation in all pages with different parts visible or hidden as a result of style changes in the page rather then the navigation, but even then this is probably not the most common solution. The are several techniques that can simplify the process. You can build the site with an off-line tool that generates the appropriate navigation for each page. I use a pile of M4 macros for some sites, and I hear that XML transformation tools are popular for this purpose. Alternatively (or, indeed, in addition), the navigation can be generated by some server side scripting or included via server side includes. If the navigation pages were inside a frame on the left hand side of the web pages, the navigation pages could all be kept in one place. However I thought the use of DIV was supposed to make the use of frames obsolete. I think a reluctance to use server-side technology is largely responsible for keeping frames alive. -- Ben. |
#5
| |||
| |||
|
|
EA wrote: right in thinking that if you wish to have nested navigation structures then each individual page of the web site must have a different navigation structure on it? You can do this quite easily. Use either a server-side technique like SSI, or some publication-time merge process (a trivial CMS, a Perl script, or even just a DOS batch file) that embeds a shared "menu" file inside each "page" file. It's usually easiest to have a slightly different structure on each page to make it look perfect (you probably only need to set class="current" on the relevant menu item). There's a CSS technique though where you don't even need to do that much. Set a page id on the body> element and then in the CSS you have a number of selectors that match each possible combination, i.e. ul.nav-menu li.current, #page1 #nav-page1, #page2 #nav-page2, #page3 #nav-page3, #page4 #nav-page4, { background-colour: taupe; [...] } When building the site this would be okay, but what about when the site is updated with additional web pages this would require a lot of work. Yes, you ought to do something smart(ish). It does get painful otherwise. seems to me that when the navigation structure is changed every web page, because it contains it's own respective navigation coding, will need to be updated. Ditch the "respective navigation coding" Do it right and you can use the same block for all pages. Yes, you need to manually update something. Then you need to replicate that onto all the pages -- but you can make the machines do that for you. If the navigation pages were inside a frame on the left hand side of the web pages, the navigation pages could all be kept in one place. However I thought the use of DIV was supposed to make the use of frames obsolete. This has little to do with HTML 4+, CSS or <div> You didn't need frames to solve this particular menu problem, even when frames were a whizzy new feature. |
#6
| |||
| |||
|
|
Again do you have any samples I could look at to try to better understand this, because it appears what I will have to do - if I can understand how to do it. |
http://home.grandecom.net/~cvproj/carrier.htm
--
Support Project Valour-IT: http://soldiersangels.org/valour/index.html
#7
| |||
| |||
|
|
I use a stand-alone file and IFRAME for my navigation. |
#8
| |||
| |||
|
|
"EA" <NOSPAM (AT) twelve (DOT) me.uk> writes: Depending on your requirements, it is possible to have the same navigation in all pages with different parts visible or hidden as a result of style changes in the page rather then the navigation, but even then this is probably not the most common solution. Do you have any examples...or any references I could check to try to understand this. Crude example. If every page has the following: #v+ ul li><a href="sec1.html">Section 1</a ul class="sec1" li><a href="sec1.1.html">Sec 1, subsec 1</a></li li><a href="sec1.2.html">Sec 1, subsec 2</a></li li><a href="sec1.3.html">Sec 1, subsec 3</a></li /ul></li li><a href="sec2.html">Section 2</a ul class="sec2" li><a href="sec2.1.html">Sec 2, subsec 1</a></li li><a href="sec2.2.html">Sec 2, subsec 2</a></li li><a href="sec2.3.html">Sec 2, subsec 3</a></li /ul></li li><a href="sec3.html">Section 3</a ul class="sec3" li><a href="sec3.1.html">Sec 3, subsec 1</a></li li><a href="sec3.2.html">Sec 3, subsec 2</a></li li><a href="sec3.3.html">Sec 3, subsec 3</a></li /ul></li /ul #v- you only need the index page to have the CSS: ul ul { display: none; } and all the nested menus will not be shown (to CSS enabled browsers). The sec1.html would have exactly the same navigation text but it would include the rule: ul.sec1 { display: block; } and the "Section 1" sub menu will be available in this page. All pages in section one would have this CSS rule. Generalise to the other sections and style the lists to your preferred menu "look". Alternatively (or, indeed, in addition), the navigation can be generated by some server side scripting or included via server side includes. Again do you have any samples I could look at to try to better understand this, because it appears what I will have to do - if I can understand how to do it. If SSI is available in your server, you can include common navigation by putting: !--#include virtual="nav.html"-- in the page where you want it. You will probably need to read your server docs to get all of this to work since there are settings to control what files will be scanned for SSI directives. -- Ben. |
#9
| |||
| |||
|
|
When building the site this would be okay, but what about when the site is updated with additional web pages this would require a lot of work. It seems to me that when the navigation structure is changed every web page, because it contains it's own respective navigation coding, will need to be updated. Am I missing some clever trick? |
a global search-and-replace. What I have settled on is a preprocessor,
which allows you to have your navigation (and all recurring code)
in one place, making for easy modification later. There are several; my
pick is Webmake: <http://webmake.taint.org/>, I think. Once you get handy
with a preprocessor you will find that all kinds of web maintenance
becomes easier.
--
Warren Post
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.