NAV_LIST_UL >= V1.30

[flip-flop]

>= V1.30
Some more information about NAV_LIST_UL...
(For phpwcms v1.27-1.29 please see: http://www.phpwcms.de/forum/viewtopic.php?p=74552#74552)

- Vertical navigation
- Horizontal one row navigation
- Combination of horiz. & vert. navigation
-------------------------------------------------

Hi folks,

here I show you a little css snippet for substitution the old nav_table_column with the new NAV_LIST_UL.

(The basic stuff of this tag: Have a look: http://www.phpwcms.de/forum/viewtopic.php?t=12165)

It isn´t the smalles variation, but I think a simple one.

If you want, please create your own images for
normal state: /image/article/navi1_norm.gif
hover state: /image/article/navi1_hov.gif
active state: /image/article/navi1_act.gif
active state: /image/article/navi1_act_hov.gif
hover state: /image/article/navi1_sub_true.gif
(At my example I uses leading arrow images 15x15px navi1_gif.zip).

At the conf.inc.php you can switch off the IE_htc_hover. We don´t need it for this menu.

Code: Select all

$phpwcms['IE_htc_hover']      = 0; // enables HTC Hover for IE < 7 - has no effect in other browsers

An horizontal menu only for one level:
-------------------------------------------------
<div class="nlu_horiz1">{NAV_LIST_UL:F,ID,1,act_path,active}</div>


Please see the CSS snippet at the end.

The vertical navigation
-------------------------------------------------
The left one: <div class="nlu_navi1">{NAV_LIST_UL:F,ID,,act_path,active}</div>
The right one: <div class="nlu_navi1">{NAV_LIST_UL:,ID,,act_path,active}</div>



Output for the left side "F" variation:

Code: Select all

<div class="nlu_navi1">
<ul class="act_path">
	<li class="sub_no"><a href="index.php?home">Home</a></li>
	<li class="sub_no sub_ul_true"><a href="index.php?ebene01">Ebene01</a></li>
	<li class="sub_ul act_path"><a href="index.php?ebene02">Ebene02</a>
	<ul class="act_path">
		<li class="sub_ul act_path"><a href="index.php?ebene02_01">Ebene02_01</a>
		<ul class="act_path">
			<li class="sub_no act_path active"><a href="index.php?ebene02_01_01">Ebene02_01_01</a></li>
		</ul>
		</li>
		<li class="sub_no"><a href="index.php?ebene02_02">Ebene02_02</a></li>
	</ul>
	</li>
	<li class="sub_no sub_ul_true"><a href="index.php?ebene03">Ebene03</a></li>
	<li class="sub_no sub_ul_true"><a href="index.php?ebene04">Ebene04</a></li>
	<li class="sub_no"><a href="index.php?ebene05">Ebene05</a></li>
</ul>
</div>

CSS snippet vertical menu: Please create a file e.g. named /template/inc_css/nlu_navi1.css -> CSS-download -> CSS-zip-download
In your template please include at css file: the file nlu_navi1.css (Multiple selection = <strg>-"left mouse button")

Code: Select all

/* ======================================================================
   >= V1.30   CSS for an vertical menu
   <div class="nlu_navi1">{ NAV_LIST_UL:F,0,,act_path,active }</div>
   Level 0 - 3; 
   26.03.07 flip-flop (KH)
   
========================================================================= */
   
.nlu_navi1 {
   margin: 0;
   padding: 0;
   border: 0;
   text-decoration: none;
   /* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
   font: normal normal 11px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
   width: 200px;  /* ++ Width of Menu Items // Breite der Navigation*/
/*   float:left; */
}

.nlu_navi1 em { font-style: normal; }

.nlu_navi1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
   width: 200px;  /* ++ Width of Menu Items // Breite der Navigation */
}

.nlu_navi1 ul li { position: relative; }


/* ==== Styles for Menu Items =================================== */

/* ==== LEVEL X ================================================= */

/* ====  simple link <a> // einfacher Link <a> ==== */
.nlu_navi1 ul li a,
.nlu_navi1 ul li a:link, 
.nlu_navi1 ul li a:visited,
.nlu_navi1 ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: #FFFFFF;           /* ++ Text color // Textfarbe */
   
   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;

   /* ++ Text adjust e.g. upper gap and left gap 25px */
   /* ++ Text justieren 1px oben und 25px von links */
   padding: 1px 0 0 25px; 

   /* ++ bottom line if you want */
   /* ++ Untere Linie wenn gewuenscht */ 
   border-bottom: 1px solid #ccc; /* IE6 Bug */

   /* ++ Den "white-space" Fehler im IE7 vermeiden */
   /* ++ Killing the "white-space" bug in IE7 */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 175px;  /* = (Width of Menu Items) - (padding-right + padding-left) */ 
}

/* ====  Aktiv, wenn ein Sublevel vorhanden ist // active point if there is a sub_level ==== */
.nlu_navi1 ul li.sub_ul_true a,
.nlu_navi1 ul li.sub_ul_true a:link,
.nlu_navi1 ul li.sub_ul_true a:visited,
.nlu_navi1 ul li.sub_ul_true a:active {
   color: White;
   font-weight: normal;
   background: #839AAF url(../../img/article/navi1_sub_true.gif) 10px 1px no-repeat;
}

/* ====  Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
.nlu_navi1 ul li.act_path a,
.nlu_navi1 ul li.act_path a:link,
.nlu_navi1 ul li.act_path a:visited,
.nlu_navi1 ul li.act_path a:active {
   color: White;
   font-weight: bold;
   background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}

/* ====  Elternebene, wenn der Schalter gesetzt // Parent, if switch is set ==== */
.nlu_navi1 ul li.sub_parent a,
.nlu_navi1 ul li.sub_parent a:link,
.nlu_navi1 ul li.sub_parent a:visited,
.nlu_navi1 ul li.sub_parent a:active {
   color: White;
   font-weight: normal;
   background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
}

/* ====  active link <a> // aktiver Link <a> ==== */
.nlu_navi1 ul li.active a,
.nlu_navi1 ul li.active a:link,
.nlu_navi1 ul li.active a:visited,
.nlu_navi1 ul li.active a:active {
   color: White;
   font-weight: bold;
   background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}

/* ====  hover: Maus über Link <a> // hover link <a> ==== */
.nlu_navi1 ul li a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1 ul li.sub_no a:hover {
   color: White;
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1 ul li.sub_ul a:hover {
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
}
/* ====  hover: Wenn Sublevel vorhanden <a> // hover: "if there is a sub_level" <a> ==== */
.nlu_navi1 ul li.sub_ul_true a:hover {
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}

/* ====  hover: Wenn Parent Link <a> // hover: "Only for the parent link" <a> ==== */
.nlu_navi1 ul li.sub_parent a:hover {
   background: #597B8F url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}

/* ====  hover: Der aktive Link <a> // hover: "Only for the active link" <a> ==== */
.nlu_navi1 ul li.active a:hover {
   background: #597B8F url(../../img/article/navi1_act_hov.gif) 10px 1px no-repeat;
}


/* ==== LEVEL X+1 =============================================== */

.nlu_navi1 ul ul li.sub_no a,
.nlu_navi1 ul ul li.sub_no a:link, 
.nlu_navi1 ul ul li.sub_no a:visited,
.nlu_navi1 ul ul li.sub_no a:active, 
.nlu_navi1 ul ul li.sub_ul a,
.nlu_navi1 ul ul li.sub_ul a:link, 
.nlu_navi1 ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul li.sub_ul a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #FFFFFF;
   background: #8E9FAF url(../../img/article/navi1_norm.gif) 25px 1px no-repeat;
   padding: 1px 0 0 40px;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 160px;  /* = (Width of Menu Items) - (padding-right + left) */ 
}

/* state for the active point if there is a sub_level */
.nlu_navi1 ul ul li.sub_ul_true a,
.nlu_navi1 ul ul li.sub_ul_true a:link,
.nlu_navi1 ul ul li.sub_ul_true a:visited,
.nlu_navi1 ul ul li.sub_ul_true a:active {
   color: White;
   font-weight: normal;
   background: #839AAF url(../../img/article/navi1_sub_true.gif) 25px 1px no-repeat;
}

/* state for the active path (link tracing) */
.nlu_navi1 ul ul li.act_path a,
.nlu_navi1 ul ul li.act_path a:link,
.nlu_navi1 ul ul li.act_path a:visited,
.nlu_navi1 ul ul li.act_path a:active {
   color: White;
   font-weight: bold;
   background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}


/* state for the active link */
.nlu_navi1 ul ul li.active a,
.nlu_navi1 ul ul li.active a:link,
.nlu_navi1 ul ul li.active a:visited,
.nlu_navi1 ul ul li.active a:active {
   color: White;
   font-weight: bold;
   background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}


.nlu_navi1 ul ul li a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li.sub_no a:hover {
   color: White;
   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li.sub_ul a:hover {
   background: #6B828F url(../../img/article/navi1_act_hov.gif) 25px 1px no-repeat;
}
/* Only for "if there is a sub_level" */
.nlu_navi1 ul ul li.sub_ul_true a:hover {
   background: #6B828F url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}

/* Only for the active link */
.nlu_navi1 ul ul li.active a:hover {
   background: #6B828F url(../../img/article/navi1_act_hov.gif) 25px 1px no-repeat;
}

   
/* ==== LEVEL X+2 =============================================== */

.nlu_navi1 ul ul ul li.sub_no a,
.nlu_navi1 ul ul ul li.sub_no a:link, 
.nlu_navi1 ul ul ul li.sub_no a:visited,
.nlu_navi1 ul ul ul li.sub_no a:active,
.nlu_navi1 ul ul ul li.sub_ul a,
.nlu_navi1 ul ul ul li.sub_ul a:link, 
.nlu_navi1 ul ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul ul li.sub_ul a:active  {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #FFFFFF;
   background: #83A1BF url(../../img/article/navi1_norm.gif) 40px 1px no-repeat;
   padding: 1px 0 0 55px;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
   \width: 200px;  /* IE5x Opera <= 5 */
   widt\h: 145px;  /* = (Width of Menu Items) - (padding-right + left) */ 
}

/* state for the active point if there is a sub_level */
.nlu_navi1 ul ul ul li.sub_ul_true a,
.nlu_navi1 ul ul ul li.sub_ul_true a:link,
.nlu_navi1 ul ul ul li.sub_ul_true a:visited,
.nlu_navi1 ul ul ul li.sub_ul_true a:active {
   color: White;
   font-weight: normal;
   background: #83A1BF url(../../img/article/navi1_sub_true.gif) 40px 1px no-repeat;
}

/* state for the active path (link tracing) */
.nlu_navi1 ul ul ul li.act_path a,
.nlu_navi1 ul ul ul li.act_path a:link,
.nlu_navi1 ul ul ul li.act_path a:visited,
.nlu_navi1 ul ul ul li.act_path a:active {
   color: White;
   font-weight: bold;
   background: #83A1BF url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
}


/* state for the active link */
.nlu_navi1 ul ul ul li.active a,
.nlu_navi1 ul ul ul li.active a:link,
.nlu_navi1 ul ul ul li.active a:visited,
.nlu_navi1 ul ul ul li.active a:active {
   color: White;
   font-weight: bold;
   background: #83A1BF url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
}


.nlu_navi1 ul ul ul li a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}
.nlu_navi1 ul ul ul li.sub_no a:hover {
   color: White;
   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}
.nlu_navi1 ul ul ul li.sub_ul a:hover {
   background: #6D879F url(../../img/article/navi1_act_hov.gif) 40px 1px no-repeat;
}
/* Only for "if there is a sub_level" */
.nlu_navi1 ul ul ul li.sub_ul_true a:hover {
   background: #6D879F url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}

/* Only for the active link */
.nlu_navi1 ul ul ul li.active a:hover {
   background: #6D879F url(../../img/article/navi1_act_hov.gif) 40px 1px no-repeat;
}
/*==== END LEVEL X ============================================= */

/* Holly Hack. IE Requirement \*/
* html .nlu_navi1 ul li { float: left; height: 1%; }
* html .nlu_navi1 ul li a { height: 1%; }

/* ==== End  nlu_navi1 ========================================= */

And so on.


===============================================================================

Horizontal menu:
--------------------------

Horizontal menu only for one level: <div class="nlu_horiz1">{NAV_LIST_UL:F,ID,1,act_path,active}</div>



CSS snippet for horizontal menu: Please create a file e.g. named /template/inc_css/nlu_horiz1.css -> CSS-download -> CSS-zip-download
In your template please include at css file: the file nlu_horiz1.css (Multiple setection = <strg>-"left mouse button")

Code: Select all

/* =================================================================
   >= V1.30    CSS for an horizontal menu one level 
   <div class="nlu_horiz1">{ NAV_LIST_UL:F,0,1,act_path,active }</div>
   Level 0 ; 
   26.03.07 flip-flop (KH)

===================================================================== */ 
   
.nlu_horiz1 {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
   text-decoration: none;
   font: normal normal 11px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.nlu_horiz1 em { font-style: normal; }

.nlu_horiz1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
} 

.nlu_horiz1 ul li { 
   display: block;
   float:left;
}


/* ==== Styles for Menu Items ================================== */

/* ==== LEVEL X ================================================ */

.nlu_horiz1 ul li a,
.nlu_horiz1 ul li a:link,
.nlu_horiz1 ul li a:visited,
.nlu_horiz1 ul li a:active {
   display: block;

 /* if you need a static width ELSE comment it out */
   width: 108px; /* ;width entry = with + boarder left/right  ==== IE only ====*/
   w\idth: 92px; /* width entry = with - padding left/right */

   text-decoration: none;
   text-transform: none;
   color: #fff;
   
 /* if you need a static width */
   padding: 0px 0 0 15px;         /* Text adjust */
 /* ELSE if you need a adjusted width */
   /* padding: 0px 10px 0 15px;  */       /* Text adjust */ 
   
   border-right: 1px solid #eee;
   background: #81909F url(../../img/article/navi1_norm.gif) 5px 1px no-repeat;
}

/* state for the active point if there is a sub_level */
.nlu_horiz1 ul li.sub_ul_true a,
.nlu_horiz1 ul li.sub_ul_true a:link,
.nlu_horiz1 ul li.sub_ul_true a:visited,
.nlu_horiz1 ul li.sub_ul_true a:active {
   color: White;
   font-weight: bold;
   background: #839AAF url(../../img/article/navi1_sub_true.gif) 5px 1px no-repeat;
}

/* state for the active path (link tracing) */
.nlu_horiz1 ul li.act_path a,
.nlu_horiz1 ul li.act_path a:link,
.nlu_horiz1 ul li.act_path a:visited,
.nlu_horiz1 ul li.act_path a:active {
   color: White;
   font-weight: bold;
   background: #63819F url(../../img/article/navi1_act.gif) 5px 1px no-repeat;
}

/* state for the parent link (only Home) */
.nlu_horiz1 ul li.sub_parent a, 
.nlu_horiz1 ul li.sub_parent a:link, 
.nlu_horiz1 ul li.sub_parent a:visited, 
.nlu_horiz1 ul li.sub_parent a:active {
   background: #81909F url(../../img/article/navi1_norm.gif) 5px 1px no-repeat;
   color:White;
   font-weight:bold;
}

/* state for the active link */
.nlu_horiz1 ul li.active a, 
.nlu_horiz1 ul li.active a:link, 
.nlu_horiz1 ul li.active a:visited, 
.nlu_horiz1 ul li.active a:active { 
   color: White;
   font-weight: bold;
   background: #63819F url(../../img/article/navi1_act.gif) 5px 1px no-repeat; 
}


.nlu_horiz1 ul li a:hover, .nlu_horiz1 ul li.sub_no a:hover {
   color: White;
   background: #597B8F url(../../img/article/navi1_hov.gif) 5px 1px no-repeat;
}
.nlu_horiz1 ul li.act_path a:hover {
   color: White;
   background: #37667F url(../../img/article/navi1_act_hov.gif) 5px 1px no-repeat;
}
.nlu_horiz1 ul li.active a:hover {
   color: White;
   background: #37667F url(../../img/article/navi1_act_hov.gif) 5px 1px no-repeat;
}

/* ===== END horiz Level X_===================================== */ 

An alternative horiz. css layout you will find here.

"Dynamically width entry" is the width of each navigation entry.
Every entry becomes automatically the width of the text string + padding left/right. The bg images uses a sliding door technology.

===============================================================================

Combination of horiz. & vert. navigation
---------------------------------------------

You see the vertical sub output for the active path [Ebene02]

Level lift for the vertical navigation, beginning at the first level behind [Ebene02]:

Code: Select all

[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',,act_path,active}';
echo '</div>';
}
[/PHP]

]
Where LEVEL_ID'][X] is the level.

If you want to outsource this snippet to the /frontend_render/ folder (no fomatting pickings if there is no menu), please have a look: WRAP_NAV_LIST_UL: includet level lift and class
The basics: Untermenü nur bedingt anzeigen (German).

Please have a look too for deeper informations about "level and IDs".

- Multilingual/domain switch [en]: http://www.phpwcms.de/forum/viewtopic.php?p=83791#83791
- Basics Level and IDs [de]: http://www.phpwcms.de/forum/viewtopic.php?p=71772#71772


Have fun.

Knut

[Oliver Georgi]

Thanks Knut

Impressive.

Oliver

[juergen]

Hmmm.... there is no question.... all we have to say is
Thank you, doc Knut

[update]

Me too thank you Dr. Knut

[tyreal2012]

Wow, ill read that tonight

thanks Knut

[sustia]

Another great tutorial, thanks flip-flop

[macangelo]

Hi Knut

I can only add my respectful thank you.

I was already blessed with the preceeding version:

(For the version 1.27 - 1.29 please see: http://www.phpwcms.de/forum/viewtopic.php?p=74552#74552)

and used it successfully. If I upgrade now to 1.3.0, should I replace the old version with this new one?

Thanks again

Uwe

[Marphy]

Hi at all,
that's my first posting and at first I want to say a big thanks to Oliver Georgi for his fantastic work! Just genius.
Another "thank you" goes to flip-flop of course for his engagement in the community and contributions like this.

But as you can imagine, this is not the only reason why I was posting here. My problem is a quite simple one I think, but I can't get on:
Why all menu items have 100% width (that means it always approximates to the right border of the surrounding table cell), even if I comment out the width-values in CSS-code and set a padding in the parent cell?
The resulting HTML code looks like this:

Code: Select all

<td valign="top" width="178" class="block_left"><!--
    Left Menu
//-->

<img src="img/leer.gif" border="0" width="156" height="1" alt="" />

<div class="nlu_navi1">
<ul class="act_path">
	<li class="sub_no sub_ul_true"><a href="index.php?xxxx">Item 1</a></li>
	<li class="sub_no"><a href="index.php?yyyy">Item 2</a></li>
</ul>
</div></td>

where "block_left" is defined as

Code: Select all

.block_left {
	background-image: url(../../picture/block_left.gif);
	background-repeat: no-repeat;
	padding: 20px 40px 0px 22px;
}

Another question is why flip-flop defined some strange width-CSS items and it works nevertheless:

Code: Select all

\width: 200px;  /* IE5x Opera <= 5 */ 
   widt\h: 160px;  /* = (Width of Menu Items) - (padding-right + left) */

I hope you can help.

Regards,
Marco

[flip-flop]

Hi Marco,

I can´t follow your problem, please make a screenshot or give us a url.

..... defined some strange width-CSS items and it works nevertheless:

This is solving the IE7 white-space bug.
The construction is a css hack. In box model the IE5 and Opera don´t interpret the padding in the right way.
e.g.:

/* ++ Killing the "white-space" bug in IE7 */
\width: 200px; /* IE5x Opera <= 5 */
widt\h: 175px; /* = (Width of Menu Items) - (padding-right + padding-left) */

Knut

[MadDoctor]

Thank you very much flip-flop!

[Marphy]

Hi Knut,
the problem is solved now. I think I just needed a little bit of time to really understand how the thing works.

The CSS-Hack now also is clear for me, found some stuff on the web.

But I have one little new question now:
There's a test site on the web (could be from yourself) and I think it has a NAV_LIST_UL menu.
However, the menu bullets slide slowly a bit to the right when I hover menu items and slide back when I leave them again.
This looks and "feels" quite nice, but I have no plan how to realize it. Furthermore I have forgotten the link to the site and can't find it again (although it was mentioned here in the forum).

Hope you can help again!

Best regards,
Marco

[flip-flop]

You can see the original at this place:

Code: Select all

http:// zet-project.de/de_vita_sm.phtml

This isn´t NAV_LIST_UL but that is insignificant. All you see are animated gif´s.
Next two weeks I will convert this site to V1.3.3 with using NAV_LIST_UL and (DE/EN).

Knut

[Niedzielan]

CSS snippet vertical menu: Please create a file e.g. named /template/inc_css/nlu_navi1.css
In your template please include at css file: the file nlu_navi1.css (Multiple setection = <strg>-"left mouse button")

Is the multiple selection, or this entire manual, only possible when you have installed phpwcms v1.3.3??

[flip-flop]

Hi, since V1.27 you can use this "Multiple setection".

Knut

[Marphy]

You can see the original at this place:

Code: Select all

http:// zet-project.de/de_vita_sm.phtml

This isn´t NAV_LIST_UL but that is insignificant. All you see are animated gif´s.
Next two weeks I will convert this site to V1.3.3 with using NAV_LIST_UL and (DE/EN).

Thank you Knut, this was really the site that I was looking for.

The disadvantage of animated gifs as menu bullets is that there is no way to let them slide back when you leave the menu item, is there?