Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Stylesheet of CSS flyout menu

Stylesheet of CSS flyout menu

Locked

Views: 1,223

Results 1 to 3 of 3
This thread is locked. New replies are disabled.
11 Aug 2008, 12:50 AM
#1
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Stylesheet of CSS flyout menu

Before anybody points out that this thread would be better posted in the add-on specific thread, let me explain that the original creator of the module, DrByte, does not offer support for this module (no offense meant, Doc, probably very busy).
This contrib was later updated by Get Em Fast, who also deserted it, so I am hoping to reach a larger audience of stylesheet gurus who can help me out.
The contrib works fine in IE7 and FF, though barely in IE6.
You can take a look at the site in the sig to see what I mean.
Also, in the support thread http://www.zen-cart.com/forum/showthread.php?t=686768&page=9 you will find more info on tweaks I had to make to the stylesheet to achieve something barely visible in IE6.
There is no hover functionality in IE6, although the file that produces the hover (csshover.htc) is correctly called in the stylesheet, but this is an issue that I will address later.
For the moment, let's focus on the style thing.
An element "a" with these ancestors:
html
body #indexBody
div #mainWrapper
table #contentMainWrapper
tbody
tr
td #navColumnOne .columnLeft
div #navColumnOneWrapper
div #categoriescss .leftBoxContainer
div #nav-cat
ul .level1
li
is breaking the sidebox (information taken from Web Dev toolbar).Web Dev reports that this element has
Width: 160pxHeight: 28px
however I have specified a different size for it in the stylesheet.
Next comes the relevant stylesheet.
If anybody can make sense of it, I'd greatly appreciate it and so would the other users of this contrib.
Thanks in advance.


body {
behavior: url(../../../csshover.htc);
/* WinIE behavior call */}

div#nav-cat {
width: 150px;
margin: 0;
background-color: transparent;
font-weight:bold;
text-align: left;
line-height: 20px;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: transparent;
}

div#nav-cat ul.level2 {
margin-left: 5px;
padding: 0;
width: 150px;
background-color: transparent;
border: none;
}

div#nav-cat ul.level3 {
background-color: transparent;
}

div#nav-cat ul.level4 {
background-color: transparent;
}

div#nav-cat ul.level5 {
background-color: transparent;
}

div#nav-cat ul.level6 {
background-color: transparent;
}

div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues /
div#nav-cat li li {
margin: 0px;
/
this overrides the margin-top in the declaration above */
}

div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}

div#nav-cat li.submenu {
background-color: transparent;
}

div#nav-cat li.submenu:hover {
background-color: transparent;
}

div#nav-cat ul {
background-color: transparent;
}

div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}
/
}

div#nav-cat li a:hover {
border: none;
}

div#nav-cat>ul a {
width: 150px;
}

div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
}

[argentiniansupermarket.com

](http://argentiniansupermarket.com)

11 Aug 2008, 12:25 PM
#2
stevesh avatar

stevesh

Black Belt

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

Re: Stylesheet of CSS flyout menu

I know this isn't the answer you're looking for, but as added info, I don't worry about IE6 anymore. I don't even have it installed anywhere.

IE7 is stable (if a little goofy sometimes) and has been around long enough that Windows users should have it by now.

One of my sites, for example, 61.5% IE7, 21.5% IE6, and the people likely to visit that site aren't going to be all that computer knowledgable.

I'd bet that a better cross-section would show < 10% IE6. Not worth jumping through a lot of hoops for, IMO.

11 Aug 2008, 6:55 PM
#3
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Stylesheet of CSS flyout menu

Thanks for quick answer.
Granted, but overall stats still showing 30% users for that goddam browser, which I absolutely loathe.
However, my personal preferences have nothing to do with my marketing campaign.

[argentiniansupermarket.com

](http://argentiniansupermarket.com)