Page 8 of 9

Posted: Mon 21. Mar 2005, 10:16
by marcus@localhorst
mmmh,

i use this:

Code: Select all

// -------------------------------------------------------------
// css nav {NAV_LIST_ALL} using <div> tags
// -------------------------------------------------------------

function css_list_all ($struct, $act_cat_id, $level, $nav_table_struct, $link_to="index.php") {
        // start with home directory for the listing = top nav structure
        // 1. Build the recursive tree for given actual article category ID

        // return the tree starting with given start_id (like breadcrumb)
        // if the $start_id = 0 then this stops because 0 = top level

        $level = intval($level);
        $start_id = $act_cat_id;

        while ($start_id) {
                $data[$start_id] = 1;
                $start_id                = $struct[$start_id]["acat_struct"];
        }
        $temp_tree = (sizeof($data)) ? array_reverse($data, 1) : false;

        foreach($struct as $key => $value) {
                if($struct[$key]["acat_struct"] == $act_cat_id && $key && !$struct[$key]["acat_hidden"]) $c++;
        }
        $c = (!$c) ? 1 : 0;

        //get depth of level
        $level_depth = 0; $start_level = $level;
        while ($start_level) {
                $start_level = $struct[$start_level]["acat_struct"];
                $level_depth++;
        }
        $temp_menu = build_levels_list ($struct, $level, $temp_tree, $act_cat_id, $nav_table_struct, $level_depth, $c, $link_to); //starts at root level
        return ($temp_menu) ? ("\n<div id=\"navcontainer\">".$temp_menu."</div>\n") : "";
}


// -------------------------------------------------------------

function build_levels_list ($struct, $level, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to) {
        // this returns the level structure based on given arrays
        // it is special for browsing from root levels
        $depth = sizeof($temp_tree)-$div; $count++; $depth2 = $depth-$count+2;

        $temp_menu      = "";
        foreach($struct as $key => $value) {
                if($_SESSION["frontend_user_in"] && $struct[$key]["acat_regonly"]) $struct[$key]["acat_regonly"] = 0;
                if($struct[$key]["acat_struct"] == $level && $key && !$struct[$key]["acat_hidden"] && !$struct[$key]["acat_regonly"]) {

                        $link_image_id  = "linkid".randpassword(6);
                        $link_name_id   = ' name="'.$link_image_id.'" id="'.$link_image_id.'"';
                        $link                   = $link_to."?";
                        $link              .= ($struct[$key]["acat_alias"]) ? html_specialchars($struct[$key]["acat_alias"]) : 'id='.$key.',0,0,1,0,0';
												$mycategory     = $GLOBALS['content']['struct'][$key]['acat_alias'];
/*I use the alias names of the root-levels and made custom classes for each*/
												
												
						
/*Here the tree is build and compare if active section or root level etc*/						
                        if($temp_tree[$key]) {
                                if($act_cat_id == $key && !$count>0) {
                                        $temp_menu .= "<li  class=\"MenuItem-".$mycategory."\" ><a  href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\"  class=\"MenuItem-".$mycategory."\" >".html_specialchars($struct[$key]["acat_name"])."</a>";
                                } else {
                                        $temp_menu .= "<li  class=\"MenuItem-".$mycategory."\"><a id=\"activeSection\" href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\"  class=\"MenuItem-".$mycategory."\">".html_specialchars($struct[$key]["acat_name"])."</a>";
                                }
                                $temp_menu .= build_levels_list ($struct, $key, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to);
                        } else {
															  if($count == 1){
                                $temp_menu .= "<li  class=\"MenuItem-".$mycategory."\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\"  class=\"MenuItem-".$mycategory."\" >".html_specialchars($struct[$key]["acat_name"])."</a>";
																} else { 
																$temp_menu .= "<li class=\"MenuItem-lvl-".$count."\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\">".html_specialchars($struct[$key]["acat_name"])."</a>";
                        				 } 
												$temp_menu .= "</li>";	
												}
 /* the orginal---------------------------------------------
                        if($temp_tree[$key]) {
                                if($act_cat_id == $key) {
                                        $temp_menu .= "<li class=\"MenuItem-".$mycategory."\" id=\"activeSection\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
                                } else {
                                        $temp_menu .= "<li class=\"MenuItem-".$mycategory."\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
                                }
                                $temp_menu .= build_levels_list ($struct, $key, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to);
                        } else {
															 if($count == 1){
                                $temp_menu .= "<li class=\"MenuItem-".$mycategory."\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
																} else { 
																$temp_menu .= "<li class=\"MenuItem-lvl-".$count."\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
                        				 } 
												} */
                }
									
        }     
    
if($temp_menu) {
/**/$myg  = '<ul ';
if($count>0) {$myg .= 'class ="navlist"';}  
$myg .= ">".$temp_menu.'</ul>';
/* $myg = "<ul>\n".$temp_menu.'</ul>'; */
$myg .= "\n";
}			  
	
	
	return $myg; 
}

// ------------------------------ -------------------------------

// <ul>-list based Navigation table
if( ! ( strpos($content["all"],'{NAV_LIST_ALL')==false ) ) {
        $content["all"] = str_replace('{NAV_LIST_ALL}','{NAV_LIST_ALL:0}',$content["all"]);
        $replace = 'css_list_all($content["struct"],intval($content["cat_id"]),"$1",$template_default["nav_table_struct"]);';
        $content["all"] = preg_replace('/\{NAV_LIST_ALL:(\d+)\}/e', $replace, $content["all"]);
}
to get this:
Image

Code: Select all

<div id="navcontainer">
<ul class="navlist">
<li class="MenuItem-buergerservice-stadtverwaltung"><a id="activeSection" href="buergerservice-stadtverwaltung.phtml" title="Bürgerservice + Stadtverwaltung" class="MenuItem-buergerservice-stadtverwaltung" name="activeSection">Bürgerservice + Stadtverwaltung</a>
<ul class="navlist">
<li class="MenuItem-lvl-2"><a href="die_stadtverwaltung.phtml" title="Die Stadtverwaltung">Die Stadtverwaltung</a></li>
<li class="MenuItem-buergerservice-scheibenberg"><a id="activeSection" href="buergerservice-scheibenberg.phtml" title="Bürgerservice" class="MenuItem-buergerservice-scheibenberg" name="activeSection">Bürgerservice</a>
<ul class="navlist">
<li class="MenuItem-lvl-3"><a href="die_aemter.phtml" title="Die Ämter">Die Ämter</a></li>
<li class="MenuItem-lvl-3"><a href="bekanntmachungen.phtml" title="Öffentliche Bekanntmachungen">Öffentliche Bekanntmachungen</a></li>
<li class="MenuItem-lvl-3"><a href="formulare.phtml" title="Formulare">Formulare</a></li>
</ul>
</li>
<li class="MenuItem-lvl-2"><a href="fakten_zu_scheibenberg.phtml" title="Fakten">Fakten</a></li>
</ul>
</li>
<li class="MenuItem-tourismus-wandern"><a href="tourismus-wandern.phtml" title="Tourismus + Wandern" class="MenuItem-tourismus-wandern">Tourismus + Wandern</a></li>
<li class="MenuItem-kultur-geschichte"><a href="kultur-geschichte.phtml" title="Kultur + Geschichte" class="MenuItem-kultur-geschichte">Kultur + Geschichte</a></li>
<li class="MenuItem-landschaft-natur-umwelt"><a href="landschaft-natur-umwelt.phtml" title="Landschaft + Umwelt" class="MenuItem-landschaft-natur-umwelt">Landschaft + Umwelt</a></li>
<li class="MenuItem-bildung-soziales-religion"><a href="bildung-soziales-religion.phtml" title="Bildung + Soziales + Religion" class="MenuItem-bildung-soziales-religion">Bildung + Soziales + Religion</a></li>
<li class="MenuItem-wirtschaft"><a href="wirtschaft.phtml" title="Wirtschaft" class="MenuItem-wirtschaft">Wirtschaft</a></li>
<li class="MenuItem-"><a href="18.0.0.1.0.0.phtml" title="Intern" class="MenuItem-">Intern</a></li>
</ul>
</div>
it's not 100% valid at the moment, but it works very well.

hope this helps you a little bit...

Posted: Tue 22. Mar 2005, 11:41
by Paal
Hmmm :)

I use alias but your hack not supperted :(

But, thx!

Paul

Posted: Wed 23. Mar 2005, 05:51
by toszter
Paal wrote:
marcus@localhorst wrote:yes, if you found out the logic in the functions :-)
??

I want to make custom (different, like other) color for selected menu-level in dropdown menu.

Normal menuitem: green
Selected menuitem: red
Maus-ower menuitem: blue

Paul
Paal,

you want the page that you are on to be hilighted in the menu tree, correct? I would like this functionality too. So, if you are browsing through drop down menu, you see the page you are currently visiting hilighted in a different color and the rollover is unaffected for all items in the menu. I will work on this too.

It is really very simple whe you think about it logically: if the menu item in the tree has a URL that is a subset of the URL string of the current visited page, then this url should be styled differently than the others.

I have a couple projects to work on so i don't starve but I'll get back to this and the horizontal version of my menu system. Hang in there.. 8)

~toszter

Posted: Tue 29. Mar 2005, 09:36
by rushclub

Posted: Fri 17. Jun 2005, 09:13
by jsw_nz
Great Thread...worth bumping...

I installed VERT_DROPDOWN and it works great I did encounter issues of overlapping when using Flash on same page however. (Flash insists to go to top -- regardless of z-index) Since I use Flash alot, I did a wee bit of searching, finding that it is one of the most asked ?'s at MM. The workaround is that newer browsers support the wmod for the Flash player (not all however):

Code: Select all

<param name="wmode" value="transparent"> (IE) (inside <object> tags)
wmode="transparent" MOZILLA (inside <embed> tags)
Does the trick, but I did find that using Flash inside CSS DIV version of Wcms layouts is real quirky, so stay with table version is you want to combine Flash with VERT_DROPDOWN (imo)

works fine on IE, Firefox, (Windows)
However Opera 7,8 (Windows) - sub-menu links do not work.....
Safari has known probs (Mac) - but have not tested
Anybody test on MAC? Would be real interested in finding out results......

Kind of a toss up whether to deploy VERT_DROPDOWN menu on Flash intensive page....obviously pages could be designed in such a way that the menu does not overlap with Flash elements.....

anyway, the menu is very very nice......
opens up more expansive horizons for wcms.....in certain situations
only wish the Opera issues were covered.

:)

Posted: Fri 17. Jun 2005, 13:00
by cyppher.nl
Isn't it possible to add an table in a DIV in which you load a Flash movie, so that it won't appear in the top of the page?

I know one should avoid using tables, but clearly Flashmovies load on top of a page as I understand your story...

transmenu youngpup.net

Posted: Mon 11. Jul 2005, 19:20
by dernier_recours
Ben wrote:For Emergent Web Design, I used ypSlideOutMenus (http://youngpup.net/2001/ypslideoutmenus. Now, there's a similar but updated solution - http://youngpup.net/2004/transmenus. The problem with these menus is that they have to be hard-coded, which is fine for some people, but takes away the ability to easily change menus with a cms - especially for our non-technical clients.
The CMS Etomite already has a snippet for this menu. Maybe some developpers could be inspired by this:
http://www.etomite.org/forums/index.php?showtopic=2070

Posted: Mon 11. Jul 2005, 19:43
by Ben
Yeah, that would be very cool to have transmenus from http://www.youngpup.net implemented into phpWCMS. The animation is very smooth and adds a nice feel to any site.

Posted: Tue 12. Jul 2005, 11:59
by Kosse
Hi Ben,

have used that drop-down menu in a dev site (still in construction): take a look at: http://www.mjlaloy.be/
it is the menu on the far right (transparent grey): "zoom sur... ".

Image

If usefull, I can post the code (a mix between transparent menus, and some coding in template).

Cheers

edited the uri, now live site

Posted: Tue 12. Jul 2005, 16:43
by dernier_recours
Très beau site. I would be interested to try your menu. I know that there is some issues to solve with the Etomite snippet. I'm glad to see that there is no problem with yours.

Posted: Tue 12. Jul 2005, 16:58
by Kosse
Thx dernier_recours,

it's still under construction though... but always nice to have another opinion ;)
I'll compile it all and post it here by tomorrow,

Cheers

Posted: Tue 12. Jul 2005, 17:32
by Ben
Kosse,
I've done the transparent menu thing before using css. I'm more interested in seeing the menus slide out and pull the menu data from the database. Here's a demo of the hard-coded TransMenus from http://www.youngpup.net: http://youngpup.net/_projectDirectories ... index.html.

Posted: Tue 12. Jul 2005, 19:26
by Kosse
Hi Ben,

actually you're right, the data is not pulled from the database, I've put it there manually. (with one or two RT)

I didn't use the youngpup menu because it was a little buggy (6 months ago or so...) with IE and FF (don't remember which one didn't render well), but I see it works now. Will have a look at it... but seems hard work to get all running smoothly ... ;)

BTW,
The code looks like this in my main template section:

Code: Select all

<!-- debut mini-menu section -->
<div id="marcos">
<script language="Javascript" type="text/javascript">
// pour éviter le clignotement désagréable
preChargement();
</script>
	<p id="menu1" class="menu"
		onmouseover="MontrerMenu('ssmenu1');"
		onmouseout="CacherDelai();">

	<a href="index.php?actualites"
		onmouseover="MontrerMenu('ssmenu1');"
		onfocus="MontrerMenu('ssmenu1');">Zoom sur...<span>&nbsp;:</span></a>
    </p>
    <ul id="ssmenu1" class="ssmenu"
		onmouseover="AnnulerCacher();"
		onmouseout="CacherDelai();"
		onfocus="AnnulerCacher();"
		onblur="CacherDelai();">
	<li>
<a href="index.php?id=19,68,0,0,1,0">Majonews<span>&nbsp;;</span></a>
	</li>	
        <li>
<a href="index.php?id=1,59,0,0,1,0">Les femmes<span>&nbsp;;</span></a>
	</li>
	<li>
<a href="index.php?id=1,67,0,0,1,0">La Palestine<span>&nbsp;;</span></a>
	</li>
	<li>
[ID en_cours_actualites]Les dernières actualités<span>&nbsp;;</span>[/ID]
	</li>
	<li>
[ID archives_actualites]Les Archives[/ID]<span>&nbsp;;</span></a>
	</li>
	</ul>
</div>
<script language="Javascript" type="text/javascript">Chargement();</script>
<!-- fin mini-menu section -->
As I said, will post tonight the whole thing (has a js file included as well)

Cheers

Posted: Tue 12. Jul 2005, 19:33
by frold

Posted: Tue 12. Jul 2005, 19:36
by Ben
Isn't it? I've used it in conjunction w/ phpWCMS here http://www.healthcareps.com and here http://www.thinkinggreek.com. Unfortunately, the nav of both sites is hard-coded. :? It sure would be cool to have it loaded from the db, wouldn't it? :D