Member Avatar for b.shafabakhsh

Hi guys

I got a code from a website header menue from a website,It's a combination of JS, and CSS.

Right now I have the following code:

<script>
                $("#menu-images").Menu({
                    dataSource: [
                    {
                         text: "Dashboard", imageUrl: "images/home.png",
                    },
                        {

                            text: "Catalog", imageUrl: "images/AdminCatalog.gif",
                            items: [
                                { text: "View Products"},
                                { text: "Add Product"},
                                { text: "Product Categories"},
                                { text: "Search Products"},
                                { text: "Promotion"},
                                { text: "Tags"},
                            ]
                        },
 </script>

so here the "Catalog" is the name of the menue and "View products" and etc are the submenue for catalog,which will be appear when you bring your mouse on it.
I do not know how can I give these fildes a link to the other page?because right now the click event is not working,please help.
thank you and merry christmast.

Edited by b.shafabakhsh because: wrong spelling
  • 3 Contributors
  • 4 Replies
  • 115 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by radhakrishna.p

Dani AI

Generated

This menu is being created from a JavaScript data array, so the two things that usually stop subitems from acting like links are (1) a syntax/quoting error when you tried to inject HTML into the data object (that will stop the widget from initializing), or (2) the widget renders plain text and escapes any HTML you put into the text value so an <a> never becomes clickable. 's anchor suggestion can work if the widget actually accepts HTML; 's tip to look for a URL/item property or a per-item callback is exactly the right next step.

Quick, practical checklist

  • Open the browser devtools Console first. If the menu "vanished" after your edit you'll often see a syntax error (e.g. an unexpected token) — that tells you the string quoting/HTML broke the JS before the menu rendered.
  • Inspect the generated DOM (Elements tab). Do the menu labels render as <a> elements or plain text? If anchors are present but missing href, you can populate them after render. If there are no anchors, check the plugin docs for a per-item url, href, link (or a click/select callback) option.
  • If you need a robust fallback, attach a delegated click handler on the container and navigate programmatically. For example:
$('#menu-images').on('click', 'a', function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  if (href && href !== '#') window.location.href = href;
});

Use jQuery event delegation (.on() documentation) and navigate via window.location (MDN: Window.location). Also call preventDefault() to avoid default anchor behaviour (MDN: Event.preventDefault).

Notes and cautions

  • If you attempted to place raw <a> markup into the object without wrapping it properly as a JS string, that will break parsing. Either use the widget’s supported URL/callback option or ensure any HTML is supplied as a proper string and that the widget allows HTML (many widgets escape text by default).

Recommended Answers

All 4 Replies

Member Avatar for radhakrishna.p

just check it once by placing

<a href="#">View Products</a>

instead of

View Products

and let me know the status

Member Avatar for b.shafabakhsh

Hi radha

Do you mean

{ text: <a href="#"> "View Products" </a>},


Or


{ <a href="#"> text:"View Products" </a>},
?

anyway none of them are working,when I place it into my code the menu will no longer be appear.

Member Avatar for GliderPilot

My guess is you need to set another property in the items something like itemUrl, but we would need to see the rest of the JS code (the part that actually ouputs the HTML) to know exactly what it needs

Member Avatar for radhakrishna.p

no no not like that

try as follows

{ text: "<a href='#'> View Products </a> "  },

so it places hyper_link with text instead of only text (i think)

otherwise

try to do as GliderPilot said

Edited by radhakrishna.p
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.