This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > November 2006 > Navigation
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
|
| 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
| |
| Andy Dingley 2006-11-19, 7:35 pm |
|
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.
| |
| Spartanicus 2006-11-19, 7:35 pm |
| "EA" <NOSPAM@twelve.me.uk> wrote:
>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
| |
| Ben Bacarisse 2006-11-19, 7:35 pm |
| "EA" <NOSPAM@twelve.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.
| |
|
| > 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" <ben.usenet@bsb.me.uk> wrote in message
news:87u018y7xg.fsf@bsb.me.uk...
> "EA" <NOSPAM@twelve.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.
>
> 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.
>
>
> I think a reluctance to use server-side technology is largely
> responsible for keeping frames alive.
>
> --
> Ben.
| |
|
| 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" <dingbat@codesmiths.com> wrote in message
news:1163083068.976218.170750@m7g2000cwm.googlegroups.com...
>
> EA wrote:
>
>
> 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; [...] }
>
>
>
> Yes, you ought to do something smart(ish). It does get painful
> otherwise.
>
>
>
> 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.
>
>
>
> 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.
>
| |
|
|
| Ben Bacarisse 2006-11-19, 7:35 pm |
| "EA" <NOSPAM@twelve.me.uk> writes:
>
> 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".
>
> 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.
| |
| Andy Dingley 2006-11-19, 7:35 pm |
|
William Hughes wrote:
> I use a stand-alone file and IFRAME for my navigation.
That's as bad as frames.
| |
|
| 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" <ben.usenet@bsb.me.uk> wrote in message
news:874pt8kmeq.fsf@bsb.me.uk...
> "EA" <NOSPAM@twelve.me.uk> writes:
>
>
> 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".
>
>
> 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.
| |
| Warren Post 2006-11-19, 7:35 pm |
| 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
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|