How to style active elements in accordion menu - Modx Revo

15 Posts

blueweb Reply #1, 14 years, 9 months ago

How is it possible to show active elements in a different color:

- In the first layer - ex. frontpage. For containers as well as normal menu items.
- Containers, but not children. Containers are marked with ">>". When expanded the sub menus changes color as well.

See test-page here: http://bluewebcon.com/

The code:

Chunks

acc-folder

<li[[+wf.classes]]>
   <a title="[[+wf.title]]" href="[[+wf.link]]">[[+wf.linktext]] &raquo</a>
   [[+wf.wrapper]]
</li>



acc-inner

<ul class="acitem collapsible">
   [[+wf.wrapper]]
</ul>


acc-outer

<ul class="menu collapsible">
   [[+wf.wrapper]]
</ul>

Call:

[[Wayfinder? &startId=`0` &level=`4` &hideSubMenus=`1` &outerTpl=`acc-outer` &hereClass=`expand` &selfClass=`active` &categoryFoldersTpl=`acc-folder` &innerTpl=`acc-inner`]]

.menu {
    height: auto;
     
}
 
ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
   
}
 
ul.menu a {
  display: block;
  text-decoration: none;
background-color:#E0E9F6;
 color: #F00;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
 
ul.menu li {
  margin-top: 1px;
}
 
ul.menu li a {
 background-color:#E0E9F6;
  color: #000; 
  padding: 0.5em;
}
 
ul.menu li a:hover {
  background-color:#E0E9F6;
color:#007AC3;
}
 
ul.menu li ul li a {
 background-color:#FFF;
  color: #000;
 
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
 
ul.menu li ul li a:hover {
  background-color:#FFF;
  color:#007AC3;
}
 
.first expand active {
 background-color:#FFF;
  color:#007AC3;
}
/* second level active */
ul.menu li ul li.active a {
     background-color:#FFF;
  color:#007AC3;
}
/* third level active */
ul.menu li ul li ul li.active a {
    background-color:#FFF;
  color:#007AC3;
    }
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #E0E9F6; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }

793 Posts

ottogal Reply #2, 14 years, 9 months ago

.first expand active {
 background-color:#FFF;
  color:#007AC3;
}

I think you can't write it like that. Whereas in the HTML code you could assign several classnames at the same time, like

<li class="first expand active">

But you can not define a CSS rule in that manner.
Try this instead:

ul.menu li.active {
 background-color:#FFF;
  color:#007AC3;
}

15 Posts

blueweb Reply #3, 14 years, 9 months ago

Thank you for helping. But it didn't solve the problem! I think it has something to do with the container classes. I think some id's or classes added to the chunks can solve it - but I cannot figure out how!

Did you look at the test-site - it's only the third layer that works as it should. First layer no change of color for the active menu items. Second layer container changes color, but all the children as well...

Here is the present CSS

.menu {
	height: auto;
	
}

ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  
}

ul.menu a {
  display: block;
  text-decoration: none;

}


ul.menu li {
  margin:  0 0 5px 0;
}



ul.menu li a {
 background-color:#E0E9F6;
  color: #000;	
  padding: 0.3em;
  border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;

} 


ul.menu li a:hover {
 background-color:#E0E9F6;
 color:#007AC3;
 border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

/*test*/
ul.menu li.active {
 background-color:#FFF;
  color:#007AC3;
}


ul.menu li ul li a {
 background-color:#FFF;
  color: #000;
}

ul.menu li ul li a:hover {
  background-color:#FFF;
   color:#007AC3;
}

 
ul.menu li ul li.active a {
     background-color:#FFF;
 color:#007AC3;
} 



ul.menu li ul li  ul li{
  margin: 5px 0 0 20px;
}

ul.menu li ul li ul li.active a {
    background-color:#FFF;
  color:#007AC3;
    }
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #E0E9F6; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }