CSS/List based version of NAV_TABLE_COLUMN

[pico]

Hi

did you enable the frontend-rendering in your conf.inc.php ?

Code: Select all

$phpwcms["allow_ext_init"]    = 1;  //allow including of custom external scripts at frontend initialization
$phpwcms["allow_ext_render"]  = 1;  //allow including of custom external scripts at frontend rendering

[cyppher.nl]

Hi

did you enable the frontend-rendering in your conf.inc.php ?

Yup I did, the tag is working now.
However I'd like each menu-item (as seen in the leftmenu http://ctmweb.nl.server1.firstfind.nl/kidstop20.nl/ ) to have its own background and rollover image (a:hover) in CSS.
But the generated code is div-based instead of li / ul based...
(maybe i have controversial thoughts, but look at the top-menu on http://www.belegger.nl which I designed).

Thanks for help!

[cyppher.nl]

Hi All,

Have a look at this menu:


It's a CSS-based (div's) menu with css-rollovers (hover).
This menu should be implemented in the template as an output from the NAV_LIST_ALL replacement tag.

The actual CSS code is:

Code: Select all

.cssnav1, .cssnav2, .cssnav3, .cssnav4, .cssnav5, .cssnav6, .cssnav7, .cssnav8	{
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-repeat: no-repeat;
display: block;
margin: 0; 
margin-bottom:0px;
padding: 0; 
border: 0;
}
.cssnav1 {background-image: url(images/knop_hover_r1_c1.gif);}
.cssnav2 {background-image: url(images/knop_hover_r2_c1.gif);}
.cssnav3 {background-image: url(images/knop_hover_r3_c1.gif);}
.cssnav4 {background-image: url(images/knop_hover_r4_c1.gif);}
.cssnav5 {background-image: url(images/knop_hover_r5_c1.gif);}
.cssnav6 {background-image: url(images/knop_hover_r6_c1.gif);}
.cssnav7 {background-image: url(images/knop_hover_r7_c1.gif);}
.cssnav8 {background-image: url(images/knop_hover_r8_c1.gif);}



.cssnav1 a, .cssnav2 a, .cssnav3 a, .cssnav4 a, .cssnav5 a, .cssnav6 a, .cssnav7 a, .cssnav8 a  {
display:block;
font-size: 11px;
width: 140px;
height: 20px;
display: block;
float: none;
margin: 0;
padding: 0;
color: black; 
text-decoration: none; 
border: 0;
}

.cssnav1 img, .cssnav2 img, .cssnav3 img, .cssnav4 img, .cssnav5 img, .cssnav6 img, .cssnav7 img, .cssnav8 img {
width: 100%; 
height: 100%; 
border: 0px; 
}

* html a:hover {visibility:visible}

.cssnav1 a:hover img, .cssnav2 a:hover img, .cssnav3 a:hover img, .cssnav4 a:hover img, .cssnav5 a:hover img, .cssnav6 a:hover img, .cssnav7 a:hover img, .cssnav8 a:hover img {visibility:hidden}

.cssnav1 span, .cssnav2 span, .cssnav3 span, .cssnav4 span, .cssnav5 span, .cssnav6 span, .cssnav7 span, .cssnav8 span {	position:absolute;	left:5px;	top:3px;	margin:0;	cursor: pointer;}

and the HTML code, which I now copied in the template:

Code: Select all

<div id="menulok">
<div class="cssnav1"><a href="#"><img src="images/knop_r1_c1.gif" /></a></div>
<div class="cssnav2"><a href="index.php?inschrijven"><img src="images/knop_r2_c1.gif" /></a></div>
<div class="cssnav3"><a href="index.php?kimlian"><img src="images/knop_r3_c1.gif" /></a></div>
<div class="cssnav4"><a href="index.php?prijsvraag"><img src="images/knop_r4_c1.gif" /></a></div>
<div class="cssnav5"><a href="index.php?gasten"><img src="images/knop_r5_c1.gif" /></a></div>
<div class="cssnav6"><a href="index.php?agenda"><img src="images/knop_r6_c1.gif" /></a></div>
<div class="cssnav7"><a href="index.php?uitzendingen"><img src="images/knop_r7_c1.gif" /></a></div>
<div class="cssnav8"><a href="index.php?kleding"><img src="images/knop_r8_c1.gif" /></a></div>
</div>

I need some help with the correct use of the mentioned replacement tag. The output of the replacement tag is:

Code: Select all

<li class="MenuItem_lvl_1"><a href="index.php?inschrijven" title="Inschrijven">Inschrijven</a></li>
<li class="MenuItem_lvl_1"><a href="index.php?kimlian" title="Kim-Lian">Kim-Lian</a></li>
<li class="MenuItem_lvl_1"><a href="index.php?kleding" title="Kleding">Kleding</a></li>
<li class="MenuItem_lvl_1"><a href="index.php?prijsvraag" title="Prijsvraag">Prijsvraag</a></li>
<li class="MenuItem_lvl_1"><a href="index.php?gasten" title="Gasten">Gasten</a></li>
<li class="MenuItem_lvl_1"><a href="index.php?agenda" title="Agenda">Agenda</a></li>

Does anyone know how to moderate the genereted output to show the menu correctly?

Thanks a lot
http://ctmweb.nl.server1.firstfind.nl/kidstop20.nl/

[cyppher.nl]

... almost solved ...

(I'll post the solution soon, I've found a better approach to get the menu CSS based, even with less code and less images)

[lburgess17]

cyppher.nl,

You mentioned that when you first implemented the {NAV_LIST_ALL} tag the output was div based rather than li/ul based. I have the same problem.

My output looks as follows:

<div class="navList"><div class="MenuItem_lvl_2" id="activeSection"><a href="index.php?selection" title="Selection">Selection</a></div>
<div class="MenuItem_lvl_2"><a href="index.php?quality" title="Quality">Quality</a></div>
<div class="MenuItem_lvl_2"><a href="index.php?guarantee" title="Guarantee">Guarantee</a></div>
<div class="MenuItem_lvl_2"><a href="index.php?displays" title="Displays">Displays</a></div>
</div>

Did you resolve this issue? If so, could you post the solution?I really need my menu to be list-based rather than <div> based. thanks!
-lburgess17

[SaturdayBOY]

It seems that I'm the only one with my simple problem:

I have a horizontal navigation {NAV_LIST_TOP} und I want this {NAV_LIST_ALL} to be the vertical sub-navigation. But at the moment it's listing the whole site. So what can I do to let it just display the subcategories?

[pepe]

{NAV_LIST_ALL:integer}

where integer is the CAT-ID of the category, under which your navigation begins.


Better... take the following script instead of {NAV_LIST_ALL:integer}, and all will go whithout your "help"

Code: Select all

[PHP]

$check_id = $GLOBALS['content']['cat_id'];

while( $GLOBALS['content']['struct'][$check_id]['acat_struct'] <> 0 ) {
$check_id = $GLOBALS['content']['struct'][$check_id]['acat_struct'];
}

echo '{NAV_LIST_ALL:'.$check_id.'}';

[/PHP]

[SaturdayBOY]

Thank you very much for your fast support!

The rep-tag with integer didn't display the menue at all. I can't understand why ... I've done everything that is written in here -> --...--/index.php/topic,59.0.html.

I used your code and it worked (after I closed the PHP-tag) . Thanks very much.

Do you have an idea why the "cleaner" method with integer doesn't work?

After all there is one problem left: the "home"-button in the horizontal navigation {NAV_LIST_TOP} forces the submenue to display the entire site again. That sounds quite logic to me, but is there a way to prevent it to do so?

[SaturdayBOY]

Hello? It would be very nice if someone can answer my last question.

It seems that there aren't a lot cms-developer, who are focusing on getting rid of those tables.

[jscholtysik]

Hi SaturdayBoy,


there is only one developer for PHPWCMS: Oliver Georgi


Joachim

[SaturdayBOY]

Hi Joachim,

but there are more cms than PHPWCMS.

[tarheit]

I know this is an old thread, but I've found it to be some pretty useful code non the less. It cleans up the menu html code quite nicely. If it helps anyone the last version of the code that can simply be plugged into frontend_render is available here:
http://www.honeyrunapiaries.com/downloa ... ST_ALL.php
and instructions and sample css code:
http://www.honeyrunapiaries.com/downloa ... ST_ALL.txt

-Tim

[flip-flop]

Hi tarheit,

please zip this file. We can´t download.

Gruß Knut

[tarheit]

Oops. I neglected to take that into account. It's now zipped:
http://www.honeyrunapiaries.com/downloa ... ST_ALL.zip

-Tim

[flip-flop]

Hi tarheit,

yes it rocks.
It is the same you can find here: --...--/index.php/topic,59.0.html -- and many more.

Gruß Knut