Skip navigation
jennifer.mbx
Currently Being Moderated

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

Oct 20, 2011 8:14 PM

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;

}

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points