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

Tue Jun 29 16:28:48 UTC 2010

Using a custom walker or callback for these sort of things has both
advantages and disadvantages.

Advantage: You're in total control of the resulting HTML.
Disadvantage: You're in total control of the resulting HTML.

Generally speaking, you shouldn't have to modify the HTML as a whole.
If you do have to do so, then you're either an extreme edge case, or
the function needs to be modified to give you a better way to only
modify the specific piece that you need to change.

Inserting spans and divs and such simply so you can refer to things in
the CSS is a cheap hacky way of doing things, it seems to me. There's
supposed to be a separation between content and styling here. If you
have to change the content in order to do styling to it, then there
must be some content that is missing in the first place, and it should
be treated as a bug and fixed in the core code itself.

On the other hand, if you can refer to some piece of the markup
already (like by using a selector, for example), then adding extra
markup to refer to it in a different way is wholly unnecessary.

Keeping the same HTML as everybody else means that you're sticking to
a standard way of defining your content in markup. Search Engines and
other HTML parsers (microformats, etc) will have an easier time
understanding your content if it uses the same markup design patterns
as everybody else does.

HTML is supposed to define the content in a semantic way, and that's
it. Adding extra bits onto it solely in order to make it look
different defeats the point. Yes, sometimes you have no choice, but
those cases are rarer and rarer as browsers start supporting all the
CSS goodness.

-Otto

On Tue, Jun 29, 2010 at 1:55 AM, ErisDS <erisds at gmail.com> wrote:
> 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
>>
> _______________________________________________
> wp-hackers mailing list
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers
>