Menu Tabs in Admin Pages

1) Define the Menu Tabs

WordPress already has a convenient set of CSS definitions to present menu tabs, and this procedure takes advantage of them. Making use of class attributes retains the expected tab appearance while adding the menuing functionality.

The menu is defined by collectively wrapping the menu tabs inside a <h3> header definition element, where the header is defined with the ‘nav-tab-wrapper’ class, then defining <a> links as the individual tabs within the header, using the ‘nav-tab’ and ‘nav-tab-active’ classes to define the standardized appearance.

The “class” and “rel” attributes within the <a> element are the key to the menu tab part of the functionality, relying on two necessary attributes of the element.

  • “class” — This is the key to the menu appearance: all menu links must be defined with the “nav-tab” class but only one, which is the initially active tab, should have the “nav-tab-active” class as well. This CSS class is defined in WordPress; I’m simply taking advantage of it for my own use.
  • “rel” — This is the key to the panel selection: this value must match the “id” element in the corresponding <div> statement that surrounds the individual panels. This value must be unique to the menu links, unless two or more menu tabs are supposed to show the same admin panel.
  • “href” — This part is optional, as the Javascript statement does nothing, but I’ve found that having it defined means the cursor will react to the tab as if it were an actual link, because, otherwise, the browser may not show that is a clickable link.
Share
The short URL of the present article is: http://www.terryobrien.me/1x8oi

Page 2 of 5
First | Prev | 1 | 2 | 3 | 4 | 5 | Next | Last
View All