CSS Dropdown menu for the header- With Categories!

[MeltDown]

Hello! I've just added this menu to my Zen version 1.3.6 and overall everything seems to be fine. There is one minor issue that I'd like to resolve: If you visit this page and mouse-over Categories or Information in the menu, you'll see that the menu goes behind the CSS image Gallery. Any suggestions on how to correct that?

And while I'm at it, could someone also tell me how to remove the grey line at the upper-most part of the page?

Thanks!!

I dealt with the issue by re-arranging the page content, although this certainly doesn't resolve the fact that this issue was occuring. If anyone has comments on why it was occuring I would love to hear them.

Also I would still like to remove that grey line at the upper-most part of the page that seems to be born out of the introduction of this mod.

Thanks!

[MeltDown]

I just noticed another issue: When you click to view the large image, the menu stays on top of the image rather than dimming and going behind. (Example: Click to enlarge)

In in stylesheet_lightbox.css, change the z-index of #overlay to 9000 as reccomended here but to no avail.

This cart is a Zen 1.3.6 and I am using the Zen Lightbox mod.

Thanks for whatever assistance anyone can give!

[webwiz]

OMG what an AWESOME Mod!!

I don't think I've ever had used one that was SO easy to implement! Practically did everything by itself while I just sat here & watched.

My only "issue" (cuz not really a problem) is that it affected the appearance of a couple other things...

#1 - I've now got this white space above my header/logo img. I'm thinking that it's obviously somewhere in the css for this mod, but I don't want to go messing around with the code until I know exactly what to change. Weird thing is...it only appears as white space. If you hover over left side of white space, you actually see links for Home and Log In. ??

#2 - My shop now is "touching" the top/bottom of the browser window, whereas before, I had it set up to have a little spacing above/below the shop. Pardon my lack of exact terminology, lol.

Can someone maybe take a look at my site here and tell me which part(s) I need to tinker with?:
http://www.thesoappeddler.com

Thanks in advance!

P.S. I'm using 1.3.8a, heavily mod'd

[MeltDown]

I just noticed another issue: When you click to view the large image, the menu stays on top of the image rather than dimming and going behind. (Example: Click to enlarge)

In in stylesheet_lightbox.css, change the z-index of #overlay to 9000 as reccomended here but to no avail.

This cart is a Zen 1.3.6 and I am using the Zen Lightbox mod.

Thanks for whatever assistance anyone can give!

I believe I've worked this out: In stylesheet_lightbox.css I increased the z-index on the lightbox to 1000:

#lightbox {
left:0;
line-height:0;
position:absolute;
text-align:center;
top:40px;
width:100%;
z-index:1000;
}

[smoke133]

I just noticed another issue: When you click to view the large image, the menu stays on top of the image rather than dimming and going behind. (Example: Click to enlarge)

In in stylesheet_lightbox.css, change the z-index of #overlay to 9000 as reccomended here but to no avail.

This cart is a Zen 1.3.6 and I am using the Zen Lightbox mod.

Thanks for whatever assistance anyone can give!

Try changing both of the z-index in these two in the stylesheet_lightbox.css.

#lightbox {
left:0;
line-height:0;
position:absolute;
text-align:center;
top:40px;
width:100%;
z-index:10000;
}

#overlay {
-moz-opacity:0.6px;
background-color:#000;
filter:alpha(opacity=60);
height:500px;
left:0;
opacity:0.6px;
position:absolute;
top:0;
width:100%;
z-index:9000;
}

[kburner]

I am still working on categories in my header. I dropped one trying to get all to fit.

Still does not look very good and categories are running together like Homeschool and kids.

Still Need:
1. Categories to line up across -spacing
2. When hover over Christian Living - covers words up

Any suggestions? Kim

www.burnerbooks.com

[Newbie76]

Installed on my 1.3.8a and working like a charm, just got to edit the stylesheet tomorrow to change the colours!


Thankyou for such a great add-on!

[kburner]

I am still working on categories in my header. I dropped one trying to get all to fit.

Still does not look very good and categories are running together like Homeschool and kids.

Still Need:
1. Categories to line up across -spacing
2. When hover over Christian Living - covers words up

Any suggestions? Kim

www.burnerbooks.com

Not sure how to do it...but would like to divide each category up and apply image, spacing...maybe get it to work that way.

I am not good at css. How do I make each category stand alone?
For example, category KJV Bibles would have line of own.

Kim

[timdwyer42]

I am still working on categories in my header. I dropped one trying to get all to fit.

Still does not look very good and categories are running together like Homeschool and kids.

Still Need:
1. Categories to line up across -spacing
2. When hover over Christian Living - covers words up

Any suggestions? Kim

www.burnerbooks.com

Hi I'm looking to put my top catagories across the top like on your site. Can you explain how you did this?

Thanks if you can.

[kburner]

Hi I'm looking to put my top catagories across the top like on your site. Can you explain how you did this?

Thanks if you can.

Someone else within this thread helped me. I went through my files and if I am not mistaken this is where you modify. includes/classes/categories_ul_generator.php. I am not sure where so I included whole file. You may want to use winmerge to see differences.

class zen_categories_ul_generator {
    var $root_category_id = 0,
    $max_level = 6,
    $data = array(),
    $root_start_string = '',
    $root_end_string = '',
    $parent_start_string = '',
    $parent_end_string = '',

    $parent_group_start_string = '<ul%s>',
    $parent_group_end_string = '</ul>',

    $child_start_string = '<li%s>',
    $child_end_string = '</li>',

    $spacer_string = '
    ',
    $spacer_multiplier = 1;

    var $document_types_list = ' (3) ';// acceptable format example: ' (3, 4, 9, 22, 18) '

    function zen_categories_ul_generator($load_from_database = true)
    {
        global $languages_id, $db;
        $this->data = array();
        $categories_query = "select c.categories_id, cd.categories_name, c.parent_id
                             from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                             where c.categories_id = cd.categories_id
                             and c.categories_status=1 " .
                             " and cd.language_id = '" . (int)$_SESSION['languages_id'] . "' " .
                             " order by c.parent_id, c.sort_order, cd.categories_name";
        $categories = $db->Execute($categories_query);
        while (!$categories->EOF) {
          $this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0);
            $categories->MoveNext();
        }
    }

    function buildBranch($parent_id, $level = 1, $submenu=false) {
      if ($parent_id != '0') {
        $result = sprintf($this->parent_group_start_string, ($submenu==true) ? ' class="level'. ($level) . '"' : '' );
      }
        if (($this->data[$parent_id])) {
            foreach($this->data[$parent_id] as $category_id => $category) {
              $category_link = $category_id;
              if (($this->data[$category_id])) {
                $result .= sprintf($this->child_start_string, ($submenu==true) ? ' class="submenu"' : '');
              } else {
                if (($this->data[$category_id]) && ($submenu==false)) {
                  $result .= sprintf($this->parent_group_start_string, ($submenu==true) ? ' class="level'. ($level+1) . '"' : '');
                  $result .= sprintf($this->child_start_string, ($submenu==true) ? ' class="submenu"' : '');
                } else {
                  $result .= sprintf($this->child_start_string, '');
                }
              }
              if ($level == 0) {
                $result .= $this->root_start_string;
              }
              $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
              $result .= $category['name'];
              $result .= '</a>';
              if ($level == 0) {
                $result .= $this->root_end_string;
              }
              if (($this->data[$category_id])) {
                $result .= $this->parent_end_string;
              }
              if (($this->data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
                $result .= $this->buildBranch($category_id, $level+1, $submenu);
              }
              $result .= $this->child_end_string;
            }
        }
        if ($level > 0) {
          $result .= $this->parent_group_end_string;
        }
        return $result;
    }

    function buildTree($submenu=false)
    {
        return $this->buildBranch($this->root_category_id, '', $submenu);
    }
}
?> 

Hope this helps. I have 12-13 categories and I am still trying to get spacing to work. I am hoping someone provides response with "how to" with separating each category and modify each in css file. I am not good at generating new css for each category.

Kim