Defining css style for the .selected state in Runway dropdown navigation
Hi,
I've configured the DropdownNavigation css to use images for a site I am building and using at the same time as a test and education process for Umbraco.
My problem is that I have configured (I think!) a static css so that the selected node has the same image as the hover image. Unfortunately it doesn't work :(.
Can anyone tell me what I am missing?
My css now looks like this:
/* Basic code - don't modify */ #dropdownNavigation { display: block; margin: 0; padding: 0; position: relative; } #dropdownNavigation li { display: block; list-style: none; margin: 0 !Important; padding: 0 !Important; float: left; position: relative; } #dropdownNavigation a { display: block; } #dropdownNavigation ul { display: none; position: absolute; left: 0; margin: 0 !Important; padding: 0 !Important; } * html #dropdownNavigation ul { line-height: 0; } /* IE6 "fix" */ #dropdownNavigation ul a { zoom: 1; } /* IE6/7 fix */ #dropdownNavigation ul li { float: none; } #dropdownNavigation ul ul { top: 20; } /* Essentials - configure this */ #dropdownNavigation ul { width: 150px; } /* width of drop down menu box */ #dropdownNavigation ul ul { left: 100px; } /*offset of third and subsequent level menu */
/* Everything else is theming */ #dropdownNavigation {height: 40px; width:870px; background-color: #ffffff;} /*background of menu bar itself*/ #dropdownNavigation *:selected {background-color: #ffffff;}
#dropdownNavigation a {font-size: 12px; padding-top: 45px; line-height: 1; } /*configures menu item text, position etc */
#dropdownNavigation li /* top level menu*/ { background-position: center top; width: 90px; height: 40px; background-image: url('../Images/CameraIcon.jpg'); background-repeat: no-repeat; }
#dropdownNavigation li.hover /* top level menu hover*/ { background-position: center top; width: 90px; height: 40px; background-image: url('../Images/CameraIconHover.jpg'); background-repeat: no-repeat;}
#dropdownNavigation li.selected /* top level menu selected*/ { background-position: center top; width: 90px; height: 40px; background-image: url('../Images/CameraIconHover.jpg'); background-repeat: no-repeat; }
/* From here-on we are configuring the drop down menu */ #dropdownNavigation ul { top: 70px; left:20px;} /* Drop Down container */
#dropdownNavigation ul a { font-size: 12px; padding: 3px; line-height: 1; color: #000000; } #dropdownNavigation ul li /* Drop Down Menu box*/ { width: 90px; height: 20px; /* background-color: #0000ff;*/ background-image: none; } #dropdownNavigation ul li.hover { width: 90px; height: 20px; /* background-color: #00ff00;*/ background-image: none; } #dropdownNavigation ul li.hover a { font-size: 12px; padding: 3px; line-height: 1; color: #ff0000; } #dropdownNavigation ul li { border-bottom: 1px solid white; border-right: none; opacity: 0.9; filter: alpha(opacity=90); } /* #dropdownNavigation ul a { border-bottom: none; } - I also needed this for IE6/7 */
I am using the standard Runway dropDown Navigation as my base. Note that I only have a basic knowledge of Umbraco - just started playing and educating myself.
So I guess the relevant part is the droppy.js script which is called by the html?
I haven't made any changes to the standard script (reproduced below) because what I know about js can be written on the smallest of pinheads.
/* * Droppy 0.1.2 * (c) 2008 Jason Frame ([email protected]) */ $.fn.droppy = function(options) { options = $.extend({speed: 250}, options || {}); this.each(function() { var root = this, zIndex = 1000; function getSubnav(ele) { if (ele.nodeName.toLowerCase() == 'li') { var subnav = $('> ul', ele); return subnav.length ? subnav[0] : null; } else { return ele; } } function getActuator(ele) { if (ele.nodeName.toLowerCase() == 'ul') { return $(ele).parents('li')[0]; } else { return ele; } } function hide() { var subnav = getSubnav(this); if (!subnav) return; $.data(subnav, 'cancelHide', false); setTimeout(function() { if (!$.data(subnav, 'cancelHide')) { $(subnav).slideUp(options.speed); } }, 500); } function show() { var subnav = getSubnav(this); if (!subnav) return; $.data(subnav, 'cancelHide', true); $(subnav).css({zIndex: zIndex++}).slideDown(options.speed); if (this.nodeName.toLowerCase() == 'ul') { var li = getActuator(this); $(li).addClass('hover'); $('> a', li).addClass('hover'); } } $('ul, li', this).hover(show, hide); $('li', this).hover( function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); }, function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); } ); }); };
Correct - other than specifying the depth in <xsl:variable name="maxLevel" select="3"/>
I have only a rudimentary knowledge of xslt files gained by creating a file to list gallery pages (with much help from Dirk!!) based on an existing file.
Defining css style for the .selected state in Runway dropdown navigation
Hi,
I've configured the DropdownNavigation css to use images for a site I am building and using at the same time as a test and education process for Umbraco.
My problem is that I have configured (I think!) a static css so that the selected node has the same image as the hover image. Unfortunately it doesn't work :(.
Can anyone tell me what I am missing?
My css now looks like this:
/* Basic code - don't modify */
#dropdownNavigation { display: block; margin: 0; padding: 0; position: relative; }
#dropdownNavigation li { display: block; list-style: none; margin: 0 !Important; padding: 0 !Important; float: left; position: relative; }
#dropdownNavigation a { display: block; }
#dropdownNavigation ul { display: none; position: absolute; left: 0; margin: 0 !Important; padding: 0 !Important; }
* html #dropdownNavigation ul { line-height: 0; } /* IE6 "fix" */
#dropdownNavigation ul a { zoom: 1; } /* IE6/7 fix */
#dropdownNavigation ul li { float: none; }
#dropdownNavigation ul ul { top: 20; }
/* Essentials - configure this */
#dropdownNavigation ul { width: 150px; } /* width of drop down menu box */
#dropdownNavigation ul ul { left: 100px; } /*offset of third and subsequent level menu */
/* Everything else is theming */
#dropdownNavigation {height: 40px; width:870px; background-color: #ffffff;} /*background of menu bar itself*/
#dropdownNavigation *:selected {background-color: #ffffff;}
#dropdownNavigation a {font-size: 12px; padding-top: 45px; line-height: 1; } /*configures menu item text, position etc */
#dropdownNavigation li /* top level menu*/
{
background-position: center top;
width: 90px;
height: 40px;
background-image: url('../Images/CameraIcon.jpg');
background-repeat: no-repeat;
}
#dropdownNavigation li.hover /* top level menu hover*/
{
background-position: center top;
width: 90px;
height: 40px;
background-image: url('../Images/CameraIconHover.jpg');
background-repeat: no-repeat;}
#dropdownNavigation li.selected /* top level menu selected*/
{
background-position: center top;
width: 90px;
height: 40px;
background-image: url('../Images/CameraIconHover.jpg');
background-repeat: no-repeat;
}
/* From here-on we are configuring the drop down menu */
#dropdownNavigation ul { top: 70px; left:20px;} /* Drop Down container */
#dropdownNavigation ul a
{
font-size: 12px;
padding: 3px;
line-height: 1;
color: #000000;
}
#dropdownNavigation ul li /* Drop Down Menu box*/
{
width: 90px;
height: 20px;
/* background-color: #0000ff;*/
background-image: none;
}
#dropdownNavigation ul li.hover
{
width: 90px;
height: 20px;
/* background-color: #00ff00;*/
background-image: none;
}
#dropdownNavigation ul li.hover a
{
font-size: 12px;
padding: 3px;
line-height: 1;
color: #ff0000;
}
#dropdownNavigation ul li { border-bottom: 1px solid white; border-right: none; opacity: 0.9; filter: alpha(opacity=90); }
/* #dropdownNavigation ul a { border-bottom: none; } - I also needed this for IE6/7 */
Hi Geoff,
It might be helpful to post the html code you have for your menu.
Rich
Hi Rich,
I am using the standard Runway dropDown Navigation as my base. Note that I only have a basic knowledge of Umbraco - just started playing and educating myself.
So I guess the relevant part is the droppy.js script which is called by the html?
I haven't made any changes to the standard script (reproduced below) because what I know about js can be written on the smallest of pinheads.
/*
* Droppy 0.1.2
* (c) 2008 Jason Frame ([email protected])
*/
$.fn.droppy = function(options) {
options = $.extend({speed: 250}, options || {});
this.each(function() {
var root = this, zIndex = 1000;
function getSubnav(ele) {
if (ele.nodeName.toLowerCase() == 'li') {
var subnav = $('> ul', ele);
return subnav.length ? subnav[0] : null;
} else {
return ele;
}
}
function getActuator(ele) {
if (ele.nodeName.toLowerCase() == 'ul') {
return $(ele).parents('li')[0];
} else {
return ele;
}
}
function hide() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', false);
setTimeout(function() {
if (!$.data(subnav, 'cancelHide')) {
$(subnav).slideUp(options.speed);
}
}, 500);
}
function show() {
var subnav = getSubnav(this);
if (!subnav) return;
$.data(subnav, 'cancelHide', true);
$(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
if (this.nodeName.toLowerCase() == 'ul') {
var li = getActuator(this);
$(li).addClass('hover');
$('> a', li).addClass('hover');
}
}
$('ul, li', this).hover(show, hide);
$('li', this).hover(
function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); },
function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); }
);
});
};
Geoff
Hi Geoff,
Am I correct in thinking you have not editing the xslt for the Standard Navigation at all? So the HTML produced will just be the standard Runway html?
Rich
Correct - other than specifying the depth in <xsl:variable name="maxLevel" select="3"/>
I have only a rudimentary knowledge of xslt files gained by creating a file to list gallery pages (with much help from Dirk!!) based on an existing file.
is working on a reply...