By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,179 Members | 2,175 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,179 IT Pros & Developers. It's quick & easy.

Navigation

P: n/a
EA
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?

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.

EA
Nov 9 '06 #1
Share this Question
Share on Google+
10 Replies


P: n/a

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
<bodyelement 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.

Nov 9 '06 #2

P: n/a
"EA" <NO****@twelve.me.ukwrote:
>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?
Take your pick: Server Side Inclusion, preprocessor, advanced S&R.

--
Spartanicus
Nov 9 '06 #3

P: n/a
"EA" <NO****@twelve.me.ukwrites:
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.
Nov 9 '06 #4

P: n/a
EA
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.
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.

Many thanks for your efforts so far.

EA

"Ben Bacarisse" <be********@bsb.me.ukwrote in message
news:87************@bsb.me.uk...
"EA" <NO****@twelve.me.ukwrites:
>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.

Nov 9 '06 #5

P: n/a
EA
If I embed a common shared menu, and I am by no mean sure how to do that
yet, how do I cope with the hiding and unhiding of the respective parts of
the navigation menu depending on what is clicked. On what I have so far it
works by me producing lots of menu pages and then displaying them when
clicked.

Are you suggesting I could have one page that hides and unhides relevant
child elements of itself depending on when the mouse pointer is?

Quite what you are intending to show me with the class="current" is beyond
my comprehension. Do you have any references which might assist me.

I really would like to build this web site properly from the start and
understand that navigation is the key to this.

I appreciate any assistance anyone can offer.

Many thanks,

EA
"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11**********************@m7g2000cwm.googlegro ups.com...
>
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
<bodyelement 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.

Nov 9 '06 #6

P: n/a
On Thu, 9 Nov 2006 19:22:31 -0000, in
comp.infosystems.www.authoring.stylesheets "EA" <NO****@twelve.me.uk>
wrote:
>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.
I use a stand-alone file and IFRAME for my navigation.

http://home.grandecom.net/~cvproj/carrier.htm

--
Support Project Valour-IT: http://soldiersangels.org/valour/index.html
Nov 10 '06 #7

P: n/a
"EA" <NO****@twelve.me.ukwrites:
>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.
Nov 10 '06 #8

P: n/a

William Hughes wrote:
I use a stand-alone file and IFRAME for my navigation.
That's as bad as frames.

Nov 10 '06 #9

P: n/a
EA
A very big thank you to everyone who offered advice (especially Andy and
Ben).... I now have a navigation structure I am moving forward with that is
centrally administered.

Many thanks for your help and advice... I am sure I will return [smile]

EA
"Ben Bacarisse" <be********@bsb.me.ukwrote in message
news:87************@bsb.me.uk...
"EA" <NO****@twelve.me.ukwrites:
>>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.

Nov 11 '06 #10

P: n/a
El Thu, 09 Nov 2006 13:17:53 +0000, EA escribió:
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?
As others have pointed out, your options are SSI, a preprocessor, or doing
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

Nov 11 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.