Icon-Menu coding - Question/Frage: Rollover/Active-Categorie

[m2.ag]

Hi all, (deutsche Version siehe unten)

I am working on a blog page for a friend, a writer and author.

link: http://www.percordia.com

Icon Menu and Cat.-Status:
She asked me to use as a main menu three different icons with rollover status. That is easy.

But: How can I make an icon menu on this site including an ACTIVE-page-status?
Means:
1. When on main page, none of the icons will be active (current site).
2. When on one of the sub-chapters/categories, the categ.-related icon will stay active.

Currently I just added this menu with roll-over-functionality on the site. It works but isn't fulfilling the wanted feature.

And I don't know how to integrate this menu-function showing an active icon when on a chapter/category.

Maybe someone has an idea for a solution or already has managed to solve a question like this?

Maybe there is a solution by using CSS, or might Javascript or something else be better? (...I am more a designer than a coder, can only write code in CSS and HTML, not javascript or something more)


Thanx four your ideas and help! :-)

Matthias

--

Hi,

Ich arbeite grade an einem Blog für eine Freundin, sie ist Autorin.
Link: http://www.percordia.com

Sie bat mich bei ihrem Blog als Haupt-Menü 3 unterschiedliche Icons zu nutzen, alle auch mit Rollover-Status. Das ist einfach.

Aber: Wie mache ich es, dass bei gewählter Kategorie/Kapitel der AKTIVE-Icon-Status bestehen bleibt?

Also so:
1. Hauptseite: Keines der Icons ist aktiv. Rollovers funktionieren, aber mehr auch nicht. So ist es jetzt
2. Unterseite/Kapitel-Kategorie: Das betreffende Icon soll aktiv bleiben.

Ich habe dieses Icon-Menü bereits integriert, aber ich weiß nicht, wie ich das löse, dass das betreffende Icon aktiv bleibt, wenn ich den Icon-Menü-Punkt einmal angewählt habe.

Hat vielleicht jemand eine Idee oder nen Tipp oder hat solche eine Funktion bereits mal bei sich im Blog eingebaut?

Geht das per CSS oder brauche ich JavaScript oder so?
(bin eher Designer und kenne mich mit CSS und HTML aus, Javascript oder so ist nicht so meine Stärke)


Danke für eure Hilfe und Ideen!

Matthias :-)

[garvinhicking]

Hi!

I suppose you will need to check the various s9y smarty variables for that: {$staticpage_pagetitle}, {$view} etc. Those should be documented mostly here:

http://www.s9y.org/102.html

HTH,
Garvin

[m2.ag]

Hi Garvin,

thank you, I hoped in maybe finding an easier way. That's a bit too high for my own coding potential :-(

Is there no theme or solution already using this icon-menu?


Thanks though :-)
Matthias

Hi!

I suppose you will need to check the various s9y smarty variables for that: {$staticpage_pagetitle}, {$view} etc. Those should be documented mostly here:

http://www.s9y.org/102.html

HTH,
Garvin

[Don Chambers]

Take a look at bulletproof.... we are doing something there that might be similar to what you want. For our navigation bar items, we apply a specific class when the navigation link value exactly matches the page the visitor is viewing.

For example, if this is your navigation item for a particular category:
http://www.percordia.com/index_1.php?/c ... 14-Wirkung

And that is the page the visitor is viewing, then we set a class named "currentpage" for that particular link.

You will see this in bulletproof's config.inc.php file:

Code: Select all

$serendipity['smarty']->assign(array('currpage'=> "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']));

And this in the index.tpl file:

Code: Select all

<li class="{if $currpage==$navlink.href}currentpage{/if}">

There are several more {if} conditions in bulletproof, but the above is the relevant one for this conversation. If no class was to be set at all except for the current page condition, it would be better to format it this way:

Code: Select all

<li{if $currpage==$navlink.href} class="currentpage"{/if}>

The value of $navlink.href is where we have stored the URL link for that particular nav item..... In our example for you, that would be
'http://www.percordia.com/index_1.php?/c ... 14-Wirkung'

Then your css can style .currentpage to include a different background image, or you could use the same smarty logic to change the foreground image if you prefer.

Keep in mind, this was only designed to deal with the category view.... if you had 20 entries for the category, and navigated to a specific entry in that category, this technique would not apply the currentpage class because the URL of the specific entry does not match the category link URL.

[m2.ag]

Hi Don,

thank you for your answer. I will see if I can modify the bulletproof-theme this way. Seems to be first helping step for me :-)
Will keep this thread updated here on my working results.

Thanx!
Matthias

Take a look at bulletproof.... we are doing something there that might be similar to what you want. For our navigation bar items, we apply a specific class when the navigation link value exactly matches the page the visitor is viewing.

For example, if this is your navigation item for a particular category:
http://www.percordia.com/index_1.php?/c ... 14-Wirkung

And that is the page the visitor is viewing, then we set a class named "currentpage" for that particular link.

You will see this in bulletproof's config.inc.php file:

Code: Select all

$serendipity['smarty']->assign(array('currpage'=> "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']));

And this in the index.tpl file:

Code: Select all

<li class="{if $currpage==$navlink.href}currentpage{/if}">

There are several more {if} conditions in bulletproof, but the above is the relevant one for this conversation. If no class was to be set at all except for the current page condition, it would be better to format it this way:

Code: Select all

<li{if $currpage==$navlink.href} class="currentpage"{/if}>

Then your css can style .currentpage to include a different background image, or you could use the same smarty logic to change the foreground image if you prefer.

Keep in mind, this was only designed to deal with the category view.... if you had 20 entries for the category, and navigated to a specific entry in that category, this technique would not apply the currentpage class because the URL of the specific entry does not match the category link URL.

[m2.ag]

Actually I postponed the solving of the problem, since my friend the author I made this special theme for seems to be content without the solved question.

(So for now I am working on something else first: I will have to find a solution for a blog with 3 "sidebars" or 2 separate "entry-columns".
But well... that's worth another subject later here)

Thanx for your help on the icon menu question. Should anyone once have an already finalized icon-menu-solution, please let me know!


Matthias

Hi Don,

thank you for your answer. I will see if I can modify the bulletproof-theme this way. Seems to be first helping step for me :-)
Will keep this thread updated here on my working results.

Thanx!
Matthias

Take a look at bulletproof.... we are doing something there that might be similar to what you want. For our navigation bar items, we apply a specific class when the navigation link value exactly matches the page the visitor is viewing.

For example, if this is your navigation item for a particular category:
http://www.percordia.com/index_1.php?/c ... 14-Wirkung

And that is the page the visitor is viewing, then we set a class named "currentpage" for that particular link.

You will see this in bulletproof's config.inc.php file:

Code: Select all

$serendipity['smarty']->assign(array('currpage'=> "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']));

And this in the index.tpl file:

Code: Select all

<li class="{if $currpage==$navlink.href}currentpage{/if}">

There are several more {if} conditions in bulletproof, but the above is the relevant one for this conversation. If no class was to be set at all except for the current page condition, it would be better to format it this way:

Code: Select all

<li{if $currpage==$navlink.href} class="currentpage"{/if}>

Then your css can style .currentpage to include a different background image, or you could use the same smarty logic to change the foreground image if you prefer.

Keep in mind, this was only designed to deal with the category view.... if you had 20 entries for the category, and navigated to a specific entry in that category, this technique would not apply the currentpage class because the URL of the specific entry does not match the category link URL.