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,547

Results 1,741 to 1,760 of 2,344
2 Jan 2010, 9:10 PM
#1741
pritchb avatar

pritchb

New Zenner

Join Date:
Dec 2009
Posts:
16
Plugin Contributions:
0

CSS Dropdown menu for the header- With Categories!

Thank-you Alepia! The logo is gone!

Since you are so helpfull, could you take a look at my site (https://www.newtools4you.com) and look at the Header. Do you see how the Home and Login links do not line up correctly?

Could you tell me how to fix this? It should be located within the boundaries of the web page.

2 Jan 2010, 9:36 PM
#1742
alepia avatar

alepia

Zen Follower

Join Date:
Dec 2008
Posts:
158
Plugin Contributions:
0

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

Bexley:

Hi Can anybody tell me how to change the color from green to blue when hover over the menu bar top level menu.
I have tried stylesheet_header_menu.css and all I can do is change the green to blue on the second layer.
Any help most appreciated.
Steve - From a land down under
Just go to the stylesheet file, i mean stylesheet_header_menu.css in .../includes/templates/css
at line 6 ( ca.) you will find that > div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;} change background color with the one you prefer!
Hope to have been clear ;)

2 Jan 2010, 9:46 PM
#1743
alepia avatar

alepia

Zen Follower

Join Date:
Dec 2008
Posts:
158
Plugin Contributions:
0

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

pritchb:

Thank-you Alepia! The logo is gone!

Since you are so helpfull, could you take a look at my site (https://www.newtools4you.com) and look at the Header. Do you see how the Home and Login links do not line up correctly?

Could you tell me how to fix this? It should be located within the boundaries of the web page.
well as you have installed the css dropdown menu... I don't think you need another menu in your header...
so you need to handle again with the tpl_header.php file.
I think you need to delete this from your tpl_header :> <div id="navMainWrapper">

<div id="navMain"> <div id="navMainLinks"> <ul class="back"> <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li> <?php if ($_SESSION['customer_id']) { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li> <?php } else { if (STORE_STATUS == '0') { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li> <?php } } ?> <?php if ($_SESSION['cart']->count_contents() != 0) { ?> <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li> <?php }?> </ul> </div> <div id="navMainSearch"> <?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?> </div> </div> </div> <div class="clearBoth"></div>

Remember to do a backup! This should work ;) nice website btw

4 Jan 2010, 12:54 AM
#1744
pritchb avatar

pritchb

New Zenner

Join Date:
Dec 2009
Posts:
16
Plugin Contributions:
0

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

Alepia,

I changed my mind and decided to put the logo back, which I did. As you can see (NewTools4You.com) the logo is not positioned properly. I assume that the position is controlled in the TPL_Header file but I could not see any reference to it.

Also, I would like to move my "Prices dropping" pic in the middle of and have a shopping cart on the right.

How would I go about this?

Thanks so much for your help and suggestions. I am trying to fix the backround now.

4 Jan 2010, 3:18 PM
#1745
bexley avatar

bexley

New Zenner

Join Date:
Dec 2009
Location:
Perth Western Australia
Posts:
47
Plugin Contributions:
0

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

alepia:

Just go to the stylesheet file, i mean stylesheet_header_menu.css in .../includes/templates/css
at line 6 ( ca.) you will find that change background color with the one you prefer!
Hope to have been clear ;)

Thanks that worked great
my skill with PHP is getting better but I have a long way to go yet
Steve ( From a land down under)

4 Jan 2010, 6:20 PM
#1746
bexley avatar

bexley

New Zenner

Join Date:
Dec 2009
Location:
Perth Western Australia
Posts:
47
Plugin Contributions:
0

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

alepia:

Just go to the stylesheet file, i mean stylesheet_header_menu.css in .../includes/templates/css
at line 6 ( ca.) you will find that change background color with the one you prefer!
Hope to have been clear ;)

Bexley:

Thanks that worked great
my skill with PHP is getting better but I have a long way to go yet
Steve ( From a land down under)

Could you also tell me how I can center the drop down menu items instead of left align as my site can expand to cope with different size monitors. The top menu text centers just great but the drop down always left aligns and I think it might look nice centered at least the first level drop down the rest could be left aligned to that.
help is most appreciated until I can contribute.
Site is still under development but is http://www.bexley.net.au/bshop
Steve - From a land down under

4 Jan 2010, 7:15 PM
#1747
andreitero avatar

andreitero

Zen Follower

Join Date:
Dec 2009
Posts:
207
Plugin Contributions:
0

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

What a big joke this forum is!!!!
The search is crap,cant find anything!
I know my question is not so hard for most of you!

4 Jan 2010, 8:23 PM
#1748
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

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

Actually, what you are asking about is essentially merging two mods that each use the same base file. Something as fundamental as the way the categories tree is generated will probably not be possible to just merge; one of the mods would need to be rewritten to call a differently-named version of the file so the two can operate in their own ways at the same time.

I doubt anyone is fully familiar with the code in both of those mods, so it would require some research to begin to be able to answer you.

4 Jan 2010, 9:51 PM
#1749
lat9 avatar

lat9

Administrator

Join Date:
Sep 2009
Location:
Stuart, FL
Posts:
14,065
Plugin Contributions:
56

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

Great mod, installed like a dream and the CSS is teaching me stuff I didn't know was possible!

I've created a tab-shape gif for my li.level1 items, so I don't want the hover-color to show when I (ahem) hover on them. I tried adding

div#dropMenu ul.level1 li a:hover{ background-color: none!important; }

to the bottom of stylesheet_header_menu.css, but no joy. Anyone care to offer up a CSS incantation to remove the background color from the level1 items?

4 Jan 2010, 10:27 PM
#1750
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

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

Is it
li.level1
or
ul.level1 li ?

It makes a difference. Seeing it live would be the easiest way to tell exactly what is going on.

4 Jan 2010, 11:54 PM
#1751
lat9 avatar

lat9

Administrator

Join Date:
Sep 2009
Location:
Stuart, FL
Posts:
14,065
Plugin Contributions:
56

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

It's here

5 Jan 2010, 4:06 AM
#1752
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

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

I've tried every combination I can think of that would be applicable to the location, and none of them affects it. I can't look at it any more tonight.

6 Jan 2010, 4:10 PM
#1753
andreitero avatar

andreitero

Zen Follower

Join Date:
Dec 2009
Posts:
207
Plugin Contributions:
0

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

gjh42:

I've tried every combination I can think of that would be applicable to the location, and none of them affects it. I can't look at it any more tonight.

Thanks a lot for taking an interest. The Css drop-down menu and click-show-hide categories can be seen here: https://www.andila.co.uk

This is the code that generates the categories for the Category sidebox: ```
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 = '%s<ul>',
$parent_group_end_string = '%s</ul>',
$child_start_string = '%s<li>',
$child_end_string = '%s</li>',
$spacer_string = '',
$spacer_multiplier = 1;
var $document_types_list = ' (3) '; // acceptable format example: ' (3, 4, 9, 22, 18) '

function zen_categories_ul_generator() {
global $languages_id, $db, $request_type;
$this->server = ((ENABLE_SSL == true && $request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER);
$this->base_href = ((ENABLE_SSL == true && $request_type == 'SSL') ? DIR_WS_HTTPS_CATALOG : DIR_WS_CATALOG);
$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) {
$products_in_category = (SHOW_COUNTS == 'true' ? zen_count_products_in_category($categories->fields['categories_id']) : 0);
$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => $products_in_category);
$categories->MoveNext();
}
// DEBUG: These lines will dump out the array for display and troubleshooting:
// foreach ($this->data as $pkey=>$pvalue) {
// foreach ($this->data[$pkey] as $key=>$value) { echo '['.$pkey.']'.$key . '=>' . $value['name'] . '<br>'; }
// }
}

function buildBranch($parent_id, $level = 0, $cpath = '') {
global $cPath;
$result = "\n".sprintf($this->parent_group_start_string, str_repeat(' ', $level4))."\n";
if (isset($this->data[$parent_id])) {
foreach ($this->data[$parent_id] as $category_id => $category) {
$result .= sprintf($this->child_start_string, str_repeat(' ', $level
4+2));
if (isset($this->data[$category_id])) {
$result .= $this->parent_start_string;
}
if ($level == 0) {
$result .= $this->root_start_string;
$new_cpath = $category_id;
} else {
$new_cpath = $cpath."_".$category_id;
}
if ($cPath == $new_cpath) {
$result .= '<a href="javascript:void(0)" class="on">'; // highlight current category & disable link
} else {
$result .= '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $new_cpath) . '">';
}
$result .= $category['name'];
if (SHOW_COUNTS == 'true' && ((CATEGORIES_COUNT_ZERO == '1' && $category['count'] == 0) || $category['count'] >= 1)) {
$result .= CATEGORIES_COUNT_PREFIX . $category['count'] . CATEGORIES_COUNT_SUFFIX;
}
$result .= '</a>';
if ($level == 0) {
$result .= $this->root_end_string;
}
if (isset($this->data[$category_id])) {
$result .= $this->parent_end_string;
}
if (isset($this->data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
$result .= $this->buildBranch($category_id, $level+1, $new_cpath);
$result .= sprintf($this->child_end_string, str_repeat(' ', $level4+2))."\n";
} else {
$result .= sprintf($this->child_end_string, '')."\n";
}
}
}
$result .= sprintf($this->parent_group_end_string, str_repeat(' ', $level
4))."\n";
return $result;
}

function buildTree() {
return $this->buildBranch($this->root_category_id, 0);
}
}
?>


and this is the code for the css flyout menu:

class zen_categories_ul_generator {
var $root_category_id = 0,
$max_level = 0,
$data = array(),
$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, $submenu=true, $parent_link='')
{
    $result = sprintf($this->parent_group_start_string, ($submenu==true) ? ' class="level'. ($level+1) . '"' : '' );
    
    if (($this->data[$parent_id])) {
        foreach($this->data[$parent_id] as $category_id => $category) {
            $category_link = $parent_link . $category_id;
            if (($this->data[$category_id])) {
                $result .= sprintf($this->child_start_string, ($submenu==true) ? ' class="submenu"' : '');
            } else {
                $result .= sprintf($this->child_start_string, '');
            }
            $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * 1) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
            $result .= $category['name'];
            $result .= '</a>';
			  
            if (($this->data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
                $result .= $this->buildBranch($category_id, $level+1, $submenu, $category_link . '_');
            }
            $result .= $this->child_end_string;
        }
    }
    
    $result .= $this->parent_group_end_string;
    return $result;
}

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

}
?>


I tried to change the name of one of them to category_ul_generator1.php and it doesnt seem to work like that.
10 Jan 2010, 12:59 AM
#1754
kaskudoo avatar

kaskudoo

New Zenner

Join Date:
Jan 2010
Posts:
16
Plugin Contributions:
0

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

Hey,

I love this mod. Looks awesome. Gotta question though :D

Found a solution .... So, instead of asking - I am just saying thanks :-P

PS. Respect Jade! (this is coming from a Dad of a 10 month old)

13 Jan 2010, 10:19 PM
#1755
vooboo13 avatar

vooboo13

New Zenner

Join Date:
Dec 2009
Posts:
55
Plugin Contributions:
0

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

Hey guys,

In IE7 and lower, the nav is all sorts of screwed up. I tried putting in the .htaccess file that allows it to run the .htc file (this may be Paul's version that added that), but either doesn't show up, or shows up in the wrong areas.

Anyone have any ideas?

https://www.robomatter.net

15 Jan 2010, 10:13 PM
#1756
lina0962 avatar

lina0962

Zen Follower

Join Date:
Jun 2006
Posts:
403
Plugin Contributions:
0

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

After I upgraded my computer from IE7 to IE8, my websites drop down menu are broken. I have click on "compatibility view" each time to make it look right. How about my customers who don't know such thing as "compatibility view"?

Did anybody have the same problem?

What can I do fix this problem so that everybody can view my website right, no matter they are using IE7 or IE8?

My sites are:
http://www.roseforlove.com
http://www.thesbeauty.com

19 Jan 2010, 12:17 AM
#1757
scottwww1 avatar

scottwww1

New Zenner

Join Date:
Jun 2009
Location:
Otorohanga, New Zealand
Posts:
25
Plugin Contributions:
0

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

lina0962:

After I upgraded my computer from IE7 to IE8, my websites drop down menu are broken. I have click on "compatibility view" each time to make it look right. How about my customers who don't know such thing as "compatibility view"?

Did anybody have the same problem?

What can I do fix this problem so that everybody can view my website right, no matter they are using IE7 or IE8?

My sites are:
http://www.roseforlove.com
http://www.thesbeauty.com

Can you break down the Jade with .... section so these will be a drop down instead all across the top, all the space for each cata, decrease this

Richard Scott
:bigups:

19 Jan 2010, 12:20 AM
#1758
scottwww1 avatar

scottwww1

New Zenner

Join Date:
Jun 2009
Location:
Otorohanga, New Zealand
Posts:
25
Plugin Contributions:
0

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

lina0962:

After I upgraded my computer from IE7 to IE8, my websites drop down menu are broken. I have click on "compatibility view" each time to make it look right. How about my customers who don't know such thing as "compatibility view"?

Did anybody have the same problem?

What can I do fix this problem so that everybody can view my website right, no matter they are using IE7 or IE8?

My sites are:
http://www.roseforlove.com
http://www.thesbeauty.com

Have you sorted this as it is working when I tested and with FireFox

Richard

21 Jan 2010, 6:47 PM
#1759
lina0962 avatar

lina0962

Zen Follower

Join Date:
Jun 2006
Posts:
403
Plugin Contributions:
0

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

scottwww1:

Have you sorted this as it is working when I tested and with FireFox

Richard

scottwww1:

Can you break down the Jade with .... section so these will be a drop down instead all across the top, all the space for each cata, decrease this

Richard Scott
:bigups:

hello, Richard:

Not quite understanding your anwer... could you please specify it in more details? Thanks a lot!!!

23 Jan 2010, 4:07 AM
#1760
besparkling avatar

besparkling

New Zenner

Join Date:
Sep 2009
Posts:
11
Plugin Contributions:
0

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

Hi I have a really complicate question regarding the conflict of drop down menu embeded in AppleZen and JGallery.

I installed Jgallery first and found out when I go to Gallery page, there will be some error notice in drop down menu, which is like: Notice: Undefined offset: 2 in /mnt/w0911/d02/s16/b0316c3a/www/clipontogo.com/includes/classes/categories_ul_generator.php on line 63

Notice: Undefined offset: 2 in /mnt/w0911/d02/s16/b0316c3a/www/clipontogo.com/includes/classes/categories_ul_generator.php on line 72
you can see it live here: http://clipontogo.com//index.php?main_page=gallery
the menu in the bottom of the page belongs to tpl_main_page.php

After million times of trying I found if I move the drop down menu section from tpl_main_page.php to tpl_header.php, the problem will be automaticly solved, but only in FIREFOX! When I browse it in IE7, the drop down menu will not have level2,3...anymore...
You can see it live in the same address: http://clipontogo.com//index.php?main_page=gallery
the menu below the branding is belong to tpl_header.php

So my question is:
1, Is there anyway to use Jgallery normally in AppleZen without messing up the drop down menu?
2, If move the drop menu section from tpl_main_page.php to tpl_header.php is a correct method, why it's not showing normal in IE7? Any way to fix it?

Thanks a lot!!!!!!
Vanessa