new dhtmlmenu RT

Paal · Post by **Paal** » Wed 11. Jan 2006, 15:44

StudioZ wrote:Nice DHTML Menu Rick

Simple test here (Nav):
http://www.aetmis.gouv.qc.ca/sitedevelo ... 56,0,0,1,0

Hello StudioZ,

How to make the

Page(s)
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

function?

With {LISTPAGES} RT?

I try this, but does'nt work

Thx, Paul

Stim · Post by **Stim** » Fri 20. Jan 2006, 07:42

What is the different between this menu and?

http://www.phpwcms.de/forum/viewtopic.p ... vel+layout

I also wonder if there is possible to choose category to display in menu?

Post by **flip-flop** » Fri 20. Jan 2006, 09:02

Hi Stim,

this menu dosn´t use JS.

Gruß Knut

Paal · Post by **Paal** » Fri 20. Jan 2006, 09:30

flip-flop wrote:Hi Stim,

this menu dosn´t use JS.

Gruß Knut

Use, but only for IE (because IE :hover pseudo-class bug).

View the source...

{NAV_MENUBAR} Dropdown menubar (the menu contain js):

Code: Select all

<div class="menuBar">
<a class="menuButton"  title="Återgå till huvudsidan"  href="http://www.ikfrej.se/" tabIndex="1">Förstasidan</a>
<a class="menuButton"  title="Information om idrottsklubben Frej" href="" tabIndex="2" onclick="return F(event, 'menu_2');" onfocus="G(event, 'menu_2');" onmouseover="G(event, 'menu_2');">Klubben</a>
<a class="menuButton"  title="IK Frejs sektioner" href="" tabIndex="3" onclick="return F(event, 'menu_1');" onfocus="G(event, 'menu_1');" onmouseover="G(event, 'menu_1');">Sektioner</a>
<a class="menuButton"  title="Övrigt" href="" tabIndex="4" onclick="return F(event, 'menu_12');" onfocus="G(event, 'menu_12');" onmouseover="G(event, 'menu_12');">Övrigt</a>

<a class="menuButton"  title="IK Frejs sponsorer" href="" tabIndex="5" onclick="return F(event, 'menu_3');" onfocus="G(event, 'menu_3');" onmouseover="G(event, 'menu_3');">Partners</a>
</div>

{DHTMLMENU:Start Level, Inactive Classname, Active Classname}: (the menu doesn't contain js):

Code: Select all

<div id="leftMenu">
<ul>
  <li><a href="#" class="submenu">Menu 1</a>
    <ul>
      <li><a href="#">Menu 1,1</a></li>
      <li><a href="#" class="submenu">Menu 1,2</a>
        <ul>
          <li><a href="#">Menu 1,2,1</a></li>
          <li><a href="#">Menu 1,2,2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>
</div>

The {DHTMLMENU} not real DHTML menu, only the name is that...

Paul

Ps.: I hacked the original RT. Sign for submenu (if menu has submenu): ... class="submenu" ...

Paal · Post by **Paal** » Fri 20. Jan 2006, 09:59

rtilghman wrote:This is the working RT code. Copy this to a file in "phpwcms_template\inc_script\frontend_render" with a proper name to use it.

I use this function, for submenu:

Code: Select all

<?php

function build_dhtmlmenu2($start=0, $class='', $activeclass='', $counter=0) {
// **************************************************************************
// Paul: nice HTML source format, from class='classname' to class="classname"

   $class="class="".$class.""";
   $classactive="class="".$activeclass.""";

// Paul: nice HTML source format END   
// **************************************************************************

   $s = '';
   $g = '';
   
// **************************************************************************
// Paul: for submenu   

   $thfs = $GLOBALS["content"]["struct"];
   foreach($thfs as $key => $value)
   {
           $x = &$GLOBALS["content"]["struct"][$value["acat_struct"]];
           if($value["acat_struct"] != 0)
                   $x["acat_has_children"] = 1;
           else
                   $x["acat_has_children"] = 0;
   }

// Paul: for submenu END
// **************************************************************************

   foreach($GLOBALS['content']['struct'] as $key => $value) {

     if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] &&
         !$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key)
      {
       $s .= '<li';
         if($key == $GLOBALS['aktion'][0] && $activeclass) $s .= ' '.$classactive;
         $s .= '>';

         if(!$GLOBALS['content']['struct'][$key]["acat_redirect"]) {
            $s .= '<a href="index.php?';
            if($GLOBALS['content']['struct'][$key]['acat_alias']) {
               $s .= $GLOBALS['content']['struct'][$key]['acat_alias'];
            } else {
               $s .= 'id='.$key.',0,0,1,0,0';
            }

// **************************************************************************
// Paul: change and add   
       
                 $s .= '"';
                 if($GLOBALS['content']['struct'][$key]['acat_has_children'])
                         $s .= ' class="submenu"';
                 $s .= '>';

// Paul: change and add END
// **************************************************************************

         } else {
            $redirect = get_redirect_link($GLOBALS['content']['struct'][$key]["acat_redirect"], ' ', '');
            $s .= '<a href="'.$redirect['link'].'"'.$redirect['target'].'>';
         }

         $s .= html_specialchars($GLOBALS['content']['struct'][$key]['acat_name']);
         $s .= '</a>';

         $s .= build_dhtmlmenu2($key, $class, $activeclass,$counter+1);

         $s .= "</li>\n";
      }
   }
   if($s) {
      $g  = "\n<ul";
      if(!$counter && $class) $g .= ' '.$class;
      $g .= ">\n".$s.'</ul>';
   }
   return $g;
}

// parse the whole webpage $content["all"] is the fully rendered webpage your site displays
$content["all"] = (myTagParser ($content["all"]));
// parse the $string and replace all possible instances of the following {RT}'s
function myTagParser($string) {
   $search[0] = '/\{DHTMLMENU:(.*?),(.*?),(.*?)\}/e';
   $replace[0] = 'build_dhtmlmenu2("$1","$2","$3");';
   $string = preg_replace($search, $replace, $string);
   $string = str_replace('\'', '\'',$string);
   $string = str_replace('&quot;', '"',$string);
   return $string;   // spit out the final webpage for display
}

?>

Add to CSS:

Code: Select all

#primaryNav ul ul li a.submenu {
   background-image: url(../../picture/arrowWhite.gif);
   background-repeat: no-repeat;
   background-position: 100% .4em;
   padding-right: .6em;
}

The source:
Original:

Code: Select all

<div id='primaryNav'>
<ul class='itemOff'>
  <li><a href="#">Menu 1</a>
    <ul>
      <li class='itemOn'><a href="#">Menu 1,1</a></li>
      <li><a href="#">Menu 1,2</a>
        <ul>
          <li><a href="#">Menu 1,2,1</a></li>
          <li><a href="#">Menu 1,2,2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>
</div>

The new:

Code: Select all

<div id="primaryNav">
<ul class="itemOff">
  <li><a href="#" class="submenu">Menu 1</a>
    <ul>
      <li class="itemOn"><a href="#">Menu 1,1</a></li>
      <li><a href="#" class="submenu">Menu 1,2</a>
        <ul>
          <li><a href="#">Menu 1,2,1</a></li>
          <li><a href="#">Menu 1,2,2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>
</div>

The result (UPDATED!):

Selected menuitem: Menu2,3
Menu has children/submenu: Menu2,2 (+ hover)

Demo link: http://www.fishmania.hu/demo.html

Paul

Kosse · Post by **Kosse** » Fri 20. Jan 2006, 13:02

Very nice paal!

Congrats

Cheers

StudioZ · Post by **StudioZ** » Fri 20. Jan 2006, 14:23

@ Pall :
Thanks for your hacks.

Would you have a demo URL you could post here so I can check if it is now working OK in Safari under OS X 10.2.8 ?

Cheers,

Paal · Post by **Paal** » Mon 23. Jan 2006, 14:02

StudioZ wrote:@ Pall :
Thanks for your hacks.
Would you have a demo URL you could post here so I can check if it is now working OK in Safari under OS X 10.2.8 ?

Cheers,

Hello StudioZ,

Ok, check this URL:
http://www.fishmania.hu/demo.html (sorry, only static html)

Selected menulevel: Menu2/Menu2,3
Submenu: Menu2/Menu2,2

Js code included in EOF frontend.js and css code in dropdown1.css (demo.css == original.frontend.css).

but don't forget, required <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> doctype. Default phpwcms install use it.

Paul

Ps.: and work it in Safari under OS X 10.2.8?

StudioZ · Post by **StudioZ** » Mon 23. Jan 2006, 16:39

@ Paal

He He Thanks so much.
Confirmed. Working OK in Safari under OS X 10.2.8

I will bookmark your demo (http://www.fishmania.hu/demo.html)

Thanks again Paal

Cheers,

StudioZ · Post by **StudioZ** » Fri 27. Jan 2006, 02:13

oups

I was wrong... there's still a tweak to be done in the CSS
to make it behave as expected in Safari under OS X 10.2.8
Just can't figure this one out...

Here's my screen shots:

and:

Cheers,

mochito · Post by **mochito** » Wed 1. Feb 2006, 01:47

Hi there,

this menu looks very good.

Two questions.

- I wanna use the "Graphical Text Mod" on Level 1 in the menu.
How is that possible?

- menu looks like:

cat1 cat2 cat 3

how can i realize the following:
cat1 | cat2 | cat3

cu, juergen

Paal · Post by **Paal** » Wed 1. Feb 2006, 10:01

mochito wrote:Hi there,

this menu looks very good.

Two questions.

- I wanna use the "Graphical Text Mod" on Level 1 in the menu.
How is that possible?

In my opinion: only with CSS (I tried in RT but not work

).

Check the source of this page:
http://www.eon-is.hu/index.php?lang,hu

1st level use graphical background.
Try and use the css and js code as you like it...

Based on: http://users.hszk.bme.hu/~hj130/css/lis ... ex_fomenu/ (sorry, only hungarian language), but the css and pictures are international

) <- but this is BETTER SOLUTION (the span tag use bg image).

The theory:
* Revised Image Replacement
* In Defense of Fahrner Image Replacement
* Using Background-Image to Replace Text
* Facts and Opinion About Fahrner Image Replacement
* Accessible Header Images With CSS And XHTML

mochito wrote: - menu looks like:

cat1 cat2 cat 3

how can i realize the following:
cat1 | cat2 | cat3

cu, juergen

CSS again, try this (again hungarian lang only

):
http://users.hszk.bme.hu/~hj130/css/lis ... zto_vonal/

Paul

Ps.: all description use step-by-step code!
Ps.2: if you give full details, I try to help for you...

JamesBradley · Post by **JamesBradley** » Thu 23. Feb 2006, 10:58

Hi, this looks great but I cant seem to get it working.

I ahev created a new PHP file under the directory like you said (does it matter what its called?)

I have added the CSS, but where do I add the JS?

see http://www.veloxsystems.net (towards the bottom for the results I get from a {DHTMLMENU:0,primarynav,primarynav} tag.

Any help at all would be brilliant.

Thanks for your time.

James

ssyfrig · Post by **ssyfrig** » Thu 23. Feb 2006, 11:04

Hi

add this in your template....

html head:

Code: Select all

<script src="phpwcms_template/inc_js/MENU_SWAP_FIX.js" type="text/javascript"></script>

Greez Sven

JamesBradley · Post by **JamesBradley** » Thu 23. Feb 2006, 11:13

brilliant, thats that sorted. How do I go about centering the menu structure on the page?

Cheers

new dhtmlmenu RT

Re: new dhtmlmenu RT