Structure of the component

PREV
NEXT

After you have inserted component into web page, in HTML code will be added tag <div id="JQVerticalMenu1" class="JQVerticalMenu">...</div>. This tag contains body of the navigation menu. The following example shows the simple HTML code of the HTML5 Vertical menu:

<div id="JQVerticalMenu1" class="JQVerticalMenu">
<div class="line"></div>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub menu 2.1</a></li>
<li><a href="#">Sub menu 2.2</a>
<ul>
<li><a href="#">Sub menu 2.2.1</a></li>
<li><a href="#">Sub menu 2.2.2</a></li>
<li><a href="#">Sub menu 2.2.3</a></li>
</ul>
</li>
<li><a href="#">Sub menu 2.3</a></li>
</ul>
</li>
<li class="panel">
This is HTML panel
</li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>

Menu is realized with the help of <ul> and <li> tags, unordered list. You can change menu structure with the help of Wizard (Select оbject tag, then click 'Edit menu' button in Dreamweaver 'Properties' panel), then open 'Menu structure' category.

Menu elements can be of two types: 'Item' and 'Panel'. Element 'Item' has strucutre <li><a href="#">Sub menu 2.1</a></li> and contains hyperlink. Element 'Panel' has structure <li class="panel">This is HTML panel</li>. Inside tag <li> you can place your own HTML code.