Jahia DX > tree menu

0 (0 Good)
0 (0 Bad)

tree menu

by  erdem_ustun »  2011/06/07 17:59

is it possible to make a nested list menu or tree menu with jquery in jahia 6.5?
if yes,How can I make? can you show me with sample.
best regards...
  • tree menu
    2011/06/07 17:59

    erdem_ustun is it possible to make a nested list menu or tree menu with jquery in jahia 6.5? <br/>if yes,How can I make? can you show me with sample.<br/>best regards...

  • Number of messages  50
    Registration date Jun 7, 2011
    0 (0 Good)
    0 (0 Bad)

    Re: tree menu

    by  rvt »  2011/06/07 17:59

     

    Erdim,

     

    I am not sure if this is best practice within Jahia, but this is how I created a sliding topmenu with jQuery and Jahia.

    1) I create a file called : modules/templates-mytemplate/javascript/topmenu.js in my template with the following content:

    $(document).ready(function(){

    $('.level_2').width($('.dropdown-menu').width()-2);

    $('.hasChildren').hover(

    function () {

    $('.menu-first', this).addClass('slide-down'); 

    $('.level_2', this).slideDown(300);

    }, 

    function () {

    obj = this;

    $('.level_2', this).slideUp(300, function(){ $('.menu-first', obj).removeClass('slide-down'); });

    }

    );

    });

     

    2) I modified my template modules/templates-mytemplate/jnt_template/html/template.templates-mytemplate.jsp

    and added the following content:

    In <head> I added:

    <template:addResources type="javascript" resources="jquery.min.js"/> 

     

    On the bottom of the template I added: (I think this can be added in head under the jquery resource aswell).

    <template:addResources type="javascript" resources="topmenu.js"/> 

     

    Note 1: 

    You have to make sure that your CSS is correct, but that goes for any CSS based jquery menu.

    So essentially, you don't make your menu with jQuery, you just let Jahia create the menu, but you attach the right events to the DOM object using jQuery to create the effects or behavior you want.

     

    Ries

    PS: If there is a better way, I would be delighted to know, the above was simple and worked for me.

  • Re: tree menu
    2011/07/04 11:21

    rvt <p> &nbsp;</p> <p> <title></title> </p> <p> Erdim,</p> <p> &nbsp;</p> <p> I am not sure if this is best practice within Jahia, but this is how I created a sliding topmenu with jQuery and Jahia.</p> <p> 1) I create a file called : modules/templates-mytemplate/javascript/topmenu.js in my template with the following content:</p> <p> $(document).ready(function(){</p> <p> $(&#39;.level_2&#39;).width($(&#39;.dropdown-menu&#39;).width()-2);</p> <p> $(&#39;.hasChildren&#39;).hover(</p> <p> function () {</p> <p> $(&#39;.menu-first&#39;, this).addClass(&#39;slide-down&#39;);&nbsp;</p> <p> $(&#39;.level_2&#39;, this).slideDown(300);</p> <p> },&nbsp;</p> <p> function () {</p> <p> obj = this;</p> <p> $(&#39;.level_2&#39;, this).slideUp(300, function(){ $(&#39;.menu-first&#39;, obj).removeClass(&#39;slide-down&#39;); });</p> <p> }</p> <p> );</p> <p> });</p> <p> &nbsp;</p> <p> 2) I modified my template modules/templates-mytemplate/jnt_template/html/template.templates-mytemplate.jsp</p> <p> and added the following content:</p> <p> In &lt;head&gt; I added:</p> <p> &lt;template:addResources type=&quot;javascript&quot; resources=&quot;jquery.min.js&quot;/&gt;&nbsp;</p> <p> &nbsp;</p> <p> On the bottom of the template I added: (I think this can be added in head under the jquery resource aswell).</p> <p> &lt;template:addResources type=&quot;javascript&quot; resources=&quot;topmenu.js&quot;/&gt;&nbsp;</p> <p> &nbsp;</p> <p> Note 1:&nbsp;</p> <p> You have to make sure that your CSS is correct, but that goes for any CSS based jquery menu.</p> <p> So essentially, you don&#39;t make your menu with jQuery, you just let Jahia create the menu, but you attach the right events to the DOM object using jQuery to create the effects or behavior you want.</p> <p> &nbsp;</p> <p> Ries</p> <p> PS: If there is a better way, I would be delighted to know, the above was simple and worked for me.</p>

  • Number of messages  185
    Registration date Jun 7, 2011
    Contact
    Share
    Feedback

    Get in touch

    Whether you are a current user or if you are just evaluating Jahia, we are here to help.

    Contact us

    Share this page