1 Reply Latest reply: Oct 20, 2011 11:02 PM by John Waller RSS

    Setting the active/current menu link within the spry accordion ?

    jennifer.mbx Community Member

      Hi ,

       

      How do I set the active/current menu within the spry accordion ? I thought the following code would do the job:

       

      #navSide .AccordionPanelContent ul li a:active {

      color: #ED1E79;

       

      but after linking the pages, I hoped whichever currently clicked menu is selected it would stay in "pink" ( #ED1E79), but it doesn’t change the color, but the pages link correctly...

       

      Can anyone help ? Thanks  very much !

       

      Jennifer

       

       

       

      Here’s the full CSS  for my menu:

       

      .Accordion {

          overflow: hidden;

          outline: none;

          border-bottom: 1px solid #DDD;

      }

      .AccordionPanel {

          margin: 0px;

          padding: 0px;

          border-top: 1px solid #DDD;

          /* [disabled]border-bottom: 1px solid #DDD; */

      }

      .AccordionPanelTab {

          background-color: #F7F4F4;

          /* [disabled]border-bottom: 1px solid #DDD; */

          margin: 0px;

          cursor: pointer;

          -moz-user-select: none;

          -khtml-user-select: none;

          font: 2.4em "Nixie One", "Courier New", Courier, monospace;

          letter-spacing: 0.05em;

          padding-top: 10px;

          padding-bottom: 11px;

          /* [disabled]border-top: 1px solid #DDD; */

          color: #555;

      }

      .AccordionPanelTabActive {

          color: #ED1E79;

      }

      .AccordionPanelContent {

          overflow: auto;

          margin: 0px;

          padding: 0px;

          height: 200px;

      }

      .AccordionPanelOpen .AccordionPanelTab {

          background-color: #F7F4F4;

          color: #ED1E79;

          border-style: none;

          /* [disabled]padding-bottom: 5px; */

      }

      .AccordionPanelTabHover {

          color: #ED1E79;

      }

      .AccordionPanelOpen .AccordionPanelTabHover {

          /* [disabled]color: #555555; */

      }

      .AccordionFocused .AccordionPanelTab {

          /* [disabled]background-color: #3399FF; */

      }

      .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {

          color: #ED1E79;

      }

      /* Rules for Printing */

       

      @media print {

       

        .Accordion {

        overflow: visible !important;

        }

       

        .AccordionPanelContent {

          display: block !important;

          overflow: visible !important;

          height: auto !important;

        }

      }

      #navSide .AccordionPanelContent ul {

       

          margin: 0px;

          padding: 0px 0px 15px 30px;

          font: 1em/2.6em "Varela", Arial, Helvetica, sans-serif;

          list-style: none;

          letter-spacing: 0.09em;

      }

       

      #navSide .AccordionPanelContent ul li {

          color:#777;

      }

      #navSide .AccordionPanelContent ul li a {

          display: block;

      }

      #navSide .AccordionPanelContent ul li a:link, #navSide .AccordionPanelContent ul li a:visited {

          color: #888;

          text-decoration: none;

      }

      #navSide .AccordionPanelContent ul li a:hover, #navSide .AccordionPanelContent ul li a:active {

          color: #ED1E79;

          /* [disabled]text-decoration: none; */

      }

      #navSide .AccordionPanelTab a:link, #navSide .AccordionPanelTab a:visited {

          color: #444;

          text-decoration: none;

      }

       

      #navSide .AccordionPanelTabHover a:hover, #navSide .AccordionPanelTabHover a:active {

          color: #ED1E79;

          text-decoration: none;

      }