Re: Extended Menu
Posted: Tue Jul 22, 2008 6:39 am
ul.submenu li ul needs a height: auto. (to begin with, i'm not sure if this will fix the problem)
Joomla! Community, help and support.
https://forum.joomla.org/
Hi Tom, which element are you referring to with the empty class/id? I did not see it using Firebug...TomT wrote: Hi Kai, it ís very strange. The second level actualy does seem to disappear. There is a an empty element without a class or id. Maybe you have to try if changing parameters in the extended menu module helps. I'm sorry, but i don't know which parameter needs to be set differently. I hope someone else can help.
Code: Select all
// based on http://www.alistapart.com/articles/dropdowns and http://www.htmldog.com/articles/suckerfish/dropdowns/
if ((document.all) && (document.getElementById)) {
function MenuListElementHoverFix() {
var _this = this;
if (typeof(Array.prototype.push) == 'undefined') {
// IE < 5.5 does not support push/pop
function push() {
var j = this.length;
for (var i = 0; i < push.arguments.length; ++i) {
this[j] = push.arguments[i];
j++;
}
}
function pop() {
var i = this[this.length - 1];
this.length--;
return i;
}
Array.prototype.push = push;
Array.prototype.pop = pop;
}
this.className = 'hover'; // change the class name to use here if you are not happy with it
this.classNameSuffix = ' ' + this.className;
this.removeClassNameRegExp = new RegExp("\\b ?" + this.className + "\\b");
this.hoverElementStack = new Array();
this.onmouseover = function() {
if (!_this.isHover(this)) {
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.className += _this.classNameSuffix;
}
this.setAttribute('is_hover', 'true');
}
}
this.isHover = function(element) {
return (element.getAttribute('is_hover') == 'true');
}
this.checkNonHoverState = function(element) {
if (!_this.isHover(element)) {
element.className = element.className.replace(_this.removeClassNameRegExp, '');
}
element.removeAttribute('is_hover_class_removing');
}
this.checkLastNonHoverState = function() {
var hoverElement = null;
if (_this.hoverElementStack.length > 0) {
hoverElement = _this.hoverElementStack.pop();
}
for (var i = _this.hoverElementStack.length - 1; i >= 0; i--) {
// we need to apply the "non-hover" class to the children first - else the result is mixed in the IE
var o = _this.hoverElementStack[i];
while (o != null) {
o = o.offsetParent;
if (o == hoverElement) {
_this.checkNonHoverState(_this.hoverElementStack[i]);
break;
}
}
}
if (hoverElement != null) {
_this.checkNonHoverState(hoverElement);
}
}
this.onmouseout = function() {
// all this mess to not change the class immediately (which would cause flickering in the IE)
this.setAttribute('is_hover', 'false');
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.setAttribute('is_hover_class_removing', 'true');
_this.hoverElementStack.push(this);
window.setTimeout(_this.checkLastNonHoverState, 100);
}
}
this.fixElement = function(elementRoot) {
for (var i=0; i < elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = this.onmouseover;
node.onmouseout = this.onmouseout;
}
this.fixElement(node);
}
};
this.findElement = function(elementRoot) {
for (var i=0; i< elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "UL") {
if ((node.id != '') && ((node.id.indexOf("menu") >= 0) || (node.id.indexOf("nav") >= 0))) {
this.fixElement(node);
continue; // do not iterate through children of already fixed element
}
}
this.findElement(node);
}
};
this.fix = function() {
var node = document.body;
if (node) {
_this.findElement(node);
}
}
this.addOnLoad = function() {
if (window.attachEvent) {
window.attachEvent("onload", this.fix);
} else {
window.onload = this.fix;
}
}
}
(new MenuListElementHoverFix()).addOnLoad();
}
Code: Select all
/** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical,
a.mainlevel-suckerfish-vertical:link, a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel-suckerfish-vertical:visited, a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited {
background-color: #93c9e9;
color: #504e4e;
}
a.mainlevel-suckerfish-vertical:hover, a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover {
background-color: #bedcef;
color: red;
}
a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical,
a.sublevel-suckerfish-vertical:link, a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel-suckerfish-vertical:visited, a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited {
background-color: #c4e1f3;
color: #504e4e;
}
a.sublevel-suckerfish-vertical:hover, a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
background-color: #bedcef;
color: green;
}
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical,
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:link, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:link, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:link,
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:visited, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:visited, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:visited {
background-color: #2586d7;
color: white;
}
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:hover, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:hover, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:hover {
background-color: #E0E0E0;
color: blue;
}
ul.mainlevel-suckerfish-vertical .expanded {
display: block;
background-image: url("../images/arrow_right.gif");
background-position: right center;
background-repeat: no-repeat;
padding-right: 0;
}
/** customize style / layout here */
a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical, span.mainlevel-suckerfish-vertical,
a.mainlevel-suckerfish-vertical:link, a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel-suckerfish-vertical:visited, a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited,
a.mainlevel-suckerfish-vertical:hover, a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover,
a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical, span.sublevel-suckerfish-vertical,
a.sublevel-suckerfish-vertical:link, a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel-suckerfish-vertical:visited, a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited,
a.sublevel-suckerfish-vertical:hover, a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
font-weight: bold;
font-size: 13px;
text-align: left;
text-indent: 5px;
text-decoration: none;
display: block;
background-color: #c4e1f3;
border-top: 2px solid #93c9e9;
border-bottom: 2px solid #79a8c5;
border-right: 5px solid #93c9e9;
border-left: 15px solid #93c9e9;
padding: 15px 0.5em 0.3em 0.5em; /* top, right, bottom, left */
height: 25px;
width: 170px;
line-height: 1em;
}
a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical, span.mainlevel-suckerfish-vertical {
}
a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical, span.sublevel-suckerfish-vertical {
font-size: 90%;
border-top: 12px;
}
#active_menu-suckerfish-vertical,
a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical,
a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited,
a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover,
a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical,
a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited,
a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
font-weight: bold;
background-image: url("../images/menu_image.jpg");
background-position: center center;
background-repeat: no-repeat;
}
ul.mainlevel-suckerfish-vertical, .mainlevel-suckerfish-vertical ul {
padding: 0;
margin-right: 0;
list-style-type: none;
width: 10em;
}
ul.mainlevel-suckerfish-vertical {
z-index: 101;
}
ul.mainlevel-suckerfish-vertical ul {
z-index: 102;
}
ul.mainlevel-suckerfish-vertical ul ul {
z-index: 103;
}
ul.mainlevel-suckerfish-vertical li {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
clear: right;
position: relative;
width: 10em;
}
ul.mainlevel-suckerfish-vertical li li {
}
ul.mainlevel-suckerfish-vertical ul {
display: none;
position: absolute;
top: 10px;
margin-left: 7em;
}
ul.mainlevel-suckerfish-vertical li:hover ul,
ul.mainlevel-suckerfish-vertical li.hover ul {
display: block;
}
ul.mainlevel-suckerfish-vertical li:hover ul ul,
ul.mainlevel-suckerfish-vertical li.hover ul ul {
display: none;
}
ul.mainlevel-suckerfish-vertical li:hover ul li:hover ul,
ul.mainlevel-suckerfish-vertical li.hover ul li.hover ul {
display: block;
}
ul.mainlevel-suckerfish-vertical, ul.mainlevel-suckerfish-vertical li li {
clear: left;
}
/** separator */
span.mainlevel-suckerfish-vertical, span.sublevel-suckerfish-vertical {
border-width: 0px;
padding: 5px;
}
Ashar, there are some issues with Extended Menu and Joomla! 1.5. One of them I resolved and the solution is here: http://forum.joomla.org/viewtopic.php?f=472&t=325037.ashar wrote:Are there any known issues of Extended Menu with Joomla 1.5.5 and IE 8
You can do both:ocilya42 wrote:Hey there,
I want to create drop-down list menus. I plan to use some for two purposes:
1) a top "Jump to" menu similar to the one you can see on this site, in which I will include most, but not all of the site's pages.
2) "contextual" menus in some sections, which would be displayed within the very articles and would provide links to all of my articles in a given category. If those lists can be created automagically, it'll be great, else, this won't be essentially needed...
No need for Javascript here, on the contrary, I'd like my menus to be plain HTML lists with an OK button close to them for the user to validate his/her choice.
My questions are:
- can Extended Menu do this for me?
- do I get to insert the menus I created within the articles?
Thank you.
Code: Select all
#ja-mainnav ul.menu li a:hover,
#ja-mainnav ul.menu li a:active,
#ja-mainnav ul.menu li a:focus {
background: url(../images/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}
Code: Select all
#twocols{ /*the columns that gets dropped down over yours might be different*/
z-index:20;
}
#leftcol{ /*the columns that gets dropped down over yours might be different*/
z-index:10;
}
table.pill {
margin-left: auto;
margin-right: auto;
padding: 0;
}
td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;
}
td.pill_m {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}
td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}
#pillmenu {
white-space: nowrap;
height: 32px;
float: left;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #000;
text-decoration: none;
}
#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}
#pillmenu li ul {
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#c5c5c5;
border:#4f4f4f 1px solid;
margin:0;
}
#pillmenu li li {
width:11em;
}
#pillmenu li ul a {
width:11em;
color:#f1f1f1;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#pillmenu li:hover ul ul,#pillmenu li:hover ul ul ul,#pillmenu li.sfhover ul ul,#pillmenu li.sfhover ul ul ul{
left:-999em;
}
#pillmenu li:hover ul,#pillmenu li li:hover ul,#pillmenu li li li:hover ul,#pillmenu li.sfhover
l,#pillmenu li li.sfhover ul,#pillmenu li li li.sfhover ul {
left:auto;
z-index:6000;
}
#pillmenu li li:hover,#pillmenu li li.sfhover {
background:#ebebeb 98% 50% no-repeat;
}
#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}
#maincolumn,
#maincolumn_full {
margin-left: 20%;
padding-left: 15px;
width: 75%;
}
#maincolumn_full {
margin-left: 0;
padding: 0;
width: 100%;
}
table.nopad {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-bottom: 15px;
}
table.nopad td.middle_pad {
width: 20px;
}
Code: Select all
// based on http://www.alistapart.com/articles/dropdowns and http://www.htmldog.com/articles/suckerfish/dropdowns/
if ((document.all) && (document.getElementById)) {
function MenuListElementHoverFix() {
var _this = this;
if (typeof(Array.prototype.push) == 'undefined') {
// IE < 5.5 does not support push/pop
function push() {
var j = this.length;
for (var i = 0; i < push.arguments.length; ++i) {
this[j] = push.arguments[i];
j++;
}
}
function pop() {
var i = this[this.length - 1];
this.length--;
return i;
}
Array.prototype.push = push;
Array.prototype.pop = pop;
}
this.className = 'hover'; // change the class name to use here if you are not happy with it
this.classNameSuffix = ' ' + this.className;
this.removeClassNameRegExp = new RegExp("\\b ?" + this.className + "\\b");
this.hoverElementStack = new Array();
this.onmouseover = function() {
if (!_this.isHover(this)) {
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.className += _this.classNameSuffix;
}
this.setAttribute('is_hover', 'true');
}
}
this.isHover = function(element) {
return (element.getAttribute('is_hover') == 'true');
}
this.checkNonHoverState = function(element) {
if (!_this.isHover(element)) {
element.className = element.className.replace(_this.removeClassNameRegExp, '');
}
element.removeAttribute('is_hover_class_removing');
}
this.checkLastNonHoverState = function() {
var hoverElement = null;
if (_this.hoverElementStack.length > 0) {
hoverElement = _this.hoverElementStack.pop();
}
for (var i = _this.hoverElementStack.length - 1; i >= 0; i--) {
// we need to apply the "non-hover" class to the children first - else the result is mixed in the IE
var o = _this.hoverElementStack[i];
while (o != null) {
o = o.offsetParent;
if (o == hoverElement) {
_this.checkNonHoverState(_this.hoverElementStack[i]);
break;
}
}
}
if (hoverElement != null) {
_this.checkNonHoverState(hoverElement);
}
}
this.onmouseout = function() {
// all this mess to not change the class immediately (which would cause flickering in the IE)
this.setAttribute('is_hover', 'false');
if (this.getAttribute('is_hover_class_removing') != 'true') {
this.setAttribute('is_hover_class_removing', 'true');
_this.hoverElementStack.push(this);
window.setTimeout(_this.checkLastNonHoverState, 100);
}
}
this.fixElement = function(elementRoot) {
for (var i=0; i < elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = this.onmouseover;
node.onmouseout = this.onmouseout;
}
this.fixElement(node);
}
};
this.findElement = function(elementRoot) {
for (var i=0; i< elementRoot.childNodes.length; i++) {
var node = elementRoot.childNodes[i];
if (node.nodeName == "UL") {
if ((node.id != '') && ((node.id.indexOf("menu") >= 0) || (node.id.indexOf("nav") >= 0))) {
this.fixElement(node);
continue; // do not iterate through children of already fixed element
}
}
this.findElement(node);
}
};
this.fix = function() {
var node = document.body;
if (node) {
_this.findElement(node);
}
}
this.addOnLoad = function() {
if (window.attachEvent) {
window.attachEvent("onload", this.fix);
} else {
window.onload = this.fix;
}
}
}
(new MenuListElementHoverFix()).addOnLoad();
}
Code: Select all
/** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical,
a.mainlevel-suckerfish-vertical:link, a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel-suckerfish-vertical:visited, a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited {
color: black;
}
a.mainlevel-suckerfish-vertical:hover, a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover {
background-color: #E0E0E0;
color: black;
}
a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical,
a.sublevel-suckerfish-vertical:link, a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel-suckerfish-vertical:visited, a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited {
background-color: #CCCCCC;
color: black;
}
a.sublevel-suckerfish-vertical:hover, a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
background-color: #E0E0E0;
color: black;
}
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical,
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:link, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:link, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:link,
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:visited, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:visited, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:visited {
background-color: #CCCCCC;
color: black;
}
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:hover, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:hover, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:hover {
background-color: #E0E0E0;
color: black;
}
ul.mainlevel-suckerfish-vertical .expanded {
display: block;
/*background-image: url("../images/arrow_right.gif"); tactis.net - Barnabé pour enlevé l'affichage des flèche s'il existe des sous-menu*/
background-position: right center;
background-repeat: no-repeat;
padding-right: 10px;
}
/** customize style / layout here */
a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical, span.mainlevel-suckerfish-vertical,
a.mainlevel-suckerfish-vertical:link, a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel-suckerfish-vertical:visited, a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited,
a.mainlevel-suckerfish-vertical:hover, a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover{
font-weight: normal;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
border: 0px solid silver;
padding: 0.3em 0.5em 0.3em 0.5em; /* top, right, bottom, left */
line-height: 1em;
}
a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical, span.sublevel-suckerfish-vertical,
a.sublevel-suckerfish-vertical:link, a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel-suckerfish-vertical:visited, a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited,
a.sublevel-suckerfish-vertical:hover, a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
font-weight: normal;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
border: 1px solid silver;
padding: 0.3em 0.5em 0.3em 0.5em; /* top, right, bottom, left */
line-height: 1em;
}
a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical, span.mainlevel-suckerfish-vertical {
}
a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical, span.sublevel-suckerfish-vertical {
font-size: 90%;
border-top: 0px solid silver;
}
#active_menu-suckerfish-vertical,
a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical,
a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited,
a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover,
a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical,
a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited,
a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
font-weight: bold;
background-color: #E0E0E0;
}
ul.mainlevel-suckerfish-vertical, .mainlevel-suckerfish-vertical ul {
padding: 0;
margin: 0;
list-style: none;
width: 10em;
}
ul.mainlevel-suckerfish-vertical {
z-index: 101;
}
ul.mainlevel-suckerfish-vertical ul {
z-index: 102;
}
ul.mainlevel-suckerfish-vertical ul ul {
z-index: 103;
}
ul.mainlevel-suckerfish-vertical li {
padding: 0;
margin: 0;
background: none;
list-style: none;
float: left;
clear: left;
position: relative;
width: 10em;
}
ul.mainlevel-suckerfish-vertical li li {
}
ul.mainlevel-suckerfish-vertical ul {
display: none;
position: absolute;
top: 0;
margin-left: 10em;
}
ul.mainlevel-suckerfish-vertical li:hover ul,
ul.mainlevel-suckerfish-vertical li.hover ul {
display: block;
}
ul.mainlevel-suckerfish-vertical li:hover ul ul,
ul.mainlevel-suckerfish-vertical li.hover ul ul {
display: none;
}
ul.mainlevel-suckerfish-vertical li:hover ul li:hover ul,
ul.mainlevel-suckerfish-vertical li.hover ul li.hover ul {
display: block;
}
ul.mainlevel-suckerfish-vertical, ul.mainlevel-suckerfish-vertical li li {
clear: left;
}
/** separator */
span.mainlevel-suckerfish-vertical, span.sublevel-suckerfish-vertical {
border-width: 0px;
padding: 5px;
}
Code: Select all
<a href="{URL}" title="{CAPTION}" style="background-image: url(../bilder/{ITEM_ID}.jpg); background-position: center; background-repeat: no-repeat;">
…
Code: Select all
…
style="background-image: url('/../bilder/0.jpg');
…
Code: Select all
url(something)
Code: Select all
url('/something')