This is source code: and i want customize it, but i dont know how add "textgrandchild"
https://bootsnipp.com/snippets/eN3Q8
and also below is my source code:
<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->
<div class="tree">
<ul>
<li>
Parent
<ul>
<li>
Child
<ul>
<li>
Grand Child
</li>
</ul>
</li>
<li>
Child
<ul>
<li>Grand Child</li>
<li>
Grand Child
<ul>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
<li>
Great Grand Child
</li>
</ul>
</li>
<li>Grand Child</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
And when i customize, now i want add like 'Great Grand Child" in source in Myself customize, but i don't know how add ul and li
Can you add one "Great Grand Child" for each on my "textgrandchild" in below code pen?
So ill understand
my customized is below
https://codepen.io/anon/pen/dVQWVN
Related
I have created a nav menu on the archive page
I want to loop them here as foreach
so how can do it?
<ul><!-- 1-->
<li><a> First tree</a> <i class="my-icon"></i>
<ul><!-- 2-->
<li><a>Second Tree</a>
<ul><!-- 3-->
<li><a>Third Tree</a>
<ul><!-- 4-->
<li><a>Fourth Tree</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a>name1</a>
<div>
<ul>
<li>
<a>name</a>
<ul>
<li>
<a>name</a>
</li>
<li>
<a>name</a>
</li>
</ul>
</li>
<li>
<a>name</a>
<ul>
<li>
<a>name</a>
</li>
<li>
<a>name</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<a>name2</a>
<div>
<ul>
<li>
<a>name</a>
<ul>
<li>
<a>name</a>
</li>
<li>
<a>name</a>
</li>
</ul>
</li>
<li>
<a>name</a>
<ul>
<li>
<a>name</a>
</li>
<li>
<a>name</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
As we can se we hve some <ul>.
We would like use PHP Simple HTML DOM for get array with data ul up.
We want use code:
foreach($html->find('li') as $li) {
}
But in this example we see all li on display:
http://prntscr.com/5390mf
http://prntscr.com/5390pj
But we dont know how get only parrent li:
1.
<li>
<a>name1</a>
</li>
2.
<li>
<a>name2</a>
</li>
And only than get childrens ul in parrents li and all children li in li.
Tell me please how make it?
P.S.: if i do bad explain that I would like to receive, please write
First:
foreach($html->find('li',0) as $line) {
}
Second (if we can add class to parrent ul):
foreach($html->find('ul.parrent_ul->li') as $line) {
}
Enjoy!
foreach($html->find('ul > li') as $li) {
}
Should get only the top level li's - the one's that are direct children of the ul elements
I am creating a theme in WordPress. I want to add a class to a <li> element if the user is on that page.
I have managed to create a dynamic navigation, using following code in my header.php:
<div class="nav">
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu' ) ); ?>
</div>
Which in HTML, translates to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li> About </li>
</ul>
</div>
I am hoping to dynamically alter this. If the user is on www.website.com/about, the navigation will change to:
<div class="nav">
<ul>
<li> Home </li>
<li> Products </li>
<li class="underline"> About </li>
</ul>
</div>
According to the docs, the current page item should already have a class .current-menu-item. you can use that to style the item with underline. Do you not see this class?
http://codex.wordpress.org/Function_Reference/wp_nav_menu#Current-Page_Menu_Items
I'm trying to create a custom accordion using jquery, have read through quite a few solution on stackoverflow but I just can't seem to get mine to work, I believe it has to deal with the .siblings. Anyway, here is my html code:
<div class="menu">
<ul>
<li class="current">
<img class="icon" src=""/>Dashboard
</li>
<li>
<img class="icon" src=""/>Mail
<ul class="submenu">
<li>
Write New
</li>
<li>
Junk
</li>
<li>
Deleted
</li>
</ul>
</li>
<li>
<img class="icon" src=""assets/colors.png""/>Child
<ul class="submenu">
<li>
Child 1
</li>
<li>
Child 2
</li>
<li>
Child 3
</li>
</ul>
</li>
<li>
<img class="icon" src=""/>Grid
</li>
<li>
<img class="icon" src=""/>Class
</li>
</ul>
</div>
And here is my jQuery code:
$('.menu ul li a').click(function() {
$(this).next('.submenu').siblings('li').slideUp();
$(this).next('.submenu').slideToggle();
});
The menu toggles open fine, but when I open one, the others won't close.
Thanks for your help !!
The reason why it won't close is because the siblings will look at the same level. So within the LI element it looks for more LI elements. You wan't the sibling LI's from the parent, and close there child .submenu.
Try this:
$(this).parent().siblings('li').find('.submenu').slideUp();
you're trying to close the one that you're about to open on the one that is currently open
$('.menu ul li a').click(function() {
$('.current').removeClass('current').next('.submenu').siblings('li').slideUp();
$(this).addClass('current').next('.submenu').slideToggle();
});
The whole code will be
$(this).parent().siblings('li').find('.submenu').slideUp();
$(this).next('.submenu').slideDown();
Just changed toggle to slideDown in last line....
I have one doubt ,every anchor will be clickable using user selector... can we make it only first level anchor clickable .any idea ?
I have a nested unordered list like this (simplified version / the depth is variable) :
<ul>
<li>
Root
<ul>
<li>
Page A
<ul>
<li>
Page 1 2
</li>
</ul>
</li>
</ul>
</li>
</ul>
Using PHP, is there a nice way to "explode" this nested list in (for this example) 3 lists ?
Thanks for your help
Edit :
The expected output will be :
<ul>
<li>
Root
</li>
</ul>
<ul>
<li>
Page A
</li>
</ul>
<ul>
<li>
Page 1 2
</li>
</ul>
Try:
$lists = '<ul>
<li>
Root
<ul>
<li>
Page A
<ul>
<li>
Page 1 2
</li>
</ul>
</li>
</ul>
</li>
</ul>';
$list_array = explode('<ul>', $lists);
foreach($list_array as $list){
// Now you have a single list, but missing the <ul>
// at the start. replace that and assign to a variable or whatever.
}