Forums / Templates, Stylesheets, Page Layout / CSS Rollover for EZ Pages Nav Buttons

CSS Rollover for EZ Pages Nav Buttons

Views: 1,529

Results 1 to 13 of 13
21 Jun 2011, 8:09 PM
#1
caesartrading avatar

caesartrading

New Zenner

Join Date:
May 2010
Location:
Whitchurch, Hampshire, UK
Posts:
71
Plugin Contributions:
0

CSS Rollover for EZ Pages Nav Buttons

Hello all,

Basically, I'm trying to add CSS dropdown menus that appear when hovering over the EZ Pages links in my Nav bar.

http://www.the-ishop.co.uk is where I need to put it.

As you can see, I have Apple, Blackberry and other buttons across the top, but there is a category attached to each button.
What I need to do is when hovering over the button, the subcategory names (in this case, each sub category is an individual device e.g. iPhone 4, iPad etc).

I downloaded the CSS Flyout Menu, but realised that this isn't what I need, as I don't want the categories on the side (trying to make my UI a little cleaner and simpler.)

Hope I made sense!

Cheers

The iShop: Make it Yours

Apple, BlackBerry, HTC, Samsung and Audio Accessories www.the-ishop.co.uk

21 Jun 2011, 8:31 PM
#3
caesartrading avatar

caesartrading

New Zenner

Join Date:
May 2010
Location:
Whitchurch, Hampshire, UK
Posts:
71
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

Yes, that's the one! I found that a while ago, but for the life of me couldn't find it...

You Sir, are a genius.

The iShop: Make it Yours

Apple, BlackBerry, HTC, Samsung and Audio Accessories www.the-ishop.co.uk

21 Jun 2011, 9:03 PM
#4
caesartrading avatar

caesartrading

New Zenner

Join Date:
May 2010
Location:
Whitchurch, Hampshire, UK
Posts:
71
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

Got to be honest, it's incredibly difficult to install.... All the readme files are a mess, they're hard to read, and the instructions aren't very clear...

The iShop: Make it Yours

Apple, BlackBerry, HTC, Samsung and Audio Accessories www.the-ishop.co.uk

21 Jun 2011, 11:04 PM
#5
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

caesartrading:

I'm trying to add CSS dropdown menus that appear when hovering over the EZ Pages links in my Nav bar.

As far as I am aware, there is no mod that allows drop-down on the EZpages header menu... (what is there to "drop down" in an EZPage?

20 years a Zencart User

21 Jun 2011, 11:11 PM
#6
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

We did quite a big "tweak" on the APPLE-ZEN template to get the effect you are after:

http://www.callmecupcakes.co.uk/

The CSS dropdown menu is a key feature of that template.

You can't invoke dropdowns on the ezpages menu becuase there in no inherent "page hierarchy".

It IS possible to "tweak" the css dropdown system to incorporate some EZ pages into the nav-bar.

You may actually do better by invoking NavCatTabs... The difficulty is combining the usefulness of ezpages AND the function of categories in a single header menu...

20 years a Zencart User

21 Jun 2011, 11:15 PM
#8
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

Then, if you get that right, you could try the module that creates dropdowns for the NavCatTabs menu.

We managed to do that here:

http://www.karenscakes.co.uk/newstore/

20 years a Zencart User

22 Jun 2011, 11:48 AM
#9
caesartrading avatar

caesartrading

New Zenner

Join Date:
May 2010
Location:
Whitchurch, Hampshire, UK
Posts:
71
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

Thanks for the heads up schoolboy RE the lack of EZ page button tweakability, much appreciated!

Is there any easy way in which I can add a navigation bar to the top of my page, and then have drop down menus from each category (displaying the sub cats in the menu)?

I'm not going to die on my sword over shedding the EZ pages Nav bar if I need to, but it is nice and easy to use. (Hence the name!)

My main issue with the CSS Dropdown Menu mod, is the installation. The readme is very difficult to understand, and the code that I need to the header is rather vague in terms of the explanation and application.

With the Category & EZ Same Menu mod, surely that's all I need to add? Is the Karen's Cakes site using that mod at the moment, or is that another one?

Thanks

The iShop: Make it Yours

Apple, BlackBerry, HTC, Samsung and Audio Accessories www.the-ishop.co.uk

22 Jun 2011, 12:19 PM
#10
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: CSS Rollover for EZ Pages Nav Buttons

I'll respectfully disagree about the instructions for the mod I referenced. I just downloaded it and installed it in 5 minutes, and it works fine.

Just change the name of the three YOUR_TEMPLATE folders to the name of your template and then drag and drop the 'includes' folder from the mod to the root directory of your store. Done. You can have your EZ page links in the Information menu by following the instructions for that in the readme.

As the readme says, if you haven't heavily modified tpl_header.php, just overwrite the one that's there, rather than worrying about the additions mentioned in the readme.

22 Jun 2011, 12:43 PM
#11
caesartrading avatar

caesartrading

New Zenner

Join Date:
May 2010
Location:
Whitchurch, Hampshire, UK
Posts:
71
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

Yes, but my problem is, I've heavily modified my tpl_header.php file.

Indeed, if I hadn't modified it, it would have installed very easily, but trying to add the code in for the EZ pages is difficult.

Plus, I don't want my EZ pages links to be in a dropdown menu, I want them to be the actual navigation buttons. Same as here: https://www.the-ishop.co.uk.

But with the one that schoolboy mentioned, that seems to apply to EZ pages (or at least I think it does)

The iShop: Make it Yours

Apple, BlackBerry, HTC, Samsung and Audio Accessories www.the-ishop.co.uk

23 Jun 2011, 10:43 AM
#12
caesartrading avatar

caesartrading

New Zenner

Join Date:
May 2010
Location:
Whitchurch, Hampshire, UK
Posts:
71
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

Can anyone help me with this?

The iShop: Make it Yours

Apple, BlackBerry, HTC, Samsung and Audio Accessories www.the-ishop.co.uk

23 Jun 2011, 3:48 PM
#13
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: CSS Rollover for EZ Pages Nav Buttons

caesartrading:

Is the Karen's Cakes site using that mod at the moment, or is that another one?

Thanks

The Karenscakes site is making use of the Categories Tabs menu - which is the built-in function to display your categories as an inline list in the header.

Standard behaviour for the Cat-Tabs-Menu is controlled by a switch in ADMIN >>> CONFIGURATION >>> LAYOUT SETTINGS... (it's about three or four from the bottom of the list.

That must be set to "1".

Then, you install and configure the CATEGORIES TABS DROPDOWN add-on. It has limitations... It only drills down to the FIRST sub-category under a main category, so you cant have the sort of tree-depth that the CSS DROPDOWN has.

But Stevesh is right... the CATEGORIES CSS DROPDOWN is not a mission to install and configure, ao why you are struggling is a bit of a mystery...

20 years a Zencart User