How to Use SmartMenus With DynamicUL #235
Replies: 5 comments 7 replies
-
|
Yes, it should work. The SmartMenus init code should be called after the UL is available in the DOM. If you are populating the content of the list (i.e. the LI elements) after the SmartMenus script has been initialized for the UL element, you will need to call the "refresh" method: https://www.smartmenus.org/docs/#refreshInstance If you still have any toubles, please post a link to some kind of demo page. |
Beta Was this translation helpful? Give feedback.
-
|
@vadikom Here is my updated code. I'm just getting a blank page. Do I have the order correct for the plugin to load at the right time? |
Beta Was this translation helpful? Give feedback.
-
|
OK, no need for the "refresh" method in your case since you are creating the whole UL element not just populating its content. In order to avoid any troubles with your own code, please first confirm the following works (SmartMenus excluded): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="smartmenus">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Jim Gilliam">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to HTML Bullet List</title>
</head>
<body>
<div id="main-menu" class="sm sm-blue"></div>
<script>
const jsonData = '<!--JSON DATA-->';
function createBulletList(data) {
let html = "<ul>";
if (Array.isArray(data.TocEntry)) {
for (const entry of data.TocEntry) {
html += "<li>";
html += entry["@Title"];
if (entry.TocEntry) {
html += createBulletList(entry);
}
html += "</li>";
}
} else {
html += "<li>";
html += data.TocEntry["@Title"];
if (data.TocEntry.TocEntry) {
html += createBulletList(data.TocEntry);
}
html += "</li>";
}
html += "</ul>";
return html;
}
document.addEventListener("DOMContentLoaded", function () {
const outputDiv = document.getElementById("main-menu");
outputDiv.innerHTML = createBulletList(JSON.parse(jsonData));
});
</script>
</body>
</html>And if the list appears, then this should initialize the SmartMenus script properly: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="smartmenus">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Jim Gilliam">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to HTML Bullet List</title>
<!-- SmartMenus core CSS (required) -->
<link href="sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main-menu" class="sm sm-blue"></div>
<script>
const jsonData = '<!--JSON DATA-->';
function createBulletList(data) {
let html = "<ul>";
if (Array.isArray(data.TocEntry)) {
for (const entry of data.TocEntry) {
html += "<li>";
html += entry["@Title"];
if (entry.TocEntry) {
html += createBulletList(entry);
}
html += "</li>";
}
} else {
html += "<li>";
html += data.TocEntry["@Title"];
if (data.TocEntry.TocEntry) {
html += createBulletList(data.TocEntry);
}
html += "</li>";
}
html += "</ul>";
return html;
}
document.addEventListener("DOMContentLoaded", function () {
const outputDiv = document.getElementById("main-menu");
outputDiv.innerHTML = createBulletList(JSON.parse(jsonData));
});
</script>
<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu > ul').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
</body>
</html>Of course, you should make sure the paths to |
Beta Was this translation helpful? Give feedback.
-
|
@vadikom The first one works fine (without SmartMenu). The second version gives me a blank screen. No errors or warnings in the console either, so I don't understand. I'm guessing that SmartMenu doesn't understand my JSON? I'm unable to give a demo link, but here is a sample of the JSON I put into both versions above. All files are in the root folder (except the blue CSS has a subfolder). |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for the delay, I was on a short vacation the last few days last week! I just realized what the main problem is - you have the "sm sm-blue" classes set on the parent DIV and they need to be set on the root UL element. I tested the following and it should work: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="smartmenus">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Jim Gilliam">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to HTML Bullet List</title>
<!-- SmartMenus core CSS (required) -->
<link href="sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main-menu"></div>
<script>
const jsonData = `{"@Version": "1","TocEntry": [
{"@Title": "[%=System.LinkedTitle%]",
"@Link": "/Content/home.htm"
},
{"@Title": "_Introduction",
"TocEntry": [
{
"@Title": "Are You Using Annotations?",
"@Link": "/Content/_DocTeam-StyleGuide/_Introduction/annotations.htm",
"@generatedToc": "true"
},
{
"@Title": "General Font Families the DocTeam Uses",
"@Link": "/Content/_DocTeam-StyleGuide/_Introduction/Fonts-UI.htm",
"@generatedToc": "true"
},
{
"@Title": "Save Time With Flare Macros!",
"@Link": "/Content/_DocTeam-StyleGuide/_Introduction/Macros-Create.htm",
"@generatedToc": "true"
},
{
"@Title": "Retrospective About Global Project Linking",
"@Link": "/Content/_DocTeam-StyleGuide/_Introduction/whygloballinkingdidntwork.htm",
"@generatedToc": "true"
}
]
},
{
"@Title": "BestPractices",
"TocEntry": [
{
"@Title": "CardsButtonsShows",
"TocEntry": [
{
"@Title": "Basic DocTeam Button Styles",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/CardsButtonsShows/Buttons-General.htm",
"@generatedToc": "true"
},
{
"@Title": "General Cards to Use",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/CardsButtonsShows/Cards-General.htm",
"@generatedToc": "true"
},
{
"@Title": "How to Style Code Snippets",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/CardsButtonsShows/Code-Styling.htm",
"@generatedToc": "true"
},
{
"@Title": "Create a DropCap",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/CardsButtonsShows/createDropCap.htm",
"@generatedToc": "true"
},
{
"@Title": "Image Thumbnails in HTML Output",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/CardsButtonsShows/Images-Thumbnails.htm",
"@generatedToc": "true"
},
{
"@Title": "Slideshow",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/CardsButtonsShows/Slideshow.htm",
"@generatedToc": "true"
}
]
},
{
"@Title": "FeedbackMechanism",
"TocEntry": {
"@Title": "Using Jira Issue Collectors in Flare Outputs",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/FeedbackMechanism/userFeedbackMechanism-Jira.htm",
"@generatedToc": "true"
}
},
{
"@Title": "toolbar_ControlPanel",
"TocEntry": [
{
"@Title": "Apply a Theme Switcher to HTML5 Output",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/toolbar_ControlPanel/darkLightMode.htm",
"@generatedToc": "true"
},
{
"@Title": "Show and Hide the SideNav Menu",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/toolbar_ControlPanel/SideNav-Show-Hide.htm",
"@generatedToc": "true"
},
{
"@Title": "Custom Toolbar Code Snippets",
"@Link": "/Content/_DocTeam-StyleGuide/BestPractices/toolbar_ControlPanel/toolbarFunctions.htm",
"@generatedToc": "true"
}
]
},
{
"@Title": "toolbar_TopicFeatures"
}
]
},
{
"@Title": "RSSFeeds",
"TocEntry": [
{
"@Title": "Feed Reader",
"@Link": "/Content/_DocTeam-StyleGuide/RSSFeeds/rssFeedReader.htm",
"@generatedToc": "true"
},
{
"@Title": "[Insert Title for This External RSS Topic (Item)]",
"@Link": "/Content/_DocTeam-StyleGuide/RSSFeeds/rssTopicTemplate-External.htm",
"@generatedToc": "true"
},
{
"@Title": "[Insert Title for This External RSS Topic (Item)]",
"@Link": "/Content/_DocTeam-StyleGuide/RSSFeeds/rssTopicTemplate-Internal.htm",
"@generatedToc": "true"
}
]
}
]
}`;
function createBulletList(data, root) {
let html = `<ul${ root ? ' class="sm sm-blue"' : '' }>`;
if (Array.isArray(data.TocEntry)) {
for (const entry of data.TocEntry) {
html += '<li><a href="';
html += entry["@Link"] || "#";
html += '">';
html += entry["@Title"];
html += "</a>";
if (entry.TocEntry) {
html += createBulletList(entry);
}
html += "</li>";
}
} else {
html += '<li><a href="';
html += data.TocEntry["@Link"] || "#";
html += '">';
html += data.TocEntry["@Title"];
html += "</a>";
if (data.TocEntry.TocEntry) {
html += createBulletList(data.TocEntry);
}
html += "</li>";
}
html += "</ul>";
return html;
}
document.addEventListener("DOMContentLoaded", function () {
const outputDiv = document.getElementById("main-menu");
outputDiv.innerHTML = createBulletList(JSON.parse(jsonData), true);
});
</script>
<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function () {
$('#main-menu > ul').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
</body>
</html>I have also modified slightly the Cheers! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, @vadikom. The horizontal works great! When I add sm-vertical, though, the dropdowns don't show. I'll try to figure out the problem, but I don't see it offhand. |
Beta Was this translation helpful? Give feedback.
-
|
still no success. |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, adding the function createBulletList(data, root) {
let html = `<ul${ root ? ' class="sm sm-vertical sm-blue"' : '' }>`;
...Please also note that you need to make room for the sub menus to appear inside the viewport (i.e. apply some width of your vertical main menu). If your vertical main menu takes the fill width of your page, the sub menus will simply appear outside the viewport and you will not be able to see them although they might be popping and functioning properly. |
Beta Was this translation helpful? Give feedback.
-
|
@vadikom I finally got a chance to come back to this, and you're exactly right, vadikom.... I wasn't leaving enough room for the submenus. Things are working perfectly now! Thank you so much for your help and for your patience. Jim |
Beta Was this translation helpful? Give feedback.
-
|
And... instead of transforming XML into JSON and then running the smartmenus process, I transformed my XML TOC into HTML directly and then used smartmenus on the transformed html. Works like a charm! Check it out. |
Beta Was this translation helpful? Give feedback.
-
|
Absolutely, |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, Aliyaali! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
My UL is dynamically generated. Will SmartMenus work with that? I keep getting a blank page. When I don't have SmartMenus in my html, the dynamic list populates a bulleted list as it should.
Beta Was this translation helpful? Give feedback.
All reactions