Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Geoff Baldwin 80 posts 100 karma points
    Oct 03, 2010 @ 23:38
    Geoff Baldwin
    0

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

     

  • Rich Green 2245 posts 3913 karma points
    Oct 04, 2010 @ 08:15
    Rich Green
    0

    Hi Geoff,

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

    Rich

  • Geoff Baldwin 80 posts 100 karma points
    Oct 05, 2010 @ 13:54
    Geoff Baldwin
    0

    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 (jason@onehackoranother.com)
     */
    $.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

  • Rich Green 2245 posts 3913 karma points
    Oct 05, 2010 @ 13:57
    Rich Green
    0

    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

     

  • Geoff Baldwin 80 posts 100 karma points
    Oct 05, 2010 @ 15:21
    Geoff Baldwin
    0

    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.

Please Sign in or register to post replies

Write your reply to:

Draft