Navigation with Description

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

To create this kind of navigation in Xtreme One is a peace of cake. But this is only possible with the new implemented menus since WordPress 3.0.

Setup Navigation

To use the description of the menu, you have to activate a setting in your WordPress admin. Go to Appearance->Menus and hit the Screen Options on the top right. You will see the “show advanced menu properties” now. Please activate <>.

If a menu doesn’t exist yet, it will create a meaningful name and uses the desired elements. The description is now available. Take note, the description in articles or pages is already filled with the content of the page/article and has to be removed manually. Tip: The field CSS Classes can be used to add an icon in front of each menu element.

After you have saved the menu, please go to Appearance->Xtreme One and click on the metabox Navigation/Search. Decide between primary or secondary navigtion (settings are identical) and select the position of the navigation. At Stylesheetplease select descriptive and at Content the prior saved menu. The description with pages and categories doesn’t work. Use Menu Description has to be active, then an extra, for this kind of navigation, programmed walker will be started. Thereafter hit the Generate Theme button and the navigation will be placed at the desired position in your Childtheme.

The Markup

The generated markup is, except the additional span with the description, identical to the markup of menus without description, pages or categories.

<div id='primarynav' class='xf-container clearfix descriptive'>
    <div>
        <ul id="menu-desc">
            <li id="menu-item-83"><a href="#">Home<span>My Home</span></a></li>
            <li id="menu-item-82"><a href="#">Blog<span>My Blog</span></a></li>
            <li id="menu-item-80"><a href="#">Content<span>My Content</span></a></li>
        </ul>
    </div>
</div>

The CSS

The main container of the navigation will always get a lower case written filename of the chosen stylesheet assigned, in this case descriptive. Therefore, it is possible to use several navigations with different stylesheets:

#primarynav.descriptive .hlist { background: red }
#secondarynav.shinybuttons .hlist { background: green }

Additionally, Xtreme One adds via JavaScript in the first layer of the navigation list for the first list element the class first and for the last the class last. Also the list elements with description will get the class desc.

In “descriptive” Stylesheet all list elements are floated left and the last list element right. The navigation uses the complete available width. The width of the list elements is identical and has to be adjusted in theme.css of the Childthemes depending on the number of list elements

.descriptive ul li {
    width: 16.667%; /* 6 Elements */
}

You can find the stylesheet under xtreme-one/css/navigation/descriptive.css and get loaded automatically by the framework. The final styling will be made in theme.css of the Childthemes, in which the instructions are overwritten or added.

There is a second variant, which is a little bit different in style: The usage of the stylesheet shinybuttons. In this case all list elements float left and the width depends on the content. In stylesheet xtreme-one/css/navigation/shinybuttons.cssis a basic format, which can be expanded in theme.css of your Childtheme:

/** Menu with description **/
.shinybuttons .desc a { font-weight: bold }
.shinybuttons .desc a span { font-weight: normal; display:block; }