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

Tue Jun 29 16:36:26 UTC 2010

Absolutely agree, but I have seen several "edge cases" which require that
the navigation include a subtitle, strapline, or thumbnail image, rather
than just a text link.

Is there another way to inject additional fields/ content into a navigation
item that I'm missing?

On Tue, Jun 29, 2010 at 5:28 PM, Otto <otto at ottodestruct.com> wrote:

> 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
> >
> _______________________________________________
> wp-hackers mailing list
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers
>