Atalaya Studio

Before, Above, Below and After Item

You might be wondering "What is the difference?". The difference depends on where the item is located in a list hierarchy.

Above and Below

Under all circumstances, using Insert above or insert below will insert the code you've entered into the associated code block immediately preceding or immediately following the navigation item's LI tag. For example:

    <ul class="menu topmenu">
        <!-- insert codeblock above item 1 -->
        <li><a href="#" title="" >Item 1</a></li>
        <!-- insert codeblock below item 1 -->
        <!-- insert codeblock above item 2 -->
        <li><a href="#" title="" >Item 2</a></li>
        <!-- insert codeblock below item 2 -->
        <!-- insert codeblock above item 3 -->
        <li><a href="#" title="" >Item 3</a></li>
        <!-- insert codeblock below item 3 -->
     </ul>

Before and After

Insert Before Item is used to insert the upper code block before the opening UL tag of a sub list. For example, a parent item containing 2 sub items:

<ul class="menu topmenu">
    <li><a href="#" title="" >Parent</a>
        <!-- insert codeblock before Child 1 -->
        <ul>
           <li><a href="#" title="" >Child 1</a></li>
           <li><a href="#" title="" >Child 2</a></li>
        </ul>
     </li>
</ul>

Setting the Insert Before button for Child 1 will result in the code in the upper code block to be inserted before the UL tag that contains child items 1 and 2.

Insert After Item is used to insert the lower code block between the closing UL tag of a sub list and the closing LI tag of the containing LI tag. Expanding on the example above.

<ul class="menu topmenu">
    <li><a href="#" title="" >Parent</a>
        <!-- insert codeblock before Child 1 -->
        <ul>
           <li><a href="#" title="" >Child 1</a></li>
           <li><a href="#" title="" >Child 2</a></li>
        </ul>
        <!-- insert codeblock after Child 2 -->
     </li>
</ul>

Code Block Navigation Items

Code block navigation items are another type of item that can be added to your navigation list. The code block item is shown on the right. The item alias is not displayed on the web site and is primarily provided as a way of distinguishing one item from another on the NAVT List page.

A CSS class can be assigned to the LI tag that contains the HTML code block. The codeblock is can contain any HTML including selector ids and classes. The code will be inserted into the navigation list where it appears.

Pages: 1 2