Dropdown Menu - Element Properties

To edit the properties, click on a menu element. Available properties:
Visibility - allows hiding an element without deleting it.

  • Type - specifies the type of menu element (Link, Header, Separator, Image, or HTML).

  • Icon - specifies the icon of the Link Element. The collection includes 120+ most popular icons. You can import your own icon set. Details in the blog post: How to Add Vector Icons to Website Menu

  • Image - specifies the image of the Image Element. Click it to upload the new image file.

  • Text - defines the text of the Link Element, Header Element or Image Element.
    To add a line break, use the "<br>" tag. Example: Line1<br>Line2

  • Link - specifies the reference (URL) to the web page or document. The browser is directed to the URL when a user clicks the Link Element or Image Element. The Link is the equivalent of the HTML "href" attribute. Examples:

    - the entire URL of the page.

    - the page is in the root.

    - the page is in the current directory.

    The "~" (tilde) symbol is an abbreviation for the home directory of the website.
    Thus, the link will be considered as "http://www.MySite.com/MyPage.htm".

    - link to an email address.

    Helpful Links:
    Absolute vs. Relative Paths/Links
    Relative Links vs. Absolute Links: Server Paths Explained

    To call a JavaScript function in response to an element click, use the "javascript: function();" syntax.

    To call two or more functions, use the syntax:

    javascript: alert('Text #1'); alert('Text #2');

  • Target - specifies where to open the page. This field can be empty. Available values:

    - opens the page in a new window or tab.

    - opens the page in the same frame (this is default).

    - opens the page in the parent frame.

    - opens the page in the full body of the window.

    - opens the page in a named frame.

  • Tooltip - a small "hover box" with information about the Link Element or Image Element being hovered over. The tooltip appears when the user hovers the pointer over an element. To add a line break, use the "<br>" tag.

  • Code to highlight the element (read-only) - specifies the code to highlight a Link Element or Image Element. The highlighted element indicates which page the user is currently viewing. The code highlights the selected element as well as all the parent elements (the whole navigation path). Put this code after the code which shows up the menu.

    To see the code in action, click on the "Run Code". The corresponding menu element in design window will be highlighted.

  • Hoverable - is used to highlight the Link Element or Image Element when the user moves the mouse over it.

  • Right float - specifies that the element will float on the right side of the menu bar. Applied to the elements of the horizontal menu only.

Uploading ...