[wp-hackers] Adding class to first menu item of submenu inwp_nav_menu

ErisDS erisds at gmail.com
Tue Jun 29 06:55:10 UTC 2010


Out of interest, are there good reasons not to use a custom walker class to
achieve this?

I realise it's a relatively small change and a custom walker could be seen
as overkill, but generally I find in projects that I do need to change css,
or add spans or other stuff to the navigation so I always put in my own
walker class. It also is a bit more futureproof I find as if I need to make
further unanticipated changes to the menu's html & css it can be done with
relative ease.

Eris

On Mon, Jun 28, 2010 at 4:51 PM, ProDevStudio <prodevstudio at gmail.com>wrote:

> Hi All,
>
> I present you a very simple solution to this issue using jquery:
>
> $('ul.sub-menu :first-child').addClass('first-child');
>
>
> equally (but more specific):
>
>
> $('.menu ul.sub-menu :first-child').addClass('first-child');
>
>
>
> This will add the class first-child to all the matching first item.
>
>
>
> Kind Regards,
> Azizur Rahman
>
> ----
> Do you need cost-effective web hosting solution and Domain name try
> http://prodevstudio.com
>
>
>
>
> On Mon, Jun 28, 2010 at 3:55 PM, Jake Goldman <
> wphackers at jakemgold.myfastmail.com> wrote:
>
> >  Also never had an issue with first-child selector in IE7+, or any
> version
> > in recent memory of the other browsers. I have seen a lot of HTML/CSS
> > developers confuse what exactly this selector does, however.
> >
> > Often times we let IE6 users "live with" losing the first-child selector
> > styles. If its essential, I recommend using IE6 conditional JavaScript to
> > apply the style (super easy with jquery if it's loaded anyways).
> >
> > Jake
> >
> >
> > On 6/28/2010 9:53 AM, Otto wrote:
> >
> >> Define "flakey". See, I see a lot of this sort of response, but nobody
> >> ever explains what they mean.
> >>
> >> In my experience, :first-child and other CSS selectors work fine.
> >>
> >> What's "flakey" is poorly conceived and implemented PHP hacks designed
> >> to needlessly alter HTML in order to accomplish the same thing that
> >> the selector can do just fine.
> >>
> >> -Otto
> >>
> >>
> >>
> >> On Mon, Jun 28, 2010 at 5:18 AM, Gavin Pearce<Gavin.Pearce at 3seven9.com>
> >>  wrote:
> >>
> >>> Hi Otto, Mike,
> >>>
> >>>  From experience, ul.sub-menu li:first-child, can be a little flakey at
> >>> times, even if it's meant to be supported.
> >>>
> >>> Notwithstanding IE6 ... ;)
> >>>
> >>> G
> >>>
> >>> -----Original Message-----
> >>> From: wp-hackers-bounces at lists.automattic.com [mailto:
> >>> wp-hackers-bounces at lists.automattic.com] On Behalf Of Otto
> >>> Sent: 28 June 2010 06:18
> >>> To: wp-hackers at lists.automattic.com
> >>> Subject: Re: [wp-hackers] Adding class to first menu item of submenu
> >>> inwp_nav_menu
> >>>
> >>> Nope, it is. See their test page. They use a "test link" which adds
> >>> stuff to the DOM via Javascript.
> >>>
> >>> -Otto
> >>>
> >>>
> >>>
> >>> On Sun, Jun 27, 2010 at 8:46 PM, Mike Schinkel
> >>> <mikeschinkel at newclarity.net>  wrote:
> >>>
> >>>> Actually, according to your link, it does work in IE7 and up. The
> >>>>> caveats it mentions occur when you change the DOM via javascript.
> >>>>>
> >>>>
> >>>> Point taken. But for IE8:
> >>>>
> >>>> "IE8 does the right thing only after you remove the focus from the
> test
> >>>> link."
> >>>>
> >>>> Unless I misread, that's not related to DOM manipulation?  FWIW.
> >>>>
> >>>> -Mike
> >>>>
> >>>> On Jun 27, 2010, at 9:06 PM, Otto wrote:
> >>>>
> >>>>  Actually, according to your link, it does work in IE7 and up. The
> >>>>> caveats it mentions occur when you change the DOM via javascript.
> >>>>>
> >>>>> -Otto
> >>>>>
> >>>>>
> >>>>>
> >>>>> On Sun, Jun 27, 2010 at 7:29 PM, Mike Schinkel
> >>>>> <mikeschinkel at newclarity.net>  wrote:
> >>>>>
> >>>>>> Why would you need that? Just use "ul.sub-menu li:first-child". CSS2
> >>>>>>> has you covered on that score.
> >>>>>>>
> >>>>>> FYI, li:first-child doesn't work 100%[1] in IE8 nor at all in IE7,
> >>>>>> unfortunately.
> >>>>>>
> >>>>>> -Mike
> >>>>>> [1] http://www.quirksmode.org/css/contents.html
> >>>>>>
> >>>>>> _______________________________________________
> >>>>>> wp-hackers mailing list
> >>>>>> wp-hackers at lists.automattic.com
> >>>>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
> >>>>>>
> >>>>>>  _______________________________________________
> >>>>> wp-hackers mailing list
> >>>>> wp-hackers at lists.automattic.com
> >>>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
> >>>>>
> >>>> _______________________________________________
> >>>> wp-hackers mailing list
> >>>> wp-hackers at lists.automattic.com
> >>>> http://lists.automattic.com/mailman/listinfo/wp-hackers
> >>>>
> >>>>  _______________________________________________
> >>> wp-hackers mailing list
> >>> wp-hackers at lists.automattic.com
> >>> http://lists.automattic.com/mailman/listinfo/wp-hackers
> >>> _______________________________________________
> >>> wp-hackers mailing list
> >>> wp-hackers at lists.automattic.com
> >>> http://lists.automattic.com/mailman/listinfo/wp-hackers
> >>>
> >>>  _______________________________________________
> >> wp-hackers mailing list
> >> wp-hackers at lists.automattic.com
> >> http://lists.automattic.com/mailman/listinfo/wp-hackers
> >>
> > _______________________________________________
> > wp-hackers mailing list
> > wp-hackers at lists.automattic.com
> > http://lists.automattic.com/mailman/listinfo/wp-hackers
> >
> _______________________________________________
> wp-hackers mailing list
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers
>


More information about the wp-hackers mailing list