Creating a 3-level menu using the Htmlix framework

htmlix - micro framework based on data properties. Of the advantages, this is a small size, the ability to clearly structure the code, the presence of user events for updating the DOM, and server-side rendering in all languages ​​by default, since it is embedded in the existing structure of the Html file.

The framework itself has an object-oriented structure, where each property is an object. Obtaining, writing and deleting properties is done using the setProp (), getProp () and removeProp () methods, depending on the type of property, the application itself determines how it changes this property in html, if this class is called this function. htmlLink.classList.add ("class").

→ The finished example can be viewed at the link.
→ The example code can be downloaded here (top-menu-group.html, /js/top-menu-group.js files)
')
To connect files to the project, you need to copy the htmlix folder using the link above.

Our menu will contain a different number of sub-items in each item, and two final versions of the link: one is just text, the second is a picture and text.

To create duplicate in html in different places and in a different number of components in htmlix, virtual arrays and properties with the data type “group” are used.

A virtual array is an array that does not contain a reference to the Dom element with containers that can contain other components that have a property with the type “render-type” or “group” - as in our case.

Group properties group together containers from different virtual arrays.

We will have a 3-level menu, respectively, it is necessary to create three arrays - components,
one we will have the usual one with the name “menu” and two virtual ones with the names “menu_level_2”,
"Menu_level_3".

In javascript it will look like this:

var State = { menu: {//     html - data-menu="array" container: "item_level_1", //      html - data-item_level_1="container" props: [ /*    */], methods:{ /*      */ } }, virtualArrayComponents: {//     (    DOM) menu_level_2:{//  ,  html    container: "item_level_2",//    html - data-item_level_2="container" props: [/*    */], methods: { } }, menu_level_3:{//  container: "item_level_3", //    html - data-item_level_3="container" props: [ ], methods: { } }, }} 

Next, let's see how individually our components will look like in html code:

Array menu:

  <ul data-menu="array" class="nav-menu-3 pc-width"> <li data-item_level_1="container" data-item_level_1-over='mouseover' data-item_level_1-out='mouseout' > <a href="#" > </a> <ul class="hover-non" data-item_level_1-submenuclass="class" data-item_level_1-group="group" > <!--     data-item_level_2="container"    menu_level_2 - ---> </u> </li> </ul> 

Here:

data-menu = “array” - link to the first level array;
data-item_level_1 = “container” - link to the array container;
data-item_level_1-over = 'mouseover' - future property over - event handler for the 'mouseover' event;
data-item_level_1-out = 'mouseout' - out property; event handler for the 'mouseout' event;
data-item_level_1-submenuclass = "class" - property submenuclass - access to classes;
data-item_level_1-group = "group" - a property for grouping containers from virtual arrays - an array group ["group-children"] - contains all declared in html inside the tag - containers data-item_level_2 = "container" (all item_level_2 containers are contained in the virtual menu_level_2 array and in the group property only those that are declared in this particular container property data-item_level_1);

Virtual array menu_level_2

 <!--    --> <li data-item_level_2="container" data-item_level_2-over='mouseover' data-item_level_2-out='mouseout'> <a href="#"> </a> <ul class="hover-non" data-item_level_2-submenuclass="class" data-item_level_2-group_2="group"> <!--     data-item_level_3="container"    menu_level_3 - ---> </ul> </li> 

Here:

data-item_level_2 = “container” - link to virtual container container menu_level_2;
data-item_level_2-over = 'mouseover' - future property over - event handler for the 'mouseover' event;
data-item_level_2-out = 'mouseout' - out property; event handler for the 'mouseout' event;
data-item_level_2-submenuclass = "class" - property submenuclass - access to classes;
data-item_level_1-group_2 = “group” - a property for grouping containers from the following virtual arrays menu_level_3 and menu_level_3_img (which we have not created yet)

The menu_level_3 and menu_level_3_img virtual arrays follow the same principle:

 <li data-item_level_3="container"> <a href="#">item-level-3</a> </li> <li data-item_level_3_img="container"> <a href="#"><img src="/img/Thumbnail_300x300.png">item-level-3</img></a> </li> 

They do not contain properties, only a link to the html container, but in the future they can be added if the need arises.

Now let's edit the javascript code by adding all the properties and the same name handlers to the event properties

Completely ready code will look like this:

 var State = { menu: { container: "item_level_1", props: [ "submenuclass", "group", "over", "out"],//   methods:{ //     "over", "out" over: function(){ //this -      dom  (this.htmlLink)    //        submenuclass    (   ),     "hover-non"    . this.parentContainer.props.submenuclass.removeProp("hover-non"); }, out: function(){ this.parentContainer.props.submenuclass.setProp("hover-non"); }, } }, virtualArrayComponents: {//  menu_level_2:{ container: "item_level_2", props: [ "group_2", "submenuclass", "over", "out"], methods: { over: function(){ // . this.parentContainer.props.submenuclass.removeProp("hover-non"); }, out: function(){ this.parentContainer.props.submenuclass.setProp("hover-non"); }, } }, menu_level_3:{ container: "item_level_3", props: [ ], methods: { } }, menu_level_3_img:{ container: "item_level_3_img", props: [ ], methods: { } }, }, eventEmiters: { } } window.onload = function(){ ///  HTMLix var HM = new HTMLixState(State); console.log(HM); } 

That's basically the whole javascript code.

Html-code with components already placed in each other will look like this:

 <nav > <ul data-menu="array" class="nav-menu-3 pc-width"> <!--   menu --> <li data-item_level_1="container" data-item_level_1-over='mouseover' data-item_level_1-out='mouseout' > <a href="#" > </a> <ul class="hover-non" data-item_level_1-submenuclass="class" data-item_level_1-group="group" ><!--class="sub-nav-menu"--> <!--    menu_level_2 --> <li data-item_level_2="container" data-item_level_2-over='mouseover' data-item_level_2-out='mouseout'> <a href="#"> </a> <ul class="hover-non" data-item_level_2-submenuclass="class" data-item_level_2-group_2="group"> <!--    menu_level_3_img --> <li data-item_level_3_img="container"> <a href="#"><img src="/img/Thumbnail_300x300.png">item-level-3</img></a> </li> <li data-item_level_3_img="container"> <a href="#"><img src="/img/Thumbnail_300x300.png">item-level-3</img></a> </li> <li data-item_level_3_img="container"> <a href="#"><img src="/img/Thumbnail_300x300.png">item-level-3</img></a> </li> </ul> </li> <li data-item_level_2="container" data-item_level_2-over='mouseover' data-item_level_2-out='mouseout'> <a href="#"> </a> <ul class="hover-non" data-item_level_2-submenuclass="class" data-item_level_2-group_2="group"> <li data-item_level_3_img="container"> <a href="#"><img src="/img/Thumbnail_300x300.png">item-level-3</img></a> </li> <li data-item_level_3_img="container"> <a href="#"><img src="/img/Thumbnail_300x300.png">item-level-3</img></a> </li> </ul> </li> <!--                --> 

Creating a menu for the mobile version can be found here.

There are not so many methods in the framework, you can get acquainted with them by looking at the source code where there is a brief description of the main ones used during the work. So far, htmlix is ​​in the test version, but now with the help of it you can solve many typical frontend development tasks.

Brief documentation on all basic properties as well as tutorials to some sample applications can be read here .