Kryptronic Software Support Forum

nyborlily · 11-19-2011 11:26:09

My submenu is behind the page content. I have played around with changing the z-index but this hasn't worked. Any suggestions?

dh783 · 11-19-2011 12:23:38

Are you using the java script or doing this with plain css?
You may have to try the z-index in a different css rule for the menu to target the one actually building the submenu area, or you could have conflicting css rules on the site.

John

nyborlily · 11-19-2011 22:54:40

No I'm not doing any javascript. I just followed all the instructions in the posts above. I will look through the CSS for something else that will be causing this conflict.

One option I have considered is that there are back ground images for the splash that repeat. I am using zipskin_ccp7015. Does this sound likely?

dh783 · 11-20-2011 10:32:06

The original instructions for this mod included a java script to control the submenus although it can be done with css as I have it currently running on my site with just css rules at present, but I have noticed that with just css controling the layout that there is not really one set of rules that can be used for all sites since it also depends on the css rules that are used for a given site.

John

ZipSkins · 11-21-2011 03:41:40

The issue would appear to be with the CSS for the 'fly-out' menus - they are either not wide enough, or not sufficiently offset to appear to the right of the main menu.

I have set these menus up without any problems on ZipSkins, and there is no reason for the splash images to interfere with their working. However, I have always used the javascript file described in dh783's description - or an alternative script to achieve a slightly different effect.

Nigel

nyborlily · 11-25-2011 09:21:30

Here is a link to my page so you can see what it is doing:

Also my CSS for the sub menu is:

Code:

.skin_fenav ul li ul {
     position: absolute;
     width: 130px; /*sub menu width*/
     top: 8px;
     visibility: hidden;
     background-color: #ffcc99;
     background-repeat: repeat; 
     border: 1px solid #ff9933;
     z-index: 900000;
}

.subfolderstyle {
    background-image: url(../media/bg_prim_nav.gif); no-repeat; center right; 
    z-index: 900000;
}

My javascript file is the same as listed in the code in previous posts with no changes.

dh783 · 11-25-2011 19:55:30

Change the css for the subfolderstyle, you have a syntax error(s), it should look like

Code:

.subfolderstyle {
    background: url(../media/bg_prim_nav.gif) no-repeat center right; 
    z-index: 4;
}

you have too many semi-colons in the line.

John

ZipSkins · 11-28-2011 03:23:53

The menus appear to be working correctly now, although you probably need to set a width for the lower level category menu items - at present they are being truncated.

I am slightly intrigued by your statement 'No I'm not doing any javascript.' You have a link to femenus.js in the <head> section of the file, so I think you are using javascript - as per dh783's original description.

Nigel

ZipSkins · 12-03-2011 04:54:51

I have come across another issue with these menus - not sure if anybody else has noticed.

There seems to be a limit of 15 items being displayed in a 'child' categories list in the 'fly out' menus. CCP has no such limitation, so all of the sub-categories can be seen if the visitor clicks on the parent category and goes to that category page. However, if the visitor relies on the fly out menus, they will only see the first 15 sub-categories.

In the case I am working on, it will probably be easier to restructure and reduce the number of sub-categories, but this is a limitation that may be worth bearing in mind.

Nigel

dh783 · 12-03-2011 13:08:23

Nigel,

I don't have any menu items with that many sub-categories but there should be nothing in the code to limit the number that can be displayed, fixmyrust is using this mod and does have a sub-category that is showing around 45 choices. Now the basic mod limits the sub-categories to only those that are not main categories with the second database call here

Code:

// +---
// | SLP add for fly out menu. Get menu items that are not main displays.
// +---

$sql  = "SELECT id, name, xcat FROM {$table} WHERE splashdisp=";
$sql .= $this->CORE_DB->quote(0);

$result2 = $this->CORE_DB->sql_do(array('sql'  => $sql,
                                        'table' => $table,
                                        'order' => array('sortorder' => 'ASC')));

//+---------------

it's only looking for categories with there splashdisp set to zero (0 or non-main category) so if any of your main categories are listed as sub-categories of another category then they wouldn't get displayed. I have never test it with it pulling main categories within a sub-category, I am afraid it would get stuck in a loop with out more logic to control such an event.

On another note I have got the menu to work under pure CSS rules, but I will say there really doesn't look like there is one set of rules since it will also depend on other CSS rules present for the site since the rules I have on my site currently didn't work on another CCP site I tried to install it on.

John

ZipSkins · 12-05-2011 03:33:46

Thanks, John.

I think the present project will be revised to reduce the number of sub-categories, but I will try to have a look at it in more detail when I have time to try to identify where the problem lies. I had initially suspected the javascript.

It would certainly be interesting (and preferable) to get it working without javascript, so I will try to investigate in more detail at some stage.

Nigel

dh783 · 12-05-2011 10:21:12

As a jumping off point here is the current CSS rules I have in place for my site's current menu

Code:

#menu {
  width: 12em;
  background: #eee;
}

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #eee;
}

#menu a {
  font: 11px/16px Verdana, Tahoma, Arial, sans-serif;
  display: block;
  border-bottom: 1px solid #CCCCCC;
  margin: 0;
  padding: 2px 3px;
}

#menu a {
  color: #333333;
  background: #efefef;
  text-decoration: none;
}

#menu a:hover {
  color: #a00;
  background: #fff;
}

#menu li {
  position: relative;
}

#menu ul ul {
  position: absolute;
  top: 25%;
  left: 100%;
  width: 100%;
}

div#menu ul ul,
div#menu ul ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {
  display: none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul,
div#menu ul ul ul ul li:hover ul {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #888 #555 #bbb;
  z-index: 4;
}

#menu ul li {
  float: left; width: 100%;
}
#menu ul li a {
  height: 1%;
}

I also changed the division id name in the "Skin Widget Store Categories Menu" include for the menu to reflect the new CSS id name

Code:

 print '<div id="menu">' . $eol;

John

ZipSkins · 12-06-2011 03:35:30

Thanks again, John.

I'll certainly give that a try when I have time.

Nigel

ZipSkins · 12-10-2011 05:00:32

John,

I have had a chance to re-examine both of these issues now. The number of sub-categories is not really limited - I have done a test with 26 dummy sub-categories, and all are displayed. I can only assume that there is a problem with the actual data of the specific sub-categories that are being omitted, but, as the structure is being revised, we will probably revisit the issue if it arises with the revised data.

I also tested the menus without javascript, and it did seem to work, but I must have made a subsequent adjustment that has now stopped it from working! However, I see that the javascript determines which parent categories have sub-categories, thus facilitating the display of the arrow images, so we will probably stay with the javascript version.

Thanks for your advice.

Nigel

Dave4Showcases · 07-02-2012 18:04:02

Sorry to bump such an old thread, but the site I'm working on is using this SuckerTree Vertical Menu and I was wondering if there is a way to keep the longer menus from running off the bottom of the page.

I'm trying to get the longer flyout's to center on the page like it does on threedogsportinggoods.com, but nothing I've tried has worked and I feel like I'm overlooking something obvious.

Kryptronic Software Support Forum

#51 11-19-2011 11:26:09

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#52 11-19-2011 12:23:38

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#53 11-19-2011 22:54:40

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#54 11-20-2011 10:32:06

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#55 11-21-2011 03:41:40

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#56 11-25-2011 09:21:30

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

Code:

#57 11-25-2011 19:55:30

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

Code:

#58 11-28-2011 03:23:53

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#59 12-03-2011 04:54:51

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#60 12-03-2011 13:08:23

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

Code:

#61 12-05-2011 03:33:46

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#62 12-05-2011 10:21:12

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

Code:

Code:

#63 12-06-2011 03:35:30

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#64 12-10-2011 05:00:32

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

#65 07-02-2012 18:04:02

Re: Mod::Dynamic FrontEnd Menu with 3 Sub-Categories Display for ccp7.

Board footer