I am trying to generate the HTML for tree like (jsTree) out of a 2d array with no success.
I have the following array: My Array
and from this array i would like to create a tree html (ul and li) structure like:
<ul id="ParentId-0">
<li id="categoryID-1" data-parentid="1">
bla bla
<ul id="ParentId-1">
<li id="categoryID-20" data-parentid="20">
some Title
<ul id="ParentId-20">......</ul>
</li>
</ul>
</li>
<li id="categoryID-2" data-parentid="2">
second li Title
<ul id="ParentId-2">
<li id="categoryID-46" data-parentid="46">
Another Title
<ul id="ParentId-46">
<li id="categoryID-300" data-parentid="30">
And another Category
<ul id="ParentId-300"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Anyone with an idea?
Edit
I've tried using DOMDocument to create the tree and it worked however it took like 40 - 50 seconds to load and i am trying to find a faster way.
Related
I'm using wp_nav_menu() to print my navigation to the screen, and I would like to add data- attributes to either the <li> or the <a> within the <li>
What I want:
<ul>
<li data-width="width">
<a>Item</a>
</li>
</ul>
OR
<ul>
<li>
<a data-width="width">Item</a>
</li>
</ul>
In wp_nav_menu there is an attribute called items_wrap that will allow you to make the <ul> into whatever you want to wrap your items with, I'm wondering if something like this exists for the <li> and if not if its possible to make add something like this?
How can I create a function to scan all menu items from Drupal 7 system and if there is a nested ul, add dropdown CSS classes to the nested ul and add a custom attribute to the parent li container? Im using UIKIT which will automatically create the dropdowns.
Here's my current menu HTML output:
<ul class="menu">
<li class="first last expanded">
<a title="" href="/node/add">Add content</a>
<ul class="menu">
<li class="first leaf">
<a title="article" href="/node/add/article">Article</a></li>
<li class="leaf">
<a title="page" href="/node/add/page">Basic page</a></li>
<li class="last leaf"><a title="blog" href="/node/add/blog">Blog entry</a></li>
</ul>
</li>
</ul>
Here's what I need it to be:
<ul class="menu">
<li class="first last expanded" data-uk-dropdown>
<a title="" href="/node/add">Add content</a>
<ul class="menu uk-dropdown">
<li class="first leaf">
<a title="article" href="/node/add/article">Article</a></li>
<li class="leaf">
<a title="page" href="/node/add/page">Basic page</a></li>
<li class="last leaf"><a title="blog" href="/node/add/blog">Blog entry</a></li>
</ul>
</li>
</ul>
Im looking for the simplest approach possible.
You can crawl menu tree your self and write out menu HTML as you like. Used that and should be something like:
$tree = menu_tree_all_data('menu_machine_name');
Also, if I remember well, if you do only that your active (current) menu item won't be marked any way, and for marking it you have to also call (after getting $tree variable) :
menu_tree_add_active_path($tree);
But again, if I remember well, that function is only available if you install "Menu block" module...
Print out $tree variable after that and organize your code to crawl recursively menu tree you collected.
i ve done this below menu in php which is autogenerated with a function :
As you know, if i click on "Red Chicken", it will try to open a ../Red%20Chicken URL, which doesnt exist till it comes from a big table which change everytime.
What i want to do is : to know where we clicked (example : by generating the url and cut it ) and then redirect to a page like result.php (+ get something like the variable to know where do we come from). And of course, i don't want to create a .php page for each element of my table.
Is this thing possible ?
EDIT : i found a way, it's to change my function and how it generates the menu.
Not really what i wanted but it's okay.
<ul class=\"niveau1\">
<li class=\"sousmenu\"><a href=\"Food\">Food</li>
<ul class=\"niveau2\">
<li class=\"sousmenu\">Meat</li>
<ul class=\"niveau3\">
<li class=\"sousmenu\">Poultry</li>
<ul class=\"niveau4\">
<li class=\"sousmenu\">Red Chicken</li>
</ul>
</ul>
<ul class=\"niveau3\">
<li class=\"sousmenu\">Beef</li>
<ul class=\"niveau4\">
<li class=\"sousmenu\">Hamburgers</li>
</ul>
<ul class=\"niveau4\">
<li class=\"sousmenu\">Steak</li>
</ul>
</ul>
</ul>
<ul class=\"niveau2\">
<li class=\"sousmenu\">Dairy</li>
<ul class=\"niveau3\">
<li class=\"sousmenu\">Cow</li>
</ul>
<ul class=\"niveau3\">
<li class=\"sousmenu\">Sheep</li>
</ul>
</ul>
</ul>
<ul class=\"niveau1\">
<li class=\"sousmenu\">name</li>
</ul>
http://jsfiddle.net/w10j0a38/1/
The PHP-Way would probably be to use URLs like <a href='menuhandler.php?sel=cow'>Cow</a>, and if you want to be lazy, you could also JS/jquery to manupulate the URLs and replace <a href="something">with a call in the style shown before - but then this would not work w/o JS, so it is not a real option IMHO.
changed my function to generate it in another way
<a href=\"Recette.php?var=food\">
Not really what i wanted but it's okay.
I have a bullet list as below:
<ul>
<li>
text1 here
</li>
<li>
text2 here
</li>
<li>
text3 here
</li>
<li>
text4 here
</li>
<li>
text5 here
</li>
<li>
text6 here
</li>
<li>
text7 here
</li>
</ul>
I only show the f1rst 3 bullets, but have a link at the bottom to show the rest if clicked (an accordion type effect). Ideally I would also have a close link to compress it again after it had been expanded.
What is the best way to do this with PHP & can I do this just with CSS?
Thanks
Well, I don't believe that PHP is really the answer you want here. This feels like something better suited for the front-end. Take a look at Google results for 'javascript accordion' that will detail how you can best do this.
That being said you could do this with strictly CSS, however it is CSS3 and might not be widely supported yet. Could check out this tutorial/article about the :target pseudo-class.
You could do this in PHP and CSS by setting up your script to respond to a URL parameter that toggles an active/inactive class on the menu fragments you want to hide or show. Then its a simple matter of writing the CSS rules to show/hide based on the class. However keep in mind that this might mean a round trip to your server and back just to collapse a menu.
You can quite easily do it with JS.
First change your base HTML to look like
<ul>
<li id="myli1">
text1 here
</li>
<li id="myli2">
text2 here
</li>
<li id="myli3">
text3 here
</li>
<li id="myli4" style="display:none;">
text4 here
</li>
<li id="myli5" style="display:none;">
text5 here
</li>
<li id="myli6" style="display:none;">
text6 here
</li>
<li id="myli7" style="display:none;">
text7 here
</li>
</ul>
Then include a function like
function ShowMyLi(fromnr,displaystyle) {
var o=document.getElementById("myli"+fromnr);
if (!o) return;
o.style.display="block";
var cmd="ShowMyLi("+(fromnr+1).toString()+",'"+displaystyle+"');";
window.setTimeout(cmd,150);
}
On the "show more" button do onclick="ShowMyLi(4,'block');"
On the "hide more" button do onclick="ShowMyLi(4,'none');"
Group link which you want to be hidden in
Ex.
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li class="hidden">
<ul>
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
</ul>
</li>
And use jQuery to attach accordion to it
jQuery(document).ready(function(){
$('a#trigger').click(function() {
$('li ul.hidden').next().toggle('slow');
return false;
});
});
Of course you have to give display: none; to .hidden class
http://docs.jquery.com/UI/Accordion
PHP is a Server-side language what you're looking for is a client-side solution. Mootools has a Slide function which you could use very easily or you could try a JQuery solution Here's a list have fun :)
I'm trying to build a kiosk on a local machine, so no online requirement. I am going to build a big menu which will show exhibition stores and products. Due to the stores and products will always change, the client has requested to use a simple text file - .txt to populate the menu.
I used jQuery last week but unfortunately it didn't work. So after searching I've decided to use php instead. I'm new to php, but I have given it a try today, I have only managed to populate one list with the external file kate.txt
Here is my code for the page
<body>
<ul class="sf-menu">
<li class="current">
Area1
<ul>
<li class="current">
Kate
<ul>
<?php
//variables
$dir = "C:\wamp\www\Menu";
$txtfile="Textfiles\kate.txt";
foreach (glob("$txtfile") as $filename) {
$file = $filename;
$contents = file($file);
$string = implode("<li>", $contents);
}
?>
<li><?php echo $string ?></li>
</ul>
</li>
<li>
Cathy
<ul>
<li>Banana</li>
<li>Apple</li>
</ul>
</li>
</ul>
</li>
<li>
Area2
<ul>
<li>
lily
<ul>
<li>Watermelon</li>
<li>Grapefruit</li>
</ul>
</li>
<li>
John
<ul>
<li>Orange</li>
<li>Pineapple</li>
</ul>
</li>
</ul>
</li> <!--current-->
</ul> <!--sf-menu-->
</body>
Can someone please give me some direction on the php code? I don't mind how the text files are structured in a folder, as long as I can populate all the menu list items and links with a text file or multiple text files not in the html code.
Assuming that your text file holds all your list items
kate.txt:
<li>stuff</li>
<li>stuff</li>
...
the php file
<?php
$txtfile="Textfiles\kate.txt";
$content = file_get_contents($txtfile);
<li class="current">
Kate
<ul>
<?php echo $content ?>
</ul>
</li>