James123
James123

Reputation: 11652

Hide menu item or dropdown menu item?

I have dropdown menu item ("pin this site") that i need to hide it or hide menu item itself ("My Network").

alt text

When I saw viewsource on page, I got below code.

<a class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3 
ms-topnavselected zz1_TopNavigationMenu_9" href="http://mynetworkqa.spe.org" 
style="border-style:none;font-size:1em;">My Network</a>


<a class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6" 
href="javascript:__doPostBack(,
'ctl00$PlaceHolderTopNavBar$PlaceHolderHorizontalNav$topSiteMap''Pin')" 
style="border-style:none;font-size:1em;">Pin this site</a>

How can I hide menu item?

Upvotes: 0

Views: 2886

Answers (1)

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

If you gave your links ids, then it would be much easier to hide them.

Something like $('#myLinkToHide').hide(); ... <a id='myLinkToHide'></a>

However since the source you provided doesn't have ids, the following may work for you. Save this as a .html file for an example.

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('a').each(function(){
                if($(this).html() == 'My Network')
                {
                    $(this).hide();
                }
            });
        });
    </script>
  </head>
  <body>
    <a class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3 ms-topnavselected zz1_TopNavigationMenu_9" href="http://mynetworkqa.spe.org" style="border-style:none;font-size:1em;">My Network</a>
    <a href='#'>Not Hidden</a>
  </body>
</html> 

EDIT

It's also hard to tell if any of the classes are unique to the links. That's why I'm using their content to find the correct one to hide.

If you happen to find a unique class, you can use $('.zz1_TopNavigationMenu_3').hide(); where zz1_TopNavigationMenu_3 is your class name.

Upvotes: 1

Related Questions