Dropdown Menu - Structure

  • Menu elements can be of five types: Links, Headers, Separators, Images, and HTML elements.

    • The Link is a basic menu element. It can include an icon, text (label) and link (URL) to the web page or document. The browser is directed to the URL when a user clicks the Link Element.
    • The Header is a useful element which allows organizing the menu elements into groups.
    • The Separator is a simple element which represents a thematic break between the groups of elements.
    • The Image Element is similar to the Link Element. It includes a raster image, text (label) and link (URL) to the web page or document.
    • The HTML is the most versatile element. It can include custom HTML code, icon and link (URL) to the web page or document.

    Menu elements

  • To add an element, click the corresponding button.
  • To edit the properties, click on an element. The Properties form is located on the right below the Design window.
  • To move an element, just select it and drag it to another location.
  • To make an element as a child (as a submenu) for the parent element, drag it and put it to the same location with a small indent on the left.

    Only Link Element, Image Element or HTML Element can include child elements (submenu).

  • A right-click on an element opens the context menu. The context menu allows you to insert a new element into the proper place in your structure tree by one click.

    Also, using the context menu, you can copy an element with the child elements and paste it into any place of the structure tree. Copied elements are inserted above the element selected for paste.

    On Mac, you can simulate a right-click by holding down the control key while performing a mouse click or trackpad click.
  • To import menu structure, paste HTML code with links into the input field.
    A menu structure is a series of nested <ul> elements. A menu link is a combination of the <li> and <a> tags.

    Example code with two levels of hierarchy:

    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="#">News</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Gallery</a></li>
            </ul>
        </li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Contact Us</a></li>
        <!-- etc. -->
    </ul>
    

  • The Instant Menu Wizard is a tool that crawls your website, extracts the links and automatically creates a menu structure.




Uploading ...