CSS Dropdown menu for the header- With Categories!

Baller#23:

Sorry, you are right. I was thinking of somebody else...

I inserted the images as you said, and everything works fine. Thanks!

But when I hover over the images, there is still the rectangular box. Is there a way to solve that problem?

And when I click on a one of my Categories for example the site moves over and my buttons dont align with the rest of my page.

My URL is https://www.psqinone.com

Thank you so much for you help. You are great!:smile:

Are you still having either of these issues? I don't see these issues in Firefox.

jettrue:

Just for fun, save a copy of your current stylesheet.css, then upload the ORIGINAL classic stylesheet, and see if the issue goes away. Then we'll know whether or not the issue is in the css.

Thank you for the reply:smile:

I have uploaded the original stylesheet.css from the original ZC Cart files and there is a little bit of difference in it now, part of the tile_back.gif is now showing.

It's a bit more messed up in IE7, the drop menu is now over the logo, I guess that is due to the logowrapper dimensions (100 px needed)

Not bothered about the width changing at the moment, I can alter that later.

http://www.impactflies.com/fly_shop/

Impact-Flies:

Thank you for the reply:smile:

I have uploaded the original stylesheet.css from the original ZC Cart files and there is a little bit of difference in it now, part of the tile_back.gif is now showing.

It's a bit more messed up in IE7, the drop menu is now over the logo, I guess that is due to the logowrapper dimensions (100 px needed)

Not bothered about the width changing at the moment, I can alter that later.

http://www.impactflies.com/fly_shop/

Re-upload your previous stylesheet, and then change this section to this:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	padding: 0em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	}

That's got it :clap:

Thank you so much for your attention :smile:

I must have changed all of the figures with the web developer toolbar css feature except of course the correct ones :frusty:

I am trying to replace the category generator in tpl_drop_menu.php and want to manually add individual categories (such as "Music Genres") in the dropdown menu. What line of code would I need to insert?:unsure:

Ingham QLD:

I am trying to replace the category generator in tpl_drop_menu.php and want to manually add individual categories (such as "Music Genres") in the dropdown menu. What line of code would I need to insert?:unsure:

Open up includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php and remove this chunk:

          <?php

// load the UL-generator class and produce the menu list dynamically from there
require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
$zen_CategoriesUL = new zen_categories_ul_generator;
$menulist = $zen_CategoriesUL->buildTree(true);
$menulist = str_replace('"level4"','"level5"',$menulist);
$menulist = str_replace('"level3"','"level4"',$menulist);
$menulist = str_replace('"level2"','"level3"',$menulist);
$menulist = str_replace('"level1"','"level2"',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
$menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
echo $menulist;
?>

and in its place, manually add the links you want, following the drop menu link structure. You can view the source of your site before you remove the generator chunk, copy the categories chunk, then just replace the category links you want, and past it back in tpl_drop_menu.php.

The part I'm struggling with is what code to use when I am inserting categories such as "Music Genres". FILENAME is not the correct file to draw from. What should I use instead?

Here's my example:

Ingham QLD:

The part I'm struggling with is what code to use when I am inserting categories such as "Music Genres". FILENAME is not the correct file to draw from. What should I use instead?

Here's my example:

<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a> <ul class="level2"> <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_NEW); ?>"><?php echo HEADER_TITLE_NEW_PRODUCTS; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_GENRES_MUSIC); ?>"><?php echo HEADER_TITLE_MUSIC_GENRES; ?></a></li> </ul> </li>

Stop trying to use PHP, just make actual links.
<a href="link_here">Name of Link Here</a>

Ah ha!! Now I see what you're getting at:yes:I can get that to work.

However, if I want to add the subcategory links (as a menulist?) what should I insert before those links?

Ingham QLD:

Ah ha!! Now I see what you're getting at:yes:I can get that to work.

However, if I want to add the subcategory links (as a menulist?) what should I insert before those links?

View the source of your page before removing the automatic category generator, or view the source of my test page (http://www.zencart137.jadetrue.com) to get the layout of the menu to follow.

Sorry, I didn't communicate adequately.

I have the links I need for the subcategories. However, I am wanting to place them on the next sublevel of the menu. Am I supposed to change this line of code (<ul class="level2">) to something else?

marksu:

Well never mind.

I made the changes my self it was mutch simpler than I thought.

Not sure if anyone care as not mutch communication hre but if somebody need solution here it is.

It is based on my earlier design which enables to add ezpaged filtering which groups they belong.

It would be even better code if it could outomatically check if multi languge expages module is installed instead of using comments character. Wen I dont know how to do it so this will do.

// --------------------

If ($chapNumber != ""){

// USE THIS IS MULTI-LANGUGE EZPAGES MODULE NOT INSTALLED
// $page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where toc_chapter = " . $chapNumber . " and status_header = 1 order by header_sort_order, pages_title");

// USE THIS IS MULTI-LANGUGE EZPAGES MODULE IS INSTALLED
// query modified for multi-language support
$page_query = $db->Execute("select e.pages_id, e.page_open_new_window, e.page_is_ssl, e.alt_url, e.alt_url_external, et.pages_title
from " . TABLE_EZPAGES . " e, " . TABLE_EZPAGES_TEXT . " et
where toc_chapter = " . $chapNumber . " and e.pages_id = et.pages_id
and et.languages_id = '" . (int)$_SESSION['languages_id'] . "'
and status_header = 1
and header_sort_order > 0
order by header_sort_order, pages_title");
// end of modification

} else

{
// USE THIS IS MULTI-LANGUGE EZPAGES MODULE NOT INSTALLED
$page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where status_header = 1 order by header_sort_order, pages_title");

// USE THIS IS MULTI-LANGUGE EZPAGES MODULE IS INSTALLED
// query modified for multi-language support
$page_query = $db->Execute("select e.pages_id, e.page_open_new_window, e.page_is_ssl, e.alt_url, e.alt_url_external, et.pages_title
from " . TABLE_EZPAGES . " e, " . TABLE_EZPAGES_TEXT . " et
where e.pages_id = et.pages_id
and et.languages_id = '" . (int)$_SESSION['languages_id'] . "'
and status_header = 1
and header_sort_order > 0
order by header_sort_order, pages_title");
// end of modification
}
// --------------------

marksu

marksu:

Any specific location within the file to place the above code? I'm drawing a blank how the suggested code should be in ezpages_drop_menu.php.

Thanks in advance...

Ingham QLD:

Sorry, I didn't communicate adequately.

I have the links I need for the subcategories. However, I am wanting to place them on the next sublevel of the menu. Am I supposed to change this line of code (<ul class="level2">) to something else?

My advice is, not to get the LINKS you need for subcategories, but to get the LAYOUT of how subcategories work, and what code you need for them. My site has quite a few subcategories, and even subcategories within subcategories, so that you can see the format required. For example:

<li class="submenu"><a href="index.php?main_page=site_map">Categories</a>
  <ul class="level2">
    <li> <a href="index.php?main_page=index&cPath=1">FREE Zen Cart Templates</a></li>
    <li class="submenu"> <a href="index.php?main_page=index&cPath=2">Testing 2</a>
      <ul class="level3">
        <li class="submenu"> <a href="index.php?main_page=index&cPath=2_3">Testing Subcategory</a>
          <ul class="level4">
            <li> <a href="index.php?main_page=index&cPath=2_3_14">Sub Sub</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="index.php?main_page=index&cPath=16">Testing Category 3</a></li>
    <li class="submenu"> <a href="index.php?main_page=index&cPath=17">Testing Category 4</a>
      <ul class="level3">
        <li class="submenu"> <a href="index.php?main_page=index&cPath=17_18">Level 2</a>
          <ul class="level4">
            <li class="submenu"> <a href="index.php?main_page=index&cPath=17_18_20">Level 3</a>
              <ul class="level5">
                <li class="submenu"> <a href="index.php?main_page=index&cPath=17_18_20_21">Level 4</a>
                  <ul class="level5">
                    <li class="submenu"> <a href="index.php?main_page=index&cPath=17_18_20_21_22">Level 5</a>
                      <ul class="level6">
                        <li class="submenu"> <a href="index.php?main_page=index&cPath=17_18_20_21_22_23">Level 6</a>
                          <ul class="level7">
                            <li> <a href="index.php?main_page=index&cPath=17_18_20_21_22_23_24">Level 7</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>

The layout was exactly what I wanted. Yippee!!

Everything is now working beautifully:bigups:

Thank you, Jade:clap:

I just installed the CSS Flyout header 1.5 and followed the read me and kept the folder structure, unzipped it, and added it to my current template. It is up there so i know it worked. However when i click the link on the menu bar none of my content comes up. I have a site that has products, pictures, and text however you cant see anything except for the menu bar, and a few other links. Please help if you can thanks...To see this in action go here

http://www.wpc-consulting.com/~stxmill/

Jade (or anyone else):

Do you have any idea where the code in http://www.zen-cart.com/forum/showpost.php?p=555592&postcount=992 is supposed to go or how it is supposed to replace existing queries? marksu doesn't seem to be responding.

Thanks in advance,

pheniks:

Jade (or anyone else):

Do you have any idea where the code in http://www.zen-cart.com/forum/showpost.php?p=555592&postcount=992 is supposed to go or how it is supposed to replace existing queries? marksu doesn't seem to be responding.

Thanks in advance,

I'm not sure, though I'm guessing it might belong in modules/sideboxes/YOUR_TEMPLATE/ezpages_drop_menu.php page not tpl_drop_menu.php since it has sql queries in it.

welchyboy:

I just installed the CSS Flyout header 1.5 and followed the read me and kept the folder structure, unzipped it, and added it to my current template. It is up there so i know it worked. However when i click the link on the menu bar none of my content comes up. I have a site that has products, pictures, and text however you cant see anything except for the menu bar, and a few other links. Please help if you can thanks...To see this in action go here

http://www.wpc-consulting.com/~stxmill/

It works in Firefox. Did you read the readme.txt, and follow the instructions to get the menu to work in browsers prior to IE7?

jettrue:

I'm not sure, though I'm guessing it might belong in modules/sideboxes/YOUR_TEMPLATE/ezpages_drop_menu.php page not tpl_drop_menu.php since it has sql queries in it.

Jade:

You rock!:clap:

I can't be sure why it worked, but it just did.

Would it be cool for me to put together a package set up with the Multi Language EZPages support built in and send it to you to publish?

Thanks so much, again.

:huh: I hope someone can help me. I've tried to install this menu twice and both times I end up with this.

http://www.lagunajewelers.com/index.php?main_page=index&zenid=f7c418b4797e6b43f44387963a0c4214

I've only been working with zen cart for a couple of days so I'm sure I have made some newbie mistake.. anyone have any ideas?

Thanks so much.

Victoria