UI Access

PREV
NEXT

Access this extension through HTML5 Dropdown Menu button on the S4W category of the Insert Panel (Window > Insert). It is also accessible by selecting Insert > Solutions4Website > HTML5 Dropdown Menu.

Inserting object

Open Dreamweaver, open document in which you want to place menu. Navigation menu can be inserted in page through the menu option "Insert -> Solutions4Website -> HTML5 Dropdown Menu" or the Insert Bar. After you choose "HTML5 Dropdown Menu" you will see a dialog window where you have to define the destination folder. There (in this folder) will be created folder 'menu_files' and inside this folder will be placed files: script files, dropdown-menu.css and images. Links to files jquery.dropdown-menu.js and dropdown-menu.css will be automatically added into tag <head>:

<link rel="stylesheet" type="text/css" href="menu_files/dropdown-menu.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="menu_files/jquery.dropdown-menu.min.js"></script>

Also in tag <head> will be automatically added script, which is initializing the component:

<script type="text/javascript">
  $(document).ready(function(){
    $("#JQDropMenu1").fdDropMenu({windowMinWidth:1000,
    autoHighlightCurrentPage:true,
    menuStretched:true,
    subMenuOpenOnClick:false,
    subMenuTransitionEasing:"easeOutSine",
    subMenuTransitionDuration:300,
    subItemCaptionAnimated:true});
  });
</script>

HTML5 Dropdown Menu is placed in a special tag <div id="JQDropMenu1" class="JQDropMenu">...</div>. More information about menu structure you can find in section 'Structure of the component'.

That’s all! In the design view of your web page you will see new HTML5 Dropdown Menu.