defining css style for the selected state in runway dropdown navigation

Geoff Baldwin 80 posts 100 karma points

Oct 03, 2010 @ 23:38

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 */

Copy Link

Rich Green 2246 posts 4008 karma points

Oct 04, 2010 @ 08:15

Hi Geoff,

It might be helpful to post the html code you have for your menu.

Rich

Copy Link

Geoff Baldwin 80 posts 100 karma points

Oct 05, 2010 @ 13:54

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

Copy Link

Rich Green 2246 posts 4008 karma points

Oct 05, 2010 @ 13:57

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

Copy Link

Geoff Baldwin 80 posts 100 karma points

Oct 05, 2010 @ 15:21

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.

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Defining css style for the .selected state in Runway dropdown navigation