Zen Cart Logo
Forums / All Other Contributions/Addons / CSS Dropdown menu for the header- With Categories!

CSS Dropdown menu for the header- With Categories!

Views: 615,497

Results 1,921 to 1,940 of 2,344
25 Sep 2010, 7:34 PM
#1921
gmerdan avatar

gmerdan

New Zenner

Join Date:
Mar 2010
Posts:
15
Plugin Contributions:
0

CSS Dropdown menu for the header- With Categories!

gmerdan:

I've tried to search the 200 pages of this thread with no luck.

Instead if displaying "Home, Categories, Information, Contact us, etc" in the horizontal bar. Is it possible to replace these with main categories and the drop down shows sub-categories? Dynamically loading the categories and sub-categories, not adding in manually.

It would look like:
Category 1 | Category 2 | Category 3
|>subcat
|>subcat

Hopefully, a someone can help answer this, and Ive tried include keywords to help others who are trying to search the same thing.
Replace header css flyout with categories and sub categories
Thanks in advance!

Whew...found an answer on page 172.

Replace categories_ul_generator.php with:
Had to modify it for my purpose, but this solved my first question. THANKS GUYS!

<?php
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);
    }
}
?>
26 Sep 2010, 10:27 PM
#1922
gmerdan avatar

gmerdan

New Zenner

Join Date:
Mar 2010
Posts:
15
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Another question,

Is it possible to have all subcategories show up in 3 columns?

Example:
Category 1 | Category 2 | Category 3

|>Cat1Sub1 |>Cat1Sub5 |>Cat1Sub9
|>Cat1Sub2 |>Cat1Sub6 |>Cat1Sub10
|>Cat1Sub3 |>Cat1Sub7 |>Cat1Sub11
|>Cat1Sub4 |>Cat1Sub8 |>Cat1Sub12

27 Sep 2010, 2:45 PM
#1923
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

gmerdan:

Another question,

Is it possible to have all subcategories show up in 3 columns?

Example:
Category 1 | Category 2 | Category 3

|>Cat1Sub1 |>Cat1Sub5 |>Cat1Sub9
|>Cat1Sub2 |>Cat1Sub6 |>Cat1Sub10
|>Cat1Sub3 |>Cat1Sub7 |>Cat1Sub11
|>Cat1Sub4 |>Cat1Sub8 |>Cat1Sub12

You can do that the way i did mine. A little css and product tweaking.

Example

Just go into the header menu, top right and let me know if thats what you mean.

28 Sep 2010, 10:40 AM
#1924
pb4 avatar

pb4

Totally Zenned

Join Date:
Nov 2007
Posts:
555
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Hi,

Please can someone help:cry:...the drop down menu is not working correctly in IE7... see here

As you will be able to see in IE 7(works fine in firefox) the drop down menus are not right. When you roll over the first link the first drop down doesn't fall below the horizontal links but on top and then the same things happens with the other drop down boxes, they cover the top links.

How can we correct this? Any help would be great...

Thanks

28 Sep 2010, 12:01 PM
#1925
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

pb4:

Hi,

Please can someone help:cry:...the drop down menu is not working correctly in IE7... see here

As you will be able to see in IE 7(works fine in firefox) the drop down menus are not right. When you roll over the first link the first drop down doesn't fall below the horizontal links but on top and then the same things happens with the other drop down boxes, they cover the top links.

How can we correct this? Any help would be great...

Thanks

You'll need to find the correct 'top' command for that menu, but i'm pretty sure its:

div#dropMenu ul.level2

and add:

div#dropMenu ul.level2 {
top:25px;
}

and adjust the 'px' to suit.

28 Sep 2010, 12:24 PM
#1926
pb4 avatar

pb4

Totally Zenned

Join Date:
Nov 2007
Posts:
555
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

first trading:

You'll need to find the correct 'top' command for that menu, but i'm pretty sure its:

div#dropMenu ul.level2

and add:

div#dropMenu ul.level2 {
top:25px;
}

and adjust the 'px' to suit.

:clap: Thank you...that has sorted that issue :smile:

28 Sep 2010, 4:42 PM
#1927
juzjojo avatar

juzjojo

New Zenner

Join Date:
Nov 2008
Location:
Ontario, Canada
Posts:
72
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Just a couple of questions..
Here's the site Im currently working on http://redscarfunion.ca/store/

  1. If I want to hit the "home" button I end up getting the dropdown menu instead and a little box to the right which is the link to the home button.
    Is there a way to ensure the dropdown menus dont overlap the main menu buttons?
  2. I am now faced with the zen cart logo being back.. where do I change this.. I cannot figure it out..
  3. I had at one point my sidebox (wide) with my ssl, paypal, facebook and twitter icons.. now when I do them the are outside of the white area..instead of inside

Hoping what I've asked makes sense

28 Sep 2010, 4:54 PM
#1928
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Everything looks perfect to me, have you sorted this out...?

28 Sep 2010, 6:09 PM
#1929
juzjojo avatar

juzjojo

New Zenner

Join Date:
Nov 2008
Location:
Ontario, Canada
Posts:
72
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

No its not sorted..
I've included an image for you to look at ..
When I installed this menu..it bumped out my header and icons..

28 Sep 2010, 11:28 PM
#1930
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

JuzJoJo:

No its not sorted..
I've included an image for you to look at ..
When I installed this menu..it bumped out my header and icons..

Post #1925, this answers your question and fixes the problem you are having.

29 Sep 2010, 12:33 AM
#1931
mortalwombat avatar

mortalwombat

Zen Follower

Join Date:
Jul 2010
Location:
Australia
Posts:
131
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Hi

I am yet another person having trouble with IE...

I'm not sure what is causing the problem for me - the menu simply doesn't fly out in IE, but works fine in Firefox.

You can see my site here.

Does anyone have any idea how to fix this?

Thanks,
Tija

29 Sep 2010, 4:00 AM
#1932
juzjojo avatar

juzjojo

New Zenner

Join Date:
Nov 2008
Location:
Ontario, Canada
Posts:
72
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

The menu part I figured out..but..
What about my logo..when I installed the mod it bumped my logo down below it and put a zen cart logo above it..
I need to remove that logo and replace it with mine..
My icons also got bumped out and I need them to be back in the "white background" of the page

29 Sep 2010, 9:52 AM
#1933
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

JuzJoJo:

The menu part I figured out..but..
What about my logo..when I installed the mod it bumped my logo down below it and put a zen cart logo above it..
I need to remove that logo and replace it with mine..
My icons also got bumped out and I need them to be back in the "white background" of the page

Your logo can be changed in:

inlcludes/languages/english/header.php
or
inlcudes/languages/classic/english/header.php

You can put your own image here and adjust the width and height. You can then style this in your stylesheet.

#logo {
YOUR_STYLES
}

29 Sep 2010, 9:55 AM
#1934
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

MortalWombat:

Hi

I am yet another person having trouble with IE...

I'm not sure what is causing the problem for me - the menu simply doesn't fly out in IE, but works fine in Firefox.

You can see my site here.

Does anyone have any idea how to fix this?

Thanks,
Tija

It works fine in IE at my end, did you sort this out...?

You also need to see post #1925 to get the drop downs to display correctly in IE7, but other than that they all fly out in all browsers.

2 Oct 2010, 6:12 AM
#1935
juzjojo avatar

juzjojo

New Zenner

Join Date:
Nov 2008
Location:
Ontario, Canada
Posts:
72
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Finally got this sorted out .. thanks!

2 Oct 2010, 11:50 AM
#1936
mortalwombat avatar

mortalwombat

Zen Follower

Join Date:
Jul 2010
Location:
Australia
Posts:
131
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

first trading:

It works fine in IE at my end, did you sort this out...?

You also need to see post #1925 to get the drop downs to display correctly in IE7, but other than that they all fly out in all browsers.

No, unfortunately I haven't yet fixed this problem.

The problem I'm having is obviously associated with IE6... I rarely, if ever, use IE and don't run IE7.

So - I've had a look at a few people's sites who've posted here. None that I looked at work on IE6 -- one site I had a look at was this site that you mentioned a while ago.

No problems with margins or such - the menus simply don't drop down.

I guess there aren't too many people running lower than IE7 lately, but, for those who do, it is a little frustrating to have non-functioning menus.

Any ideas how *this *can be fixed?

Thanks again - I appreciate any help on the matter.

2 Oct 2010, 5:15 PM
#1937
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

There are plenty of people who follow all the stats etc of all browsers on this forum. I'm no expert but i think google are no longer supporting IE6.

If i understand correctly also, its usually business's that tend to use older browsers, simply because they rarely update them, so i guess if you are targeting business then it might be important.

The site in your post is one of mine, and that site in paticular i'm not bothered about IE6.

According to W3 IE6 counts for 6.7% of web users and thats August, i'm guessing September will be less.

2 Oct 2010, 11:33 PM
#1938
first_trading avatar

first_trading

Zen Follower

Join Date:
Aug 2008
Posts:
244
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

MortalWombat:

No, unfortunately I haven't yet fixed this problem.

The problem I'm having is obviously associated with IE6... I rarely, if ever, use IE and don't run IE7.

So - I've had a look at a few people's sites who've posted here. None that I looked at work on IE6 -- one site I had a look at was this site that you mentioned a while ago.

No problems with margins or such - the menus simply don't drop down.

I guess there aren't too many people running lower than IE7 lately, but, for those who do, it is a little frustrating to have non-functioning menus.

Any ideas how *this *can be fixed?

Thanks again - I appreciate any help on the matter.

I believe if you google IE6 CSS drop down menu............you'll find some useful info. There is a Java work around. And some info on using anchor elements and :hover.

3 Oct 2010, 3:57 AM
#1939
mortalwombat avatar

mortalwombat

Zen Follower

Join Date:
Jul 2010
Location:
Australia
Posts:
131
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

first trading:

I believe if you google IE6 CSS drop down menu............you'll find some useful info. There is a Java work around. And some info on using anchor elements and :hover.

Thanks for this.

I spent longer than I expected looking for what you've suggested, but still haven't come across a solution.

Is there anything that you could point me directly to?

5 Oct 2010, 9:30 PM
#1940
tor86 avatar

tor86

New Zenner

Join Date:
Sep 2010
Location:
Leamington Spa, UK
Posts:
31
Plugin Contributions:
0

Re: CSS Dropdown menu for the header- With Categories!

Hello,

I've just installed this addon but for some reason it makes everything below the header.php tag disappear. I'm using the latest version of Zen Cart, and have quite a few different addons. Has anyone encountered this before? I'm not a coder so I imagine it might be an easy fix..

Thanks in advance :)

Tor