NAV_LIST_UL >= V1.30

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

NAV_LIST_UL >= V1.30

Post by 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
Image normal state: /image/article/navi1_norm.gif
Image hover state: /image/article/navi1_hov.gif
Image active state: /image/article/navi1_act.gif
Image active state: /image/article/navi1_act_hov.gif
Image 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>

Image
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>

Image

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")
Image

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>

Image

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")
Image

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
---------------------------------------------
Image
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 :D
Last edited by flip-flop on Wed 13. May 2009, 10:03, edited 14 times in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

Thanks Knut :)

Impressive.

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
juergen
Moderator
Posts: 4556
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Post by juergen »

Hmmm.... there is no question.... all we have to say is
Thank you, doc Knut ;)
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Post by update »

Me too thank you Dr. Knut
tyreal2012
Posts: 46
Joined: Fri 8. Dec 2006, 16:57

Post by tyreal2012 »

Wow, ill read that tonight

thanks Knut
phpWCMS Noob - with a million questions
[1.3.3]
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Post by sustia »

Another great tutorial, thanks flip-flop :D
Campeones del mundo!
Vegetables!
macangelo
Posts: 756
Joined: Sat 29. Nov 2003, 14:19
Location: Düsseldorf
Contact:

Post by 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
Webdesign from Düsseldorf - made with phpwcms (most of it):
http://eyelikeit.com/index.php?de_beispiele-webdesign
Marphy
Posts: 14
Joined: Wed 16. May 2007, 15:29

Post by 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. 8)

But as you can imagine, this is not the only reason why I was posting here. :wink: 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
Last edited by Marphy on Mon 3. Sep 2007, 17:36, edited 1 time in total.
:arrow: Nicht verzagen -- dumpVar() fragen! :idea:
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by 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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
MadDoctor
Posts: 18
Joined: Tue 25. Jul 2006, 00:46
Contact:

Post by MadDoctor »

Thank you very much flip-flop!
Marphy
Posts: 14
Joined: Wed 16. May 2007, 15:29

Post by 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
Last edited by Marphy on Mon 3. Sep 2007, 17:36, edited 1 time in total.
:arrow: Nicht verzagen -- dumpVar() fragen! :idea:
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by 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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Niedzielan
Posts: 53
Joined: Wed 27. Dec 2006, 13:06

Re: NAV_LIST_UL >= V1.30

Post by Niedzielan »

flip-flop wrote:
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")
Image
Is the multiple selection, or this entire manual, only possible when you have installed phpwcms v1.3.3??
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

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

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Marphy
Posts: 14
Joined: Wed 16. May 2007, 15:29

Post by Marphy »

flip-flop wrote: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?
Last edited by Marphy on Mon 3. Sep 2007, 17:37, edited 1 time in total.
:arrow: Nicht verzagen -- dumpVar() fragen! :idea:
Post Reply