i need to insert span or div to parent li. For spoiler or button to use it in classie.js
<ul>
<li class="parent">
<ul></ul>
</li>
</ul>
I know that i should use walker in wordpress... but i dont know function
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?
I have a menu at the top of the page. On the bottom below the article I want to show the submenu items that are children or siblings of the active menu item (the item that I clicked on to get to the page in question).
That is, if I clicked on "Submenu item A" I want to see "Submenu item A" and "Submenu item B" in the bottom menu.
I want to do this using php or css, but not using javascript.
I don't want this to happen "on the fly" when hovering or something. I just want to show the childs and siblings of current item when that item has been clicked and I'm already on the target page to aid the user in navigating through the whole category.
Snippet showing what I want it to look like when "Menu item 1" or any of its submenu items are opened.
<ul>
<li>
Menu item 1
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
</ul>
<li>
<a href='item-2'>
Menu item 2
</a>
<li>
</ul>
<article>Page contents</article>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
Wrap the bottom ul with this code in php.
This script check if the path contains item-1, if so, he shows the ul otherwise it didn't.
<?php
$url = $_SERVER['REQUEST_URI'];
$url_parts = parse_url($url);
if (strpos($url_parts["path"], 'item1') !== false) {
?>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
<?php } ?>
This can't be done with CSS alone. For it to work with PHP and no Javascript it will only change on page load.
I would appreciate if you help me, the problem is that I have a menu and it has a submenu, and this submenu has a class by default - sub-menu, how can I change this class to submenu and how can I add to my first li - tag -
HTML:
<ul class="cf">
<li class="sub-menu">managers<i class="fa fa-angle-down fa-1g" aria-hidden="true"></i>
<ul class="submenu">
<li>page one</li>
<li><a href="shareholder.html">page two/a></li>
</ul>
</li>
</ul>
PHP:
<?php wp_nav_menu(array('theme_location'=>'menu', 'container'=>'false', 'menu_class'=>'cf', 'depth' => 2)); ?>
I don't know exaclty what you are trying to do. But you can find the submenu output in the file "wp-includes\class-walker-nav-menu.php".
The menu is build dynamically on the sub-menu class. So i don't know if the menu generator is still working if you change this class. Maybe it is better to add an additional class.
Try this code :
$(document).ready(function () {
$('ul.cf').find(".sub-menu").addClass("submenu").removeClass("sub-menu");
});
May be this will work for wordpress. Write this in your theme function.php
function change_submenu_class($menu) {
$menu = preg_replace('/ class="sub-menu"/','/ class="submenu" /',$menu);
return $menu;
}
add_filter('wp_nav_menu','change_submenu_class');
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 am currently using Bootstrap Timeline (example here). Since this will be a long timeline I want at the top of it to have some symbols (each with a date and a unique ID), which will represent certain event. When clicking a certain symbol I want to be redirect to the correspondent event on the timeline.
Nevertheless, at the moment, when I click the symbol I am redirected to the top of the div 'container' which contains the timeline and not to the specific <li>
Example:
LINK:
<ol class="timeline">
<li class="timeline__step done">
</li>
</ol>
TO:
<div class="container">
<ul class="timeline2">
<li id = "type1" onclick = "window.location.hash = 'type1';">
</li>
<ul>
<div>`
Remove id from the link and remove the onclick from the timeline item. The hashtag in href should jump to the id set in the timeline item.
<ol class="timeline">
<li class="timeline__step done">
</li>
</ol>
<div class="container">
<ul class="timeline2">
<li id="type1">
</li>
<ul>
<div>
Because you have the same id "type1" for two DOM elements. Id should be unique.