CSSMenu: The ultimate CSS only PHPLayers replacement!

[angels]

hmm anyone got allready a horizontal stylesheet? I cant get it working horizontal :S

[Greg]

Redguy I'm having the same problem - JS not loading .... what is the fix?

[Redguy]

Redguy I'm having the same problem - JS not loading .... what is the fix?

For now you have to disable PHPLayers and any other menu system you have for the CSSMenu to work in IE5.0, but I don't know why?

The seporator in the CSSMenu is fucked up on IE... hehe.. I know this is a minor problem, just wanted to point that out:)

[ljbadenz]

The reason for that is probably conflicting id names and css conflicts.

What do you mean the seperator is is messed...?

Could you please post a sceen or the html code output.

[Greg]

Javascript file is not loading. All other menuing sytems are uninstalled in modules.

CSSMenu version 1.1.3

??

[Greg]

A few problems that need resolution to have the 'Perfect' menu ....

I found the problem with the JS file not loading, the tag {cms_module module='cssmenu'} is case sensitive. Now I have the JS file loading but the submenus still don't show as the JS is not working.

Using showadmin='1' results in the admin link falling outside of the menu structure and looking like an ordinary link within a bulleted list.
This code fixes that lines 249 - 260 in CSSMenu.module.php

Code: Select all

			for ($i = 0; $i < $last_level; $i++) $menu .= "</li>\n";

			if ($showadmin == 1)
			{
				$menu .= "<li><a href='".$config['admin_dir']."/'>Admin</a></li>\n</ul>\n";
			}else{
			  $menu .= "</ul>\n";
			}
			$menu .= "</div>\n";
		}

		return $menu;

The class = "menuparent" logic produces incorrect code, all the last items in the submenus have this class.

Is anyone else experiencing similar problems or is it specific to my configuration of operating system, php, etc. ?

[Ted]

I'm not having any problems with it, but then again, I'm not testing IE.  The javascript looks like it's loading to me...

cms_module should not be case sensitive.  I'm not sure what that's all about.

I fixed the showadmin logic with this code:

Code: Select all

            }

            if ($showadmin == 1)
            {
                for ($i = 0; $i < $last_level - 1; $i++) $menu .= "</li></ul>";
                $menu .= "</li><li><a href='".$config['admin_dir']."/'>Admin</a></li>\n";
                $menu .= "</ul></div>\n";
            }
            else
            {
                for ($i = 0; $i < $last_level; $i++) $menu .= "</li></ul>";
                $menu .= "</div>\n";
            }
        }

        return $menu;

[Greg]

looks like we both have a solution to the one wishy

[Ted]

Yours looks less complicated.    That's typical of my coding style...

[Greg]

I'm getting closer with the javascript problem. The javascript is loading and functioning in IE. The submenus are not working because the wrong menu items have the menuparent class. So the javascript error is not a javascript problem but a logic error in the php that assigns the menuparent class.

Changing line 233 of CSSMenu.module.php to the following and the submenus work!

Code: Select all

$menu .= '<li class="menuparent"><a href="#">'.$onecontent->MenuText().'</a>';

However the last menu item in each submenu has a class menuparent and the first item (Home with no submenus) has a class menuparent.

[ljbadenz]

I updated to 1.1.4, this includes the admin link fix, and I made section headings bold (so they look like a section header).

Greg, I didn't include your fix as testing 1.1.4 on my site showed there was no problems with menuparent. If you read the article linked to in my main post, you will see that class='menuparent' is used only on tags who include a denoting a submenu.

Try deleting CSSMenu and then uploading 1.1.4

If you still have problems please list your browser and its version. Also post the html code generated by CSSMenu. This will make it easier to track sown the problem.

[Greg]

Here is the menu structure I get with 1.1.4
With my menu the submenus are attached to the section headers. In IE 6 the submenus do not show unless the section headers have the class menuparent. In Firefox 1.0.6 the submenus show if the sectioheaders are class sectionheader or class menuparent. However as you can see from the structure below, the menu items with the arrow.gif attached to the class menuparent are not the correct menu items. I notice on your site the submenus are not attached to section headers, they are content pages with submenus.  I'm not sure what most people use for the submenus, are they run from sectioheaders or from contentpages?

Anyway if I change line 235 to

Code: Select all

$menu .= '<li class="menuparent"><a href="#">'.$onecontent->MenuText().'</a>';

the section headers function as parents for submenus in IE and Firefox, but why Home etc. are showing as class menuparent I'm not sure (code logic).

Code: Select all

<div id="listmenu">

<ul id="primary-nav">
<li class="menuparent"><a href="http://localhost/gregbloorcms/index.php?page=Home" class="currentpage">Home</a></li>
<li class="sectionheader"><a href="#">Main Pages</a>
<ul>
<li class="menuparent"><a href="http://localhost/gregbloorcms/index.php?page=Cyclone">Cyclone</a>
<ul>
<li><a href="http://localhost/gregbloorcms/index.php?page=Duke_Out">Duke Out</a>
</li>
</ul>
</li>
<li><a href="http://localhost/gregbloorcms/index.php?page=Desiderata">Desiderata</a></li>
<li><a href="http://localhost/gregbloorcms/index.php?page=Links">Links</a></li>
<li class="menuparent"><a href="http://localhost/gregbloorcms/index.php?page=Lazarus">Lazarus</a>
</li>
</ul>
</li>
<li class="sectionheader"><a href="#">Games</a>
<ul>
<li><a href="http://localhost/gregbloorcms/index.php?page=Minefield">Minefield</a></li>
<li><a href="http://localhost/gregbloorcms/index.php?page=Poker">Poker</a></li>
<li class="menuparent"><a href="http://localhost/gregbloorcms/index.php?page=Tic-Tac-Toe">Tic Tac Toe</a>
</li>
</ul>
</li>
<li class="sectionheader"><a href="#">Tools</a>
<ul>
<li><a href="http://localhost/gregbloorcms/index.php?page=Calculator">Calculator</a></li>
<li class="menuparent"><a href="http://localhost/gregbloorcms/index.php?page=Unit-Converter">Unit Converter</a>
</li>
</ul>
</li>
<li class="sectionheader"><a href="#">Gallery</a>
<ul>
<li><a href="http://localhost/gregbloorcms/index.php?page=singapore">To The Pictures</a></li>
<li><a href="http://localhost/gregbloorcms/index.php?page=About-the-gallery">About the gallery</a>
</li>
</ul>
</li>
<li><a href="http://localhost/gregbloorcms/index.php?page=Feedback">Feedback</a></li>
<li><a href="http://localhost/gregbloorcms/index.php?page=News">News</a></li></ul></div>

[ljbadenz]

Aha, I see it now, it isn't setting sectionheader to  menuparent because it is looking for '' instead of ''.

That should be a simple fix. Just add another search for ''.

I'm still puzzled as to why {cms_module} is case sensitive, because my code uses 'eregi' wich is the case insensitive version of ereg???

Maybe whishy should look at that.

[Greg]

The CSS from Stylin' with CSS works for a horizontal menu with the html from CSSMenu.module.php

The JS doesn't work as is so IE needs csshover.htc

Code: Select all

body {font-family: verdana, arial, sans-serif; font-size:100%; behavior: url(csshover.htc);}
/* the horizontal menu starts here */
div#listmenu {
        width:100%; /* makes the div full width */
        float:left;
        border-top:1px solid #069;      /* draws line on top edge of div */
        border-bottom:1px solid #069;    /* draws line on bottom edge of div */
        font-size:.8em; /* SET FONT-SIZE HERE */
        background-color:#CCF; /* colors the div */
        margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
        }
div#listmenu ul {
        margin:0 0 0 30px;/* indents ul from edge of container - NOTE: diff value for IE in hacks below */
        }
div#listmenu li {
        float:left;     /* causes the list to align horizontally instead of stack */
        position:relative; /* positioning context for the absolutely positioned drop-down */
        list-style-type:none;   /* removes the bullet off each list item */
        background-color:#FFA; /*sets the background of the menu items */
        border-right:1px solid #069; /* creates dividing lines between the li elements */
        }
div#listmenu li:first-child {
        border-left:1px solid #069; /*the first vertial line on the menu */
        }

div#listmenu li:hover { 
        background-color:#FFF; /*sets the background of the menu items */
        }
div#listmenu a {
display:block;
        padding:1px 6px; /*creates space each side of menu item's text */
        text-decoration:none;    /* removes the underlining of the link */
        color:#069;     /* sets the type color */
        }
div#listmenu a:hover {
        color:#F33;
        }
/* the menu ends here */
/* the drop-down starts here */
div#listmenu ul li ul {
        margin:0; 
        z-index:10; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
        position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
        width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
        border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
        left:-1px; /*aligns the drop exactly under the menu */
        }
div#listmenu ul li ul li {padding:0;
        width:100%; /* makes the list items fill the list container (ul) */
        border-left:1px solid #069; /*  three sides of each drop-down item */
        border-bottom:1px solid #069;
        border-right:1px solid #069;}
div#listmenu ul li ul li a {padding:1px .5em;}
div#listmenu ul li ul li:first-child {
        border-top:1px solid #069; /*the top edge of the dropdown */
        }
/* make the drop-down display as the menu is rolled over */
div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* pop-out starts here */
body div#listmenu ul li ul li ul  {
        position:absolute; 
        visibility:hidden; /* same effect as display:none in this situation */
        top:-1px;
        left:10em;
        }
div#listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* second level popouts start here*/
div#listmenu ul li ul li:hover ul li ul {visibility:hidden;}
div#listmenu ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
        float:left; /* makes the ul wrap the li's */
        border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
        margin-left:15px; /* IE doubles the given value above - why? */
        }

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#listmenu ul li ul {
        border-top:1px solid #069;
        border-left:0px; /* stops the drop inheriting the ul border */
        }
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html  div#listmenu ul li ul li ul { 
  left:9.85em; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  left:10em;
  } 
/* and the "be nice to Opera" rule */
html>body div#listmenu ul li ul li ul {
  left:10em;
} 

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */
        @media all and (min-width: 0px){
   body div#listmenu ul li ul {padding-bottom:100px;}
   body div#listmenu ul li ul li ul {padding-bottom:22px;}
   ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */

   }
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */

[ljbadenz]

I fixed it, but unfortunately the class="sectionheader" doesn't exist at the moment so you cant apply custom formatting to section headers. I'll look into a work around... I suppose I could hard code the styling into a style="" property...

Greg that css looks promising. I emailed the author of the original ALA article for his take on a horizontal stylesheet, so if he can't help I might be able to modify your code to suit.