I want to add an active class to every first element of the submenu (not to all the li's, only the first one from a bunch of li's with same first letter). and add the labels as A, B, C ----- i am achieving this with the css, but the problem is that it keeps adding labels to all, as i want the label to only first element. for example Brittle, britiana, bronze - it will add active class to first B only and same with the others.
how would i go about this?
.groupmenu-drop {
max-width: 900px;
margin: auto;
column-count: 4;
counter-reset: alphabeticList;
}
@media (max-width: 767px) {
.groupmenu-drop {
column-count: 1;
margin-left: 40px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.groupmenu-drop {
column-count: 2;
margin-left: 50px;
}
}
.groupmenu-drop > .level1 {
position: relative;
padding: 0 0 14px !important;
counter-increment: alphabeticList;
}
.groupmenu-drop > .level1 {
padding-bottom: 5px;
}
.groupmenu-drop > .level1 a {
font: 600 14px/30px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #166665;
}
.groupmenu-drop .level1:before {
content: counter(alphabeticList, upper-alpha);
position: absolute;
top: 3px;
left: -40px;
border: 2px solid #166665;
text-align: center;
border-radius: 7px;
font: bold 21px/34px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #095352;
width: 27px;
height: 27px;
line-height: 23px;
}
.groupmenu-drop .level1:first-child:before {
background-color: #166665;
color: #fef6eb;
}<ul class="groupmenu-drop slidedown">
<li class="level1 nav-1 item first">
<a
class="menu-link"
href="/brands/angelcare.html"
><span>Angelcare</span></a
>
</li>
<li class="level1 nav-2 item">
<a
class="menu-link"
href="/brands/baby-art.html"
><span>Baby Art</span></a
>
</li>
<li class="level1 nav-3 item">
<a
class="menu-link"
href="/brands/barbie.html"
><span>Barbie</span></a
>
</li>
<li class="level1 nav-4 item">
<a
class="menu-link"
href="/brands/bibado.html"
><span>Bibado</span></a
>
</li>
<li class="level1 nav-5 item">
<a
class="menu-link"
href="/brands/boon.html"
><span>Boon</span></a
>
</li>
<li class="level1 nav-6 item">
<a
class="menu-link"
href="/brands/braun.html"
><span>Braun</span></a
>
</li>
<li class="level1 nav-7 item">
<a
class="menu-link"
href="/brands/diono.html"
><span>Diono</span></a
>
</li>
<li class="level1 nav-8 item">
<a
class="menu-link"
href="/brands/disney.html"
><span>Disney</span></a
>
</li>
<li class="level1 nav-9 item">
<a
class="menu-link"
href="/brands/dorel.html"
><span>Dorel</span></a
>
</li>
<li class="level1 nav-10 item">
<a
class="menu-link"
href="/brands/dr-brown-s.html"
><span>Dr Brown's</span></a
>
</li>
<li class="level1 nav-11 item">
<a
class="menu-link"
href="/brands/dreambaby.html"
><span>Dreambaby</span></a
>
</li>
<li class="level1 nav-12 item">
<a
class="menu-link"
href="/brands/dreamgenii.html"
><span>Dreamgenii</span></a
>
</li>
<li class="level1 nav-13 item">
<a
class="menu-link"
href="/brands/dumbo.html"
><span>Dumbo</span></a
>
</li>
<li class="level1 nav-14 item">
<a
class="menu-link"
href="/brands/earth-friendly-baby.html"
><span>Earth Friendly Baby</span></a
>
</li>
<li class="level1 nav-15 item">
<a
class="menu-link"
href="/brands/east-coast.html"
><span>East Coast</span></a
>
</li>
<li class="level1 nav-16 item">
<a
class="menu-link"
href="/brands/fisher-price.html"
><span>Fisher-Price</span></a
>
</li>
<li class="level1 nav-17 item">
<a
class="menu-link"
href="/brands/fisher-price-little-people.html"
><span>Fisher-Price Little People</span></a
>
</li>
<li class="level1 nav-18 item">
<a
class="menu-link"
href="/brands/flair.html"
><span>Flair</span></a
>
</li>
<li class="level1 nav-19 item">
<a
class="menu-link"
href="/brands/gift-wrap-accessories.html"
><span>Gift Wrap Accessories</span></a
>
</li>
<li class="level1 nav-20 item">
<a
class="menu-link"
href="/brands/halilit.html"
><span>Halilit</span></a
>
</li>
<li class="level1 nav-21 item">
<a
class="menu-link"
href="/brands/hey-clay.html"
><span>Hey Clay</span></a
>
</li>
<li class="level1 nav-22 item">
<a
class="menu-link"
href="/brands/hot-wheels.html"
><span>Hot Wheels</span></a
>
</li>
<li class="level1 nav-23 item">
<a
class="menu-link"
href="/brands/infantino.html"
><span>Infantino</span></a
>
</li>
<li class="level1 nav-24 item">
<a
class="menu-link"
href="/brands/janod.html"
><span>Janod</span></a
>
</li>
<li class="level1 nav-25 item">
<a
class="menu-link"
href="/brands/kaloo.html"
><span>Kaloo</span></a
>
</li>
<li class="level1 nav-26 item">
<a
class="menu-link"
href="/brands/keel-toys.html"
><span>Keel Toys</span></a
>
</li>
<li class="level1 nav-27 item">
<a
class="menu-link"
href="/brands/lalaboom.html"
><span>Lalaboom</span></a
>
</li>
<li class="level1 nav-28 item">
<a
class="menu-link"
href="/brands/lamaze.html"
><span>Lamaze</span></a
>
</li>
<li class="level1 nav-29 item">
<a
class="menu-link"
href="/brands/lansinoh.html"
><span>Lansinoh</span></a
>
</li>
<li class="level1 nav-30 item">
<a
class="menu-link"
href="/brands/leap-frog.html"
><span>Leap Frog</span></a
>
</li>
<li class="level1 nav-31 item">
<a
class="menu-link"
href="/brands/lindam.html"
><span>Lindam</span></a
>
</li>
<li class="level1 nav-32 item">
<a
class="menu-link"
href="/brands/little-bird-told-me.html"
><span>Little Bird Told Me</span></a
>
</li>
<li class="level1 nav-33 item">
<a class="menu-link" href="/brands/mam.html"
><span>MAM</span></a
>
</li>
<li class="level1 nav-34 item">
<a
class="menu-link"
href="/brands/mattel.html"
><span>Mattel</span></a
>
</li>
<li class="level1 nav-35 item">
<a
class="menu-link"
href="/brands/medela.html"
><span>Medela</span></a
>
</li>
<li class="level1 nav-36 item">
<a
class="menu-link"
href="/brands/mega-bloks.html"
><span>Mega Bloks</span></a
>
</li>
<li class="level1 nav-37 item">
<a
class="menu-link"
href="/brands/milton.html"
><span>Milton</span></a
>
</li>
<li class="level1 nav-38 item">
<a
class="menu-link"
href="/brands/munchkin.html"
><span>Munchkin</span></a
>
</li>
<li class="level1 nav-39 item">
<a
class="menu-link"
href="/brands/my-garden-baby.html"
><span>My Garden Baby</span></a
>
</li>
<li class="level1 nav-40 item">
<a
class="menu-link"
href="/brands/nuby.html"
><span>Nuby</span></a
>
</li>
<li class="level1 nav-41 item">
<a class="menu-link" href="/brands/nuk.html"
><span>NUK</span></a
>
</li>
<li class="level1 nav-42 item">
<a
class="menu-link"
href="/brands/philips-avent.html"
><span>Philips Avent</span></a
>
</li>
<li class="level1 nav-43 item">
<a
class="menu-link"
href="/brands/plasticine.html"
><span>Plasticine</span></a
>
</li>
<li class="level1 nav-44 item">
<a
class="menu-link"
href="/brands/playmobil.html"
><span>Playmobil</span></a
>
</li>
<li class="level1 nav-45 item">
<a
class="menu-link"
href="/brands/ragtales.html"
><span>Ragtales</span></a
>
</li>
<li class="level1 nav-46 item">
<a
class="menu-link"
href="/brands/safety-first.html"
><span>Safety First</span></a
>
</li>
<li class="level1 nav-47 item">
<a
class="menu-link"
href="/brands/schleich.html"
><span>Schleich</span></a
>
</li>
<li class="level1 nav-48 item">
<a
class="menu-link"
href="/brands/summer-infant.html"
><span>Summer Infant</span></a
>
</li>
<li class="level1 nav-49 item">
<a
class="menu-link"
href="/brands/swaddleme.html"
><span>SwaddleMe</span></a
>
</li>
<li class="level1 nav-50 item">
<a
class="menu-link"
href="/brands/taf-toys.html"
><span>Taf Toys</span></a
>
</li>
<li class="level1 nav-51 item">
<a
class="menu-link"
href="/brands/thomas-and-friends.html"
><span>Thomas and Friends</span></a
>
</li>
<li class="level1 nav-52 item">
<a
class="menu-link"
href="/brands/tiny-love.html"
><span>Tiny Love</span></a
>
</li>
<li class="level1 nav-53 item">
<a
class="menu-link"
href="/brands/tommee-tippee.html"
><span>Tommee Tippee</span></a
>
</li>
<li class="level1 nav-54 item">
<a
class="menu-link"
href="/brands/tomy.html"
><span>Tomy</span></a
>
</li>
<li class="level1 nav-55 item">
<a
class="menu-link"
href="/brands/vicks.html"
><span>Vicks</span></a
>
</li>
<li class="level1 nav-56 item">
<a
class="menu-link"
href="/brands/vital-baby.html"
><span>Vital Baby</span></a
>
</li>
<li class="level1 nav-57 item">
<a
class="menu-link"
href="/brands/vtech.html"
><span>vTech</span></a
>
</li>
<li class="level1 nav-58 item">
<a
class="menu-link"
href="/brands/we-made-me.html"
><span>We Made Me</span></a
>
</li>
<li class="level1 nav-59 item">
<a
class="menu-link"
href="/brands/widdop-bingham.html"
><span>Widdop Bingham</span></a
>
</li>
<li class="level1 nav-60 item last">
<a
class="menu-link"
href="/brands/winnie-the-pooh.html"
><span>Winnie The Pooh</span></a
>
</li>
</ul>Output i am getting: https://paste.pics/be37c962a84545356f416db149368a92
i want to achieve like the screen shot below: https://paste.pics/ff36dd98eb6fcf126004b581ac466f93
The approach is straightforward.
One queries a node list of all of a navigation/link-list's direct children ... document.querySelectorAll('.groupmenu-drop > li').
Following up one creates an Array.from this node list and mapss it into an array of mutated list-item elements which each gets assigned its text-content's first letter-character as value of an own data-first-char-attribute.
Then one reduces all items into an array of list-item elements which each start with a different letter than their directly preceding list-item.
Finally forEach collected new first-character list-item one adds a related class-name like new-first-char.
In the same time one would slightly change some selector rules
The ::before pseudo-element rendering would be covered by a changed rule like ...
.groupmenu-drop .level1.new-first-char::before {
content: attr(data-first-char);
}
... which targets every list-item that features a new-first-char class-name , and where the latter's content gets rendered by the value of this very element's data-first-char attribute.
The active/selected state of such pseudo-elements then just needs to be targeted by ...
.groupmenu-drop .level1.new-first-char.selected::before {
background-color: #166665;
color: #fef6eb;
}
One has to at least touch the list elements where the pseudo-element rendering takes place because one can not rely anymore on the OP's original content rendering via the counter css-function. This is due to the OP's design of a single flat/non-nested list which by the OP's original counter-functionality forces the continuous alphabetical pseudo-element enumeration for each list item.
Therefore it is best to target the pseudo-element rendering by just a class-name like new-first-char where the pseudo-element's content gets rendered from this very element's data-first-char attribute-value.
function init() {
const newFirstCharacterItems = Array
.from(
document
.querySelectorAll('.groupmenu-drop > li')
)
.map(elmNode => {
const textContent = elmNode
.querySelector('a > span')
?.textContent ?? '';
let char = textContent
.trim()
// https://www.regular-expressions.info/unicode.html#category
.match(/\p{L}/u) // first letter character.
?.[0] ?? '';
char = char
.toUpperCase();
elmNode
.dataset
.firstChar = char;
return elmNode;
})
.reduce(({ currentCharacter = '', result }, elmNode) => {
const char = elmNode
.dataset
.firstChar;
if (char !== '' && char !== currentCharacter) {
currentCharacter = char;
result
.push(elmNode);
}
return { currentCharacter, result };
}, { result: [] }).result;
newFirstCharacterItems
.forEach(elmNode =>
elmNode
.classList
.add('new-first-char')
);
}
init();body { margin: 0; zoom: .7; }
.groupmenu-drop {
max-width: 900px;
margin: auto;
column-count: 4;
counter-reset: alphabeticList;
/* additional fix */
list-style: none;
}
@media (max-width: 767px) {
.groupmenu-drop {
column-count: 1;
margin-left: 40px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.groupmenu-drop {
column-count: 2;
margin-left: 50px;
}
}
.groupmenu-drop > .level1 {
position: relative;
padding: 0 0 14px !important;
counter-increment: alphabeticList;
}
.groupmenu-drop > .level1 {
padding-bottom: 5px;
}
.groupmenu-drop > .level1 a {
font: 600 14px/30px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #166665;
}
/* slightly changed selector */
.groupmenu-drop .level1.new-first-char::before {
/*content: counter(alphabeticList, upper-alpha);*/
/* changed content rendering */
content: attr(data-first-char);
position: absolute;
top: 3px;
left: -40px;
border: 2px solid #166665;
text-align: center;
border-radius: 7px;
font: bold 21px/34px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #095352;
width: 27px;
height: 27px;
line-height: 23px;
}
/* slightly changed selector */
.groupmenu-drop .level1.new-first-char.selected::before {
background-color: #166665;
color: #fef6eb;
}<ul class="groupmenu-drop slidedown">
<li class="level1 nav-1 item">
<a
class="menu-link"
href="/brands/angelcare.html"
><span>Angelcare</span></a
>
</li>
<li class="level1 nav-2 item selected">
<a
class="menu-link"
href="/brands/baby-art.html"
><span>Baby Art</span></a
>
</li>
<li class="level1 nav-3 item">
<a
class="menu-link"
href="/brands/barbie.html"
><span>Barbie</span></a
>
</li>
<li class="level1 nav-4 item">
<a
class="menu-link"
href="/brands/bibado.html"
><span>Bibado</span></a
>
</li>
<li class="level1 nav-5 item">
<a
class="menu-link"
href="/brands/boon.html"
><span>Boon</span></a
>
</li>
<li class="level1 nav-6 item">
<a
class="menu-link"
href="/brands/braun.html"
><span>Braun</span></a
>
</li>
<li class="level1 nav-7 item">
<a
class="menu-link"
href="/brands/diono.html"
><span>Diono</span></a
>
</li>
<li class="level1 nav-8 item">
<a
class="menu-link"
href="/brands/disney.html"
><span>Disney</span></a
>
</li>
<li class="level1 nav-9 item">
<a
class="menu-link"
href="/brands/dorel.html"
><span>Dorel</span></a
>
</li>
<li class="level1 nav-10 item">
<a
class="menu-link"
href="/brands/dr-brown-s.html"
><span>Dr Brown's</span></a
>
</li>
<li class="level1 nav-11 item">
<a
class="menu-link"
href="/brands/dreambaby.html"
><span>Dreambaby</span></a
>
</li>
<li class="level1 nav-12 item">
<a
class="menu-link"
href="/brands/dreamgenii.html"
><span>Dreamgenii</span></a
>
</li>
<li class="level1 nav-13 item">
<a
class="menu-link"
href="/brands/dumbo.html"
><span>Dumbo</span></a
>
</li>
<li class="level1 nav-14 item">
<a
class="menu-link"
href="/brands/earth-friendly-baby.html"
><span>Earth Friendly Baby</span></a
>
</li>
<li class="level1 nav-15 item">
<a
class="menu-link"
href="/brands/east-coast.html"
><span>East Coast</span></a
>
</li>
<li class="level1 nav-16 item selected">
<a
class="menu-link"
href="/brands/fisher-price.html"
><span>Fisher-Price</span></a
>
</li>
<li class="level1 nav-17 item">
<a
class="menu-link"
href="/brands/fisher-price-little-people.html"
><span>Fisher-Price Little People</span></a
>
</li>
<li class="level1 nav-18 item">
<a
class="menu-link"
href="/brands/flair.html"
><span>Flair</span></a
>
</li>
<li class="level1 nav-19 item">
<a
class="menu-link"
href="/brands/gift-wrap-accessories.html"
><span>Gift Wrap Accessories</span></a
>
</li>
<li class="level1 nav-20 item">
<a
class="menu-link"
href="/brands/halilit.html"
><span>Halilit</span></a
>
</li>
<li class="level1 nav-21 item">
<a
class="menu-link"
href="/brands/hey-clay.html"
><span>Hey Clay</span></a
>
</li>
<li class="level1 nav-22 item">
<a
class="menu-link"
href="/brands/hot-wheels.html"
><span>Hot Wheels</span></a
>
</li>
<li class="level1 nav-23 item">
<a
class="menu-link"
href="/brands/infantino.html"
><span>Infantino</span></a
>
</li>
<li class="level1 nav-24 item">
<a
class="menu-link"
href="/brands/janod.html"
><span>Janod</span></a
>
</li>
<li class="level1 nav-25 item">
<a
class="menu-link"
href="/brands/kaloo.html"
><span>Kaloo</span></a
>
</li>
<li class="level1 nav-26 item">
<a
class="menu-link"
href="/brands/keel-toys.html"
><span>Keel Toys</span></a
>
</li>
<li class="level1 nav-27 item">
<a
class="menu-link"
href="/brands/lalaboom.html"
><span>Lalaboom</span></a
>
</li>
<li class="level1 nav-28 item">
<a
class="menu-link"
href="/brands/lamaze.html"
><span>Lamaze</span></a
>
</li>
<li class="level1 nav-29 item">
<a
class="menu-link"
href="/brands/lansinoh.html"
><span>Lansinoh</span></a
>
</li>
<li class="level1 nav-30 item">
<a
class="menu-link"
href="/brands/leap-frog.html"
><span>Leap Frog</span></a
>
</li>
<li class="level1 nav-31 item">
<a
class="menu-link"
href="/brands/lindam.html"
><span>Lindam</span></a
>
</li>
<li class="level1 nav-32 item">
<a
class="menu-link"
href="/brands/little-bird-told-me.html"
><span>Little Bird Told Me</span></a
>
</li>
<li class="level1 nav-33 item">
<a class="menu-link" href="/brands/mam.html"
><span>MAM</span></a
>
</li>
<li class="level1 nav-34 item">
<a
class="menu-link"
href="/brands/mattel.html"
><span>Mattel</span></a
>
</li>
<li class="level1 nav-35 item">
<a
class="menu-link"
href="/brands/medela.html"
><span>Medela</span></a
>
</li>
<li class="level1 nav-36 item">
<a
class="menu-link"
href="/brands/mega-bloks.html"
><span>Mega Bloks</span></a
>
</li>
<li class="level1 nav-37 item">
<a
class="menu-link"
href="/brands/milton.html"
><span>Milton</span></a
>
</li>
<li class="level1 nav-38 item">
<a
class="menu-link"
href="/brands/munchkin.html"
><span>Munchkin</span></a
>
</li>
<li class="level1 nav-39 item">
<a
class="menu-link"
href="/brands/my-garden-baby.html"
><span>My Garden Baby</span></a
>
</li>
<li class="level1 nav-40 item">
<a
class="menu-link"
href="/brands/nuby.html"
><span>Nuby</span></a
>
</li>
<li class="level1 nav-41 item">
<a class="menu-link" href="/brands/nuk.html"
><span>NUK</span></a
>
</li>
<li class="level1 nav-42 item">
<a
class="menu-link"
href="/brands/philips-avent.html"
><span>Philips Avent</span></a
>
</li>
<li class="level1 nav-43 item">
<a
class="menu-link"
href="/brands/plasticine.html"
><span>Plasticine</span></a
>
</li>
<li class="level1 nav-44 item">
<a
class="menu-link"
href="/brands/playmobil.html"
><span>Playmobil</span></a
>
</li>
<li class="level1 nav-45 item">
<a
class="menu-link"
href="/brands/ragtales.html"
><span>Ragtales</span></a
>
</li>
<li class="level1 nav-46 item">
<a
class="menu-link"
href="/brands/safety-first.html"
><span>Safety First</span></a
>
</li>
<li class="level1 nav-47 item">
<a
class="menu-link"
href="/brands/schleich.html"
><span>Schleich</span></a
>
</li>
<li class="level1 nav-48 item">
<a
class="menu-link"
href="/brands/summer-infant.html"
><span>Summer Infant</span></a
>
</li>
<li class="level1 nav-49 item">
<a
class="menu-link"
href="/brands/swaddleme.html"
><span>SwaddleMe</span></a
>
</li>
<li class="level1 nav-50 item">
<a
class="menu-link"
href="/brands/taf-toys.html"
><span>Taf Toys</span></a
>
</li>
<li class="level1 nav-51 item">
<a
class="menu-link"
href="/brands/thomas-and-friends.html"
><span>Thomas and Friends</span></a
>
</li>
<li class="level1 nav-52 item">
<a
class="menu-link"
href="/brands/tiny-love.html"
><span>Tiny Love</span></a
>
</li>
<li class="level1 nav-53 item">
<a
class="menu-link"
href="/brands/tommee-tippee.html"
><span>Tommee Tippee</span></a
>
</li>
<li class="level1 nav-54 item">
<a
class="menu-link"
href="/brands/tomy.html"
><span>Tomy</span></a
>
</li>
<li class="level1 nav-55 item">
<a
class="menu-link"
href="/brands/vicks.html"
><span>Vicks</span></a
>
</li>
<li class="level1 nav-56 item">
<a
class="menu-link"
href="/brands/vital-baby.html"
><span>Vital Baby</span></a
>
</li>
<li class="level1 nav-57 item">
<a
class="menu-link"
href="/brands/vtech.html"
><span>vTech</span></a
>
</li>
<li class="level1 nav-58 item">
<a
class="menu-link"
href="/brands/we-made-me.html"
><span>We Made Me</span></a
>
</li>
<li class="level1 nav-59 item">
<a
class="menu-link"
href="/brands/widdop-bingham.html"
><span>Widdop Bingham</span></a
>
</li>
<li class="level1 nav-60 item last">
<a
class="menu-link"
href="/brands/winnie-the-pooh.html"
><span>Winnie The Pooh</span></a
>
</li>
</ul>