Best way to implement JavaScript menu

(Valeri Nikitin) #1

Hi Guys,


I've got a webpage that has 5 sections |Home |About | Resources| News| Initiatives| and I want a javascipt menu to only appear in the |Resources| section.



Now I tried to use Nest Content but unfortunately it just won't seem to work with the javascript. Before this, I was more inclined to use customisation, but with the customisation i am not entirely sure on what 'Design Area' i should be using or if i should be using customisation at all.



Now if i put my import javascript in the Design Parse File it will just show on every section of the page. Do I create another Design Parse File and just use it as a front end design for the |Resource| section? It doesn't seem like this is the way to go, because i'd just be cloning the same design and if i wanted to change the CSS i'd have to change on both files.



I am leaning more towards customisation, is this the right path?

(Avi Miller) #2

I would've gone with a Nest Content myself. When you say it doesn't work with the javascript, what do you mean? Can you give us some code snippets of what the design should look like normally and in the Resources section?
(Valeri Nikitin) #3

In the nest_content i changed the Editor Properties to 'Raw_HTML' and put in the following:

     

<script type="text/javascript" src="mysource_files/mmenudom.js"></script>
<script type="text/javascript" src="mysource_files/menu_data.js"></script></pre><br />




If the design file I got:




    
    




I've customised the design so it has the nest content appearing. In the Details of the nest_content under 'Link' i chose the nest_content file as the assetid that represnts the asset to print in this nested content area. 



All the outcome does it print '> >'
(Avi Miller) #4

The mysource_files/ location only works for Designs, not for the rest of Matrix. If your nest_contest asset is a standard page, you would need to use something like this:


Where 123, 124 and 125 are the asset IDs of the JavaScript files. You would need to upload those first, as Text File assets.

Also remember to switch the Presentation to Raw as well as the Content Type to Raw HTML for your Nest Content page. Otherwise, you'll get <div id="..."> tags in the output, which will break things.
(Valeri Nikitin) #5

it worked! Thanks heaps.


Quick question: When having nested content do you have to have the Presentation to Raw as well as the Content Type to Raw HTML in order for it to work?

(Avi Miller) #6

Nope. It'll work regardless. However, if you have Presentation set to "Block", it'll wrap <div> tags around it. "Inline" wraps <span> tags and "Raw" puts no tags (which is what you want).
(Kai Altair) #7

The best way for building a JavaScript menu is to first design an HTML menu structure, and only then add the functionality using JavaScript. In this manner, all menu functionality can be gathered into a single file, making it simpler to understand and manage.
For instance, adding a link or changing the style may both be done by just updating the HTML code.You must first construct an HTML list of links for your basic menu before adding JavaScript interactivity. Make a function that will be called when a menu item is clicked on first.
This function, which should take the clicked link as an argument, will carry out whatever action you specify to be taken when a link is clicked.
The function will then be called when a link is clicked by adding an event listener to each link. To make it easier to target each link with JavaScript, give it a special identifier or class name.Finally, style the menu by including CSS into the HTML. By doing so, you may customise the menu to give it a genuine menu-like appearance and feel.
Additionally, you may utilise JavaScript to apply dynamic style by concealing specific components or animating transitions.The menu may be made responsive and mobile-friendly using jQuery or another framework after all of the functionality is ready.

#8

I am hoping that the OP resolved this one and didnt have to wait for the 15 years later response :sweat_smile: