CSS Dropdown Menu

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Post 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...
Paal
Posts: 204
Joined: Wed 6. Oct 2004, 19:54
Location: Budapest, Hungary
Contact:

Post by Paal »

Hmmm :)

I use alias but your hack not supperted :(

But, thx!

Paul
toszter
Posts: 18
Joined: Wed 2. Mar 2005, 17:02
Location: Atlanta
Contact:

Post 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
rushclub
Posts: 915
Joined: Tue 17. Feb 2004, 18:52

Post by rushclub »

3 (!) Jahre warten reichen mir. Ich bin erst mal weg.
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Post 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.

:)
User avatar
cyppher.nl
Posts: 138
Joined: Wed 19. May 2004, 18:38
Location: Hilversum, Netherlands

Post 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...
How do you do? And how do you do your wife?
dernier_recours
Posts: 66
Joined: Mon 2. May 2005, 17:33
Location: Canada
Contact:

transmenu youngpup.net

Post 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
Ben
Posts: 558
Joined: Wed 14. Jan 2004, 08:05
Location: Atlanta
Contact:

Post 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.
User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

Post 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
Last edited by Kosse on Wed 21. Sep 2005, 22:31, edited 1 time in total.
dernier_recours
Posts: 66
Joined: Mon 2. May 2005, 17:33
Location: Canada
Contact:

Post 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.
User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

Post 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
Ben
Posts: 558
Joined: Wed 14. Jan 2004, 08:05
Location: Atlanta
Contact:

Post 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.
User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

Post 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
frold
Posts: 2151
Joined: Tue 25. Nov 2003, 22:42

Post by frold »

http://www.studmed.dk Portal for doctors and medical students in Denmark
Ben
Posts: 558
Joined: Wed 14. Jan 2004, 08:05
Location: Atlanta
Contact:

Post 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
Post Reply