Skip to main content
jayv25585659
jayv25585659
Level 8
February 28, 2018
解決済み

how to hide header menu item when using mobile devices?

  • February 28, 2018
  • 2 の返信
  • 2364 ビュー

so I have a custom menu item that I'm displaying on my header (it's just an icon that displays a menu on hover)

<sly data-sly-use.bookmark="berkeley/components/global/bookmark-menu/bookmark-menu.html" data-sly-call="${bookmark.object@detailListFlag=''}" data-sly-unwrap />

I have a need that I need to omit/hide this menu item while using mobile devices.

while I can use Javascript to do this (jQuery + wurlf-js), I'm wondering if this can be done by some sort of something already built-in to AEM (example: Java libraries). If there is something available, can you please provide a link or perhaps a short example?

Thanks a lot

    このトピックへの返信は締め切られました。
    ベストアンサー Hemant_arora

    Get the device type from a generic service class and use the value of that variable in sightly and add condition

    WCMUsePojo class

    if(request.getHeader("User-Agent").indexOf("Mobile") != -1) {

        //you're in mobile land 

    } else {

        //nope, this is probably a desktop 

    }

    SIGHTLY

    <li data-sly-test="${isMobile}">text</li>

    2 の返信

    Hemant_arora
    Hemant_arora回答
    Level 8
    February 28, 2018

    Get the device type from a generic service class and use the value of that variable in sightly and add condition

    WCMUsePojo class

    if(request.getHeader("User-Agent").indexOf("Mobile") != -1) {

        //you're in mobile land 

    } else {

        //nope, this is probably a desktop 

    }

    SIGHTLY

    <li data-sly-test="${isMobile}">text</li>

      smacdonald2008
      smacdonald2008
      Level 10
      February 28, 2018

      NIce answer - which is correct!

      契約条件Accessibility statement

      Loading footer...