i have an HTML menu like this
<ul id="menu-main-menu" class="menu">
<li class="current_page_item"> Home </li>
<li class="menu-item-simple-parent"> About us   <i class="fa fa-caret-down"></i>
<ul class="sub-menu" style="left:0px;width:340px;">
<li data-content="mission"> Mission </li>
<li data-content="vision"> Vision </li>
<li data-content="management"> Management </li>
</ul>
</li>
I created this menu in wordpress. In that, submenu created as custom link. can I add data-content attribute for my wordpress submenu as shown in HTML code.
Try this:
add_filter( 'nav_menu_link_attributes', 'themeprefix_menu_attribute_add', 10, 3 );
function themeprefix_menu_attribute_add( $atts, $item, $args )
{
// Set the menu ID
$menu_link = 1215;
// Conditionally match the ID and add the attribute and value
if ($item->ID == $menu_link) {
$atts['data-toggle'] = 'modal';
}
//Return the new attribute
return $atts;
}
Tutorial -> https://wpbeaches.com/adding-attribute-wordpress-menu-item/
Related
I have a left sidebar menu which is populated by <li> and <ul> tag elements. I have handled the menu click event to expand/collapse the sub-menu items.
The problem I am facing here is I am not able to pass/identify the current instance of the tag element to do the expand/collapse i.e. If i expand a particular menu item all the other menus items are also getting affected. How do i handle this issue by identifying the current instance to do the required changes.
Please refer the snapshot about the issue
my HTML looks like below
<li [class.active]="menuLinkActive" (click)="MenuLinkToggle($event)">
<a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" [style.display]="subMenuDisplay">
<li>
Dashboard
</li>
<li>
Dashboard2
</li>
<li>
Dashboard3
</li>
</ul>
</li>
<li [class.active]="menuLinkActive" (click)="MenuLinkToggle($event)">
<a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" [style.display]="subMenuDisplay">
<li>
General Form
</li>
<li>
Advanced Components
</li>
</ul>
</li>
my component where i have handled the events
export class Layout {
menuLinkActive: any;
subMenuDisplay: any;
isSubMenuExpanded: any;
isMenuVisible: any;
MenuLinkToggle(event) {
if (this.isSubMenuExpanded) {
console.log("if (this.isMenuExpanded) {");
this.menuLinkActive = "";
this.subMenuDisplay = "none";
this.isSubMenuExpanded = false;
}
else {
console.log("else (this.isMenuExpanded) {");
this.menuLinkActive = "active";
this.subMenuDisplay = "block";
this.isSubMenuExpanded = true;
}
}
}
<li [class.active]="menuLinkActive" #li1 (click)="MenuLinkToggle($event, li1)">
MenuLinkToggle(event, element) {
or
MenuLinkToggle(event) {
event.target...
I have a created a second level submenu on my navbar on Liferay 6.2
I have tried to hide the right arrow caret that is shown always on dropdown menu, when it has a child. You can see it here:
https://s10.postimg.org/67vbfzu7d/caret.jpg
<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
<div class="navbar-inner">
<div class="collapse nav-collapse">
<ul class="nav navbar-nav sf-menu" >
#foreach ($nav_item in $nav_items)
#set($nav_li_css_class = "")
#if ($nav_item.isSelected())
#set($nav_li_css_class = $nav_li_css_class+" selected")
#end
#if ($nav_item.hasChildren())
#set($nav_li_css_class = $nav_li_css_class+" dropdown")
#end
<li class="$nav_li_css_class">
#if ($nav_item.hasChildren())
<a href="$nav_item.getURL()" $nav_item.getTarget() data-hover="dropdown" data-delay="100" data-close-others="false">
<p>$nav_item.icon() $nav_item.getName()</p>
</a>
#else
<a href="$nav_item.getURL()" $nav_item.getTarget()>
<p>$nav_item.icon() $nav_item.getName()</p>
</a>
#end
#if ($nav_item.hasChildren())
<ul class="dropdown-menu">
#foreach ($nav_child in $nav_item.getChildren())
#set($nav_li_css_class = "")
#if ($nav_child.isSelected())
#set($nav_li_css_class = " selected")
#end
#if ($nav_child.hasChildren())
#set($nav_li_css_class = " dropdown-submenu")
#end
<li class="$nav_li_css_class">
#if ($nav_child.hasChildren())
<a href="$nav_child.getURL()" $nav_child.getTarget() data-hover="dropdown" data-delay="100" data-close-others="false">
<span>$nav_child.icon() $nav_child.getName()</span>
</a>
#else
<a href="$nav_child.getURL()" $nav_item.getTarget()>
<span>$nav_child.icon() $nav_child.getName()</span>
</a>
#end
#if ($nav_child.hasChildren())
<ul class="dropdown-menu">
#foreach ($nav_child_child in $nav_child.getChildren())
#if ($nav_child_child.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_child_child.getURL()" $nav_child_child.getTarget()>
<p style="word-wrap:break-word; white-space:pre-line; text-align:left; display:block; ">$nav_child_child.getName()</p>
</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
#end
</li>
#end
</div>
</div>
</ul>
</nav>
<script>
Liferay.Data.NAV_LIST_SELECTOR = '.navbar-inner .nav-collapse > ul';
</script>
This is a requirement from the company. they want to hide the caret. I have been looking everywhere on my code, but cannot find the way to hide it. I have opened the navigation css and scss styles to try to hide it but can't find the solution. the ugly part is that the caret is not detected in firefox or chrome element inspector so, can't find a route.
I'm converting an html site to wordpress and am having an issue with the menus. I have created the separate menu locations with the php code in the templates
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
);
wp_nav_menu($args);
?>
</div>
<div class="footerNav">
<h3>Services</h3>
<?php
$args = array(
'theme-location' => 'footerServ',
);
wp_nav_menu($args);
?>
</div>
And the functions.php has this code
function register_my_menus() {
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footerServ' => __('Footer Services'),
'footerWork' => __('Footer Our Work'),
'footerLegal' => __('Footer Legal'),
'footerInc' => __('Footer Inc'),
));
}
add_action( 'init', 'register_my_menus' );
main menu config looks like this -
Main Menu Wordpress Config
footer menu config looks like this -
FooterMenu Wordpress Config
The resulting html looks like this for the main menu
<nav role="navigation" id="MainNav" class="group">
...
<div id="NavItems">
<div class="menu-footer-services-container">
<ul id="menu-footer-services" class="menu">
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95">
Mold Manufacturing
</li>
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96">
Injection Molding
</li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94">
Thermoforming
</li>
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93">
Plastic Fabrication
</li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91">
Custom Design
</li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92">
Assembly
</li>
</ul>
</div>
</div>
...
The footer menu has the same class and ul.
I have done everything I can think of, and am almost certain the configuration is correct inside of wordpress, and haven't found any issues with my code.
In summary, My main menu is being overwritten by the footer menu, despite having different locations set, and names. The wordpress dashboard has the correct configuration for what I want. However the result shows my main menu having the footer menu class and instead of 'home'... it shows 'mold manufacuring'....
I was following this video (in comments) to set up my navigation, and followed his actions exactly.
It's almost as if wordpress is only allowing me to show 1 menu, despite allowing me to configure several.
Thank you in advance for any help.
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
);
wp_nav_menu($args);
?>
</div>
Looks like the issues lies in the 'theme-location', seems to work if changed to 'theme_location' instead. However I will stay with my word-around because it would take more time to change it back for equal functionality.
If anyone is interested, the workaround looks like this
<div id="NavItems">
<ul>
<?php
$servMenu = wp_get_nav_menu_items('(wordpress number for your menu');
foreach ($servMenu as $item) {
$pages = get_pages();
$class = "";
foreach ($pages as $page) {
if ($page->post_title == $item->title) {
if (is_page($page->ID)) {
$class = "current-menu-item";
}
break;
}
} ?>
<li class="<?php echo $class; ?>">
<a href="<?php echo $item->url; ?>">
<?php echo $item->title; ?>
</a>
</li>
<?php }
?>
</ul>
</div>
Use menu_class in args like this it will take as ul class of menu.
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
'menu_class' => 'primary-class',
);
wp_nav_menu($args);
?>
</div>
<div class="footerNav">
<h3>Services</h3>
<?php
$args = array(
'theme-location' => 'footerServ',
'menu_class' => 'footer-class',
);
wp_nav_menu($args);
?>
</div>
How can I delete all thoses div around my menu create with menu_block for drupal 7 ?
I want to change this :
<div class="region region-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-3 menu-name-menu-prive parent-mlid-0 menu-level-2">
<ul class="menu">
<li class="first expanded menu-mlid-559" style="width: 397px;">
Avantages
<ul class="menu">
<li class="first leaf menu-mlid-596">
Ecologie
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
into this :
<ul class="menu">
<li>
link
<ul class="menu">
<li>
link
</li>
</ul>
</li>
</ul>
Thank you
You will need to add new templates for your block and the region that holds it, in order to get rid of some of the markup.
Take a look at Drupal 7 Template Suggestions
Your block template name would look like this: block--menu-block.tpl.php. And for the markup, can be just
<?php print $content ?>
The region template name would look like this `region--YOUR_REGION_NAME.tpl.php``. And for the markup, can be just
<?php print $content ?>
(Don't forget to flush the caches after adding the new templates)
I have the below HTML which I want to translate into wordpress function "**wp_nav_menu()**"
<ul class="nav navbar-nav">
<li id="about-menu">
About Us
<div id="about-us">
.....
inner div(s) and
Paragraphs etc
......
</div>
</li>
<li id="contact-menu">
Contact Us
<div id="contact-us">
.....
inner div(s) and
Paragraphs etc
......
</div>
</li>
<li>News</li>
</ul>
Any Idea on how to do it?
You can create a custom nav walker. There are no docs on wordpress.org, but you could simply take a look at an existing walker